ข้ามไปที่เนื้อหาหลัก

การสร้าง 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);

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


ความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

อุปมา อุปไมย สำนวนการเปรียบเทียบ ของไทย

การเตรียมสอบ ก.พ. ภาค ก. เพื่อสอบบรรจุเข้ารับราชการ มีการทดสอบความสามารถทั่วไป มักจะมี
ข้อสอบที่เกี่ยวกับอุปมาอุปไมย  ข้อสอบมีลักษณะ ให้หาตัวเลือกที่มีความหมาย ความสัมพันธ์คล้ายคลึง หรือเหมือนกับที่โจทย์กำหนดให้มา  หรือเติมข้อความที่มีความหมายสอดคล้องกับคำอุปมาอุปไมยที่ยกมาให้ เป็นต้น ดังนั้น การเข้าใจความหมายของคำอุปมาอุปไมย จึงช่วยให้ทำข้อสอบได้ดียิ่งขึ้น

คำอุปมาอุปไมย หมายถึง ถ้อยคำที่เป็นสำนวนพวกหนึ่ง กล่าวทำนองเปรียบเทียบ ให้เห็นจริง เข้าใจแจ่มแจ้งชัดเจน และสละสลวยน่าฟังมากขึ้น การพูดหรือการเขียน นิยมหาคำอุปมาอุปไมยมาเติมให้ได้ความชัดเจนเกิดภาพพจน์ เข้าใจง่าย เช่น

คนดุ หากต้องการให้ความหมายชัดเจน น่าฟัง และเกิดภาพพจน์ชัดเจนก็ต้องอุปมาอุปไมยว่า “ดุ เหมือน เสือ”
ขรุขระมาก การสื่อความยังไม่ชัดเจนไม่เห็นภาพ ต้องอุปมาอุปไมยว่า “ขรุขระเหมือนผิวมะกรูด” หรือ “ขรุขระเหมือนผิวพระจันทร์” ก็จะทำให้เข้าใจ ความหมายในรูปธรรมชัดเจนมากยิ่งขึ้น

คำอุปมาอุปไมยที่ควรรู้จัก (พิมพ์คำ/ข้อความ แล้วกดปุ่ม "ค้นหา")

แนวข้อสอบ เงื่อนไขสัญลักษณ์

ครั้งที่แล้ว ได้แนะนำหลักการทำ ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ มา แล้ว ถ้าใครยังไม่ได้อ่าน ก็คลิกกลับไปอ่านได้
ความจริง ข้อสอบเงื่อนไขสัญลักษณ์ เป็นข้อสอบไม่ยาก ถ้าเข้าใจหลักการ และมีทักษะความชำนาญ ใจเย็น ๆ อย่าตื่นเต้น โดยเฉพาะการดูเครื่องหมายต่าง ๆ อย่าดูผิด เช่น เครื่องหมายมากกว่า (>) น้อยกว่า (<) เป็นต้น เพราะการแก้ปัญหาโจทย์เงื่อนไขสัญลักษณ์ หรือ inequality ก็คล้ายกับการแก้ปัญหาสมการโดยทั่วไป นั่นเอง คือ สามารถบวก ลบ คูณ หาร ด้วยจำนวนที่เท่ากัน ทั้งสองข้างของเครื่องหมายได้ กลับเศษเป็นส่วนได้ แต่ก็มีบางเรื่อง บางรายละเอียดที่แตกต่างกันบ้าง ซึ่งอ่านได้จาก ข้อสอบ ก.พ. ภาค ก. ความสามารถทั่วไป เงื่อนไขสัญลักษณ์ นะครับ ครั้งนี้ จึงเป็นการนำแนวข้อสอบ เงื่อนไขสัญลักษณ์ เพื่อนำมาฝึกทำให้เกิดทักษะความชำนาญ เพื่อจะได้ทำข้อสอบได้รวดเร็วขึ้น เพราะในห้องสอบ เวลาจัดได้ว่ามีค่ามาก ยิ่งทำเร็วและถูกต้อง ยิ่งดี คำสั่ง

เลือกตอบข้อ 1. ถ้าข้อสรุปทั้งสอง ถูกด้องหรือเป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 2. ถ้าข้อสรุปทั้งลอง ผิดหรือไม่เป็นจริง ตามเงื่อนไข
เลือกตอบข้อ 3. ถ้าข้อ…

เทคนิคการทำ ข้อสอบ อนุกรม ของ ก.พ.

|ประเภทของอนุกรม เทคนิคการทำโจทย์เลข อนุกรม ข้อแนะนำเพิ่มเติม |


ข้อสอบเลขอนุกรม ของ ก.พ. ต้องการวัดความถนัดทางด้านตัวเลข โดยการจัดทำตัวเลขเป็นชุด ๆ ที่มีความสัมพันธ์กันบางอย่าง โดยให้ผู้เข้าสอบได้แสดงความถนัดด้านตัวเลข ในการวิเคราะห์และแก้ปัญหาตามที่โจทย์ระบุ


ประเภทของอนุกรม รูปแบบความสัมพันธ์ของตัวเลขอนุกรมเท่าที่พบบ่อย ๆ มีหลายประเภท เช่น

ก. อนุกรมเชิงเดี่ยว 

ได้แก่ชุดตัวเลขที่เป็นอนุกรมเพียงชุดเดียว เช่น
ค่าของตัวเลขเพิ่มขึ้นต่อเนื่องอย่างเป็นระบบ โดยการบวก หรือ คูณ ตัวเลขก่อนหน้า เช่น บวกด้วยตัวเลขที่เป็นค่าคงที่ เช่น    5   10   15   20   ...?...
บวกด้วยตัวเลขที่มีระบบ เช่น     1    2    5    10   ...?...
คูณด้วยค่าคงที่ เช่น   1   3   9   27   ...?...
มีทั้ง บวก ลบ คูณ หรือหาร สลับกัน เช่น บวกแล้วคูณด้วยค่าคงที่สลับกัน ดังตัวอย่าง  5   7    14   16  32   ...... มีการ บวก ลบ คูณ หรือ หาร ร่วมกัน เช่น  15   31   63   127   255  ...?...
ในตัวอย่างนี้ จะเห็นว่า ตัวเลขตัวแรกคูณด้วย 2 และบวกด้วย 1 จะได้ตัวเลขตัวถัดไป คูณด้วยค่าคงที่ที่เป็นเศษส่วน ให้สังเกตความสัมพันธ์ว่า ตัวเลขก่อนหน้า …