Day 14 - ViewPager Indicator
![Day 14 - ViewPager Indicator](/_vercel/image?url=%2Fimages%2F2014%2F07%2F30-days.png&w=828&q=80)
สวัสดีครับ บทความนี้เป็นบทความที่ 14 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
- Day 1 : AndroidStaggered Grid
- Day 2 : Paralloid
- Day 3 : Retrofit
- Day 4 : SwipeRefreshLayout
- Day 5 : Android GraphView
- Day 6 : Holo Color Picker
- Day 7 : Android Async Http
- Day 8 : Crashlytics
- Day 9 : Butter Knife
- Day 10 : Android Annotations
- Day 11 : DateTimePicker
- Day 12 : Circular Progress Button
- Day 13 : ViewPager
- Day 14 : ViewPagerIndicator
- Day 15 : FadingActionBar
- Day 16 : AutofitTextView
- Day 17 : SwipeListView
- Day 18 : ShowcaseView
- Day 19 : GreenDAO
- Day 20 : AndroidViewAnimation
- Day 21 : ActiveAndroid
- Day 22 : Twitter4J
- Day 23 : ListViewAnimations
- Day 24 : AndEngine
- Day 25 : EazeGraph
- Day 26 : Cardslib
- Day 27 : AdapterKit
- Day 28 : WeatherLib
- Day 29 : FlatUI
- Day 30 : Android Firebase
สำหรับวันนี้ขอนำเสนอเรื่อง ViewPagerIndicator ครับ จริงๆแล้วจะศึกษาเรื่องนี้ตั้งแต่เมื่อวานแล้ว แต่ว่าเห็นมันใช้ ViewPager ด้วย ก็เลยตัดสินใจเขียน Day 13 : ViewPager ไปก่อนหน้านี้ สำหรับบทความนี้ก็พูดถึง ViewPagerIndicator ล้วนๆครับ ส่วน ViewPager หรือ Fragment จะใช้คล้ายๆของ Day 13 : ViewPager นะครับ
Installation
ขั้นตอนการติดตั้ง เข้าไปหน้าเว็บของมันเลย จากนั้นเลือก ดาวน์โหลด ViewPagerIndicator Version 2.4.1 หรือใครใช้ Android Studio แล้วอยากติดตั้งแบบใช้ Gradle ก็ทำตามนี้ครับ
เปิดไฟล์ build.gradle
ของ Root Project เพิ่มข้างล่างนี้ลงไป
1maven {2 url "http://dl.bintray.com/populov/maven"3}
จะได้เป็นแบบนี้
1// Top-level build file where you can add configuration options common to all sub-projects/modules.2
3buildscript {4 ...5}6allprojects {7 repositories {8 maven {9 url "http://dl.bintray.com/populov/maven"10 }11 jcenter()12 }13}
ต่อมาเปิดไฟล์ build.gradle
ของModule เรา (ของแอพเรานั่นแหละ) ขึ้นมา แล้วเพิ่ม dependencies ลงไป
1dependencies {2 compile 'com.viewpagerindicator:library:2.4.1@aar'3}
จัดการกด Sync Project เสร็จสิ้นขั้นตอนการเพิ่ม Library ไปลงมือโค๊ดกันต่อ!
Getting Started
ในส่วน ViewPagerIndicator จะมีคลาสให้ใช้งาน หลักๆ ก็ตามรูปด้านล่างนี้
ที่จริง ในส่วน Sample Code ก็มีตัวอย่าง ให้ดูแทบจะครบเลยก็ว่าได้ สำหรับบทความนี้ผมจะยกตัวอย่างมา 2-3 ตัวอย่างนะครับ เริ่มจาก
TitlePageIndicator
การใช้งาน TitlePageIndicator ทำได้โดยการประกาศแท็ก xml ดังนี้
1<com.viewpagerindicator.TitlePageIndicator2 android:id="@+id/titles"3 android:layout_height="wrap_content"4 android:layout_width="match_parent" />
โดยต้องอยู่คู่กับ ViewPager นะครับ สำหรับส่วนเลเอาท์ผมทำการสร้างขึ้นมาใหม่ชื่อว่า activity_viewpager_titlepage.xml
จากนั้นก็ใส่ ViewPager และ TitlePageIndicator ดังนี้
1<LinearLayout2 xmlns:android="http://schemas.android.com/apk/res/android"3 android:orientation="vertical"4 android:layout_width="match_parent"5 android:layout_height="match_parent"6 android:weightSum="1">7
8 <com.viewpagerindicator.TitlePageIndicator9 android:id="@+id/titles"10 android:layout_height="0dp"11 android:layout_width="fill_parent"12 android:layout_weight="0.1"13 android:padding="10dp" />14
15 <android.support.v4.view.ViewPager16 android:id="@+id/pager"17 android:layout_width="match_parent"18 android:layout_height="0dp"19 android:layout_weight="0.9"/>20</LinearLayout>
ไม่ขออธิบายเรื่องเลเอาท์นะครับ หากใครสังเกตเห็น layout_weight
และ weightSum
แล้วงงว่าคืออะไร? คร่าวๆก็คือแบ่ง ratio ให้กับเลเอาท์ครับ แนะนำให้อ่านบทความ นี้ประกอบครับ Layout Weight ใช้อย่างไร ใช้ให้เป็น อธิบายไว้ดีแล้ว
เมื่อได้ Layout แล้ว ต่อมาก็สร้าง Activity ขึ้นมา ชื่อว่า ViewPagerIndicatorActivity.java
1package com.devahoy.learn30androidlibraries.day14;2
3import android.os.Bundle;4import android.support.v4.view.ViewPager;5import android.support.v7.app.ActionBarActivity;6
7import com.devahoy.learn30androidlibraries.R;8import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;9import com.viewpagerindicator.TitlePageIndicator;10
11public class ViewPagerIndicatorActivity extends ActionBarActivity {12
13 private TitlePageIndicator mTitlePageIndicator;14 private ViewPager mViewPager;15
16 @Override17 protected void onCreate(Bundle savedInstanceState) {18 super.onCreate(savedInstanceState);19 setContentView(R.layout.day14_activity_viewpager_titlepage);20
21 mViewPager = (ViewPager) findViewById(R.id.pager);22 mTitlePageIndicator = (TitlePageIndicator) findViewById(R.id.titles);23
24 SimplePagerAdapter adapter =25 new SimplePagerAdapter(getSupportFragmentManager());26 mViewPager.setAdapter(adapter);27
28 mTitlePageIndicator.setViewPager(mViewPager);29 }30}
จากด้านบน ผมทำการ binding View ปกติ จากนั้นก็ใช้ SimplePagerAdapter
จากบทความที่แล้ว โดยเป็น Adapter ให้กับ ViewPager จากนั้นสุดท้าย ให้ TitlePageIndicator ทำการ setViewPager ทดสอบรันโปรแกรม ก็จะได้หน้าตาประมาณนี้
LinePageIndicator
ทำการสร้างเลเอาท์ขึ้นมาใหม่ชื่อว่า activity_viewpager_line.xml
1<?xml version="1.0" encoding="utf-8"?>2<LinearLayout3 xmlns:android="http://schemas.android.com/apk/res/android"4 android:orientation="vertical"5 android:layout_width="match_parent"6 android:layout_height="match_parent"7 android:weightSum="1">8
9 <android.support.v4.view.ViewPager10 android:id="@+id/pager"11 android:layout_width="match_parent"12 android:layout_height="0dp"13 android:layout_weight="0.9"/>14
15 <com.viewpagerindicator.LinePageIndicator16 android:id="@+id/indicator"17 android:layout_height="0dp"18 android:layout_width="fill_parent"19 android:layout_weight="0.1"20 android:padding="10dp" />21</LinearLayout>
เลเอาท์ด้านบน คล้ายกับแบบแรก แตกต่างกันที่เปลี่ยนเป็น LinePageIndicator
แล้วก็ย้ายมาอยู่ข้างล่าง ViewPager แทนครับ
ต่อมาที่ส่วนโค๊ด ViewPagerIndicatorActivity
ก็แค่เปลี่ยนจาก TitlePageIndicator
เป็น LinePageIndicator
ส่วนอื่นคงไว้เหมือนเดิมครับ จะได้ดังนี้
1package com.devahoy.learn30androidlibraries.day14;2
3import android.os.Bundle;4import android.support.v4.view.ViewPager;5import android.support.v7.app.ActionBarActivity;6
7import com.devahoy.learn30androidlibraries.R;8import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;9import com.viewpagerindicator.LinePageIndicator;10import com.viewpagerindicator.TitlePageIndicator;11
12public class ViewPagerIndicatorActivity extends ActionBarActivity {13
14 private LinePageIndicator mLinePageIndicator;15 private ViewPager mViewPager;16
17 @Override18 protected void onCreate(Bundle savedInstanceState) {19 super.onCreate(savedInstanceState);20 setContentView(R.layout.day14_activity_viewpager_line);21
22 mViewPager = (ViewPager) findViewById(R.id.pager);23 mLinePageIndicator = (LinePageIndicator) findViewById(R.id.indicator);24
25 SimplePagerAdapter adapter =26 new SimplePagerAdapter(getSupportFragmentManager());27 mViewPager.setAdapter(adapter);28
29 mLinePageIndicator.setViewPager(mViewPager);30 }31}
เมื่อทดสอบรันโปรแกรม จะได้ดังภาพ (ผมเปลี่ยนจำนวน Page ในคลาส SimplePagerAdapter
เป็น 5)
CirclePageIndicator
ส่วนการใช้ CirclePageIndicator ก็คล้ายๆกับ ด้านบนครับ แค่เปลี่ยนจาก LinePageIndicator
เป็น CirclePageIndicator
แบบนี้
1<?xml version="1.0" encoding="utf-8"?>2<RelativeLayout3 xmlns:android="http://schemas.android.com/apk/res/android"4 android:layout_width="match_parent"5 android:layout_height="match_parent">6
7 <android.support.v4.view.ViewPager8 android:id="@+id/pager"9 android:layout_width="match_parent"10 android:layout_height="match_parent"11 android:layout_alignParentTop="true"12 android:layout_above="@+id/indicator"/>13
14 <com.viewpagerindicator.CirclePageIndicator15 android:id="@+id/indicator"16 android:layout_height="20dp"17 android:layout_width="match_parent"18 android:layout_alignParentBottom="true"19 android:background="#ff31415a"20 android:padding="10dp" />21</RelativeLayout>
ด้านบน ผมเปลี่ยนไปใช้ RelativeLayout นะครับ เนื่องจาก จะให้ Circle มันสูงแค่ 20dp พอ ถ้าเป็นอัตรา ratio 1:10 แล้ว มันเยอะไป
ส่วนคลาส ViewPagerIndicatorActivity
ก็เป็นแบบนี้
1package com.devahoy.learn30androidlibraries.day14;2
3import android.os.Bundle;4import android.support.v4.view.ViewPager;5import android.support.v7.app.ActionBarActivity;6
7import com.devahoy.learn30androidlibraries.R;8import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;9import com.viewpagerindicator.CirclePageIndicator;10
11public class ViewPagerIndicatorActivity extends ActionBarActivity {12
13 private CirclePageIndicator mCirclePageIndicator;14 private ViewPager mViewPager;15
16 @Override17 protected void onCreate(Bundle savedInstanceState) {18 super.onCreate(savedInstanceState);19 setContentView(R.layout.day14_activity_viewpager_circle);20
21 mViewPager = (ViewPager) findViewById(R.id.pager);22
23 mCirclePageIndicator = (CirclePageIndicator) findViewById(R.id.indicator);24
25 SimplePagerAdapter adapter =26 new SimplePagerAdapter(getSupportFragmentManager());27 mViewPager.setAdapter(adapter);28
29 mCirclePageIndicator.setViewPager(mViewPager);30 }31}
ทดสอบ รันได้ผลลัพธ์แบบนี้
สรุป
จริงๆ แล้วบทความนี้ก็เป็นแนว ตัวอย่างซะมากกว่าครับ โดยนำเสนอเพียงแค่ 3 แบบเท่านั้น แต่ว่า ViewPagerIndicator ยังมีแบบอื่นๆให้ใช้อีกครับ ตามที่กล่าวไว้ในตอนต้นของบทความ สำหรับใครที่อยากจะลองใช้แบบอื่น ก็ไม่ยากเลยครับ วิธีการก็ทำเหมือนกับ 3 แบบที่ผมยกมาด้านบนนั้นแหละครับ เพียงแค่เปลี่ยน tag xml, ในคลาส ก็ทำการกำหนดคลาส PageIndicator ให้ตรงกันกับที่ประกาศไว้ในเลเอาท์ซะ แล้วก็ setViewPager()
ปกติครับ สำหรับบทความนี้ขอจบเพียงเท่านี้ครับ
Happy Coding :D
Source Code
References
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust