การสร้าง ViewPager สำหรับ Android 1.5

ViewPager ของ Android ทำให้สามารถสร้างหน้าจอข้อมูลบนโทรศัพท์ที่ใช้ OS ของ Android ได้สะดวกขึ้น เพราะมีการออกแบบไว้แล้วอย่างเรียบร้อย สามารถใช้นิ้วลาก/ปัด/swipe เพื่อเปลี่ยนหน้า จากอีกหน้าหนึ่ง ไปยังหน้าหนึ่งได้ ดังตัวอย่างข้างล่างนี้

ในตัวอย่างนี้ ใช้ Android Studio 1.5 เพื่อสร้าง ViewPager โดยใช้ Fragment เพียง Fragment เดียว และส่งข้อมูลมาแสดงจำนวนทั้งหมด 6 หน้าด้วยกัน

การส่งข้อมูลไปยัง Fragment ใช้การส่งแบบ static โดยส่งเป็น String แล้วมาแยกเพื่อนำไปแสดงใน TextView จำนวน 2 ข้อความด้วยกัน

นอกจากนี้ จะมีการกำหนดให้มีหัวของแต่ละรายการ โดยใช้ PageStrip เพื่อแสดงรายการ

หลักการ

สร้าง Fragment สำหรับแสดงข้อมูลแต่ละหน้า ในตัวอย่างนี้ จะแสดงเฉพาะ ชื่อ และจังหวัดเท่านั้น โดยจะใช้ Fragment นี้กับข้อมูลทั้งหมด ซึ่งมีด้วยกัน 6 รายการ (แสดงรายการละหน้า) ไฟล์ Java Class สำหรับ Fragment นี้ จะกำหนดให้มีตัวแปร เป็น Static เพื่อรับการส่งข้อมูลเข้ามาจากภายนอกด้วย

จากนั้นจะสร้าง Adapter ซึ่งเป็นตัวกลางจัดการข้อมูลไปยัง Fragment

และสุดท้าย ก็จะเป็นหน้าหลัก ซึ่งมี Fragment ที่จะทำหน้าที่เป็น ViewPager หน้าหลักนี้ จะกำหนดข้อมูล จำนวน 6 รายการ และส่งข้อมูลไปยัง Java Class ของ Fragment และเรียกใช้งาน Adapter เพื่อให้แสดงข้อมูล ใน ViewPager ต่อไป

วิธีการ

1. สร้าง Fragment สำหรับแสดงข้อมูลเป็น ViewPager

ไฟล์ XML ชื่อ my_fragment.xml ประกอบด้วย TextView จำนวน 2 TextView ดังนี้

my_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="for Name"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="41dp"/>
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_below="@+id/textView"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="for Province"
        android:layout_marginTop="10dp"/>
</RelativeLayout>

ไฟล์ Java Class สำหรับคู่กับ my_fragment.xml ชื่อ MyFragment.java ดังนี้

MyFragment.java

package com.thongjoon.viewpager_demo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.Arrays;
import java.util.List;

public class MyFragment extends Fragment {

    //กำหนดให้เป็น static เพื่อจะได้ส่งข้อมูลจากภายนอก คือจาก PageViewActivity ได้
    public static final MyFragment newInstance(String data) {
        MyFragment f = new MyFragment();
        Bundle myBundle = new Bundle(1);
        myBundle.putString("myData", data);
        f.setArguments(myBundle);
        return f;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        //รับข้อมูลที่ส่งเข่ามาจาก static
        String data = getArguments().getString("myData");

        //แปลงข้อมูลที่เข้ามาในรูปของ String ให้อยู่ในรูปของ List
        List dataList = Arrays.asList(data.split(";"));

        View v = inflater.inflate(R.layout.my_fragment, container, false);
        TextView thisName = (TextView)v.findViewById(R.id.textView);
        thisName.setText(dataList.get(0));
        TextView thisProvince = (TextView)v.findViewById(R.id.textView2);
        thisProvince.setText(dataList.get(1));

        return v;
    }

}

2. สร้าง Adapter 

ไฟล์ Java Class นี้ชื่อ MyPagerAdapter.java ดังนี้

MyPagerAdapter.java

package com.thongjoon.viewpager_demo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class MyPagerAdapter extends FragmentPagerAdapter {
    private List fragments;

    public MyPagerAdapter(FragmentManager fm, List fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return "รายการที่ " + (position + 1) + " จาก " + this.fragments.size();
    }

    @Override
    public Fragment getItem(int position) {
        return this.fragments.get(position);
    }

    @Override
    public int getCount() {
        return this.fragments.size();
    }
}

3. สร้าง หน้าหลัก

ไฟล์ XML โปรแกรม Android Studio เมื่อกำหนดให้ใช้ Blank Project จะสร้างให้ 2 ไฟล์ คือ activity_main.xml และ content_main.xml นำไฟล์ content_main.xml มาปรับ เป็นดังนี้

content_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.thongjoon.viewpager_demo.MainActivity"
    tools:showIn="@layout/activity_main">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/toolbar">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pager_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:paddingBottom="4dp"
            android:paddingTop="0dp" />
    </android.support.v4.view.ViewPager>

</RelativeLayout>

ในส่วน PagerTabStrip คือ ชื่อของหน้าแต่ละหน้า ถ้าไม่ต้องการให้มีชื่อหน้าแต่ละหน้า ก็สามารถตัดส่วนนี้ออกไปได้

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.thongjoon.viewpager_demo.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

และสุดท้ายคือการสร้าง java ไฟล์หลัก คือ MainActivity.java ดังนี้

MainActivity.java

package com.thongjoon.viewpager_demo;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends AppCompatActivity {

    MyPagerAdapter pageAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setIcon(R.mipmap.ic_launcher);



        List<Fragment> fragments = getFragments();

        pageAdapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);

        ViewPager pager = (ViewPager)findViewById(R.id.viewpager);
        pager.setAdapter(pageAdapter);

    }
    //สร้างข้อมูลในแต่ละหน้า ซึ่งจะส่งข้อมูลไปยัง MyFragment.newInstance()
    private List<Fragment> getFragments(){
        List<Fragment> fragmentList = new ArrayList<Fragment>();

        fragmentList.add(MyFragment.newInstance("สมหมาย;อยุธยา"));
        fragmentList.add(MyFragment.newInstance("สมศักดิ์;ปราจีนบุรี"));
        fragmentList.add(MyFragment.newInstance("สมทรง;ชัยนาท"));
        fragmentList.add(MyFragment.newInstance("สมศรี;นครปฐม"));
        fragmentList.add(MyFragment.newInstance("สมจิต;ราชบุรี"));
        fragmentList.add(MyFragment.newInstance("สมบูรณ์;ลพบุรี"));

        return fragmentList;
    }

}

สำหรับภาพ Logo ผมทำขึ้นใหม่ นำไปไว้ในห้อง mipmap เดี๋ยวนี้ ไม่นิยมให้ภาพ Logo อยู่ในตำแหน่งนี้ ถ้าจะเอาออก ให้ลบส่วนที่กำหนดภาพออกไป

        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setIcon(R.mipmap.ic_launcher);

โดยสรุป โครงสร้างทั้งหมด มีดังภาพ