Devahoy Logo
PublishedAt

Android

Day 14 - ViewPager Indicator

Day 14 - ViewPager Indicator

สวัสดีครับ บทความนี้เป็นบทความที่ 14 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

สำหรับวันนี้ขอนำเสนอเรื่อง ViewPagerIndicator ครับ จริงๆแล้วจะศึกษาเรื่องนี้ตั้งแต่เมื่อวานแล้ว แต่ว่าเห็นมันใช้ ViewPager ด้วย ก็เลยตัดสินใจเขียน Day 13 : ViewPager ไปก่อนหน้านี้ สำหรับบทความนี้ก็พูดถึง ViewPagerIndicator ล้วนๆครับ ส่วน ViewPager หรือ Fragment จะใช้คล้ายๆของ Day 13 : ViewPager นะครับ

Installation

ViewPagerIndicator

ขั้นตอนการติดตั้ง เข้าไปหน้าเว็บของมันเลย จากนั้นเลือก ดาวน์โหลด ViewPagerIndicator Version 2.4.1 หรือใครใช้ Android Studio แล้วอยากติดตั้งแบบใช้ Gradle ก็ทำตามนี้ครับ

เปิดไฟล์ build.gradle ของ Root Project เพิ่มข้างล่างนี้ลงไป

1
maven {
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
3
buildscript {
4
...
5
}
6
allprojects {
7
repositories {
8
maven {
9
url "http://dl.bintray.com/populov/maven"
10
}
11
jcenter()
12
}
13
}

ต่อมาเปิดไฟล์ build.gradle ของModule เรา (ของแอพเรานั่นแหละ) ขึ้นมา แล้วเพิ่ม dependencies ลงไป

1
dependencies {
2
compile 'com.viewpagerindicator:library:2.4.1@aar'
3
}

จัดการกด Sync Project เสร็จสิ้นขั้นตอนการเพิ่ม Library ไปลงมือโค๊ดกันต่อ!

Getting Started

ในส่วน ViewPagerIndicator จะมีคลาสให้ใช้งาน หลักๆ ก็ตามรูปด้านล่างนี้

ViewPager

ที่จริง ในส่วน Sample Code ก็มีตัวอย่าง ให้ดูแทบจะครบเลยก็ว่าได้ สำหรับบทความนี้ผมจะยกตัวอย่างมา 2-3 ตัวอย่างนะครับ เริ่มจาก

TitlePageIndicator

การใช้งาน TitlePageIndicator ทำได้โดยการประกาศแท็ก xml ดังนี้

1
<com.viewpagerindicator.TitlePageIndicator
2
android:id="@+id/titles"
3
android:layout_height="wrap_content"
4
android:layout_width="match_parent" />

โดยต้องอยู่คู่กับ ViewPager นะครับ สำหรับส่วนเลเอาท์ผมทำการสร้างขึ้นมาใหม่ชื่อว่า activity_viewpager_titlepage.xml จากนั้นก็ใส่ ViewPager และ TitlePageIndicator ดังนี้

1
<LinearLayout
2
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.TitlePageIndicator
9
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.ViewPager
16
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

1
package com.devahoy.learn30androidlibraries.day14;
2
3
import android.os.Bundle;
4
import android.support.v4.view.ViewPager;
5
import android.support.v7.app.ActionBarActivity;
6
7
import com.devahoy.learn30androidlibraries.R;
8
import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;
9
import com.viewpagerindicator.TitlePageIndicator;
10
11
public class ViewPagerIndicatorActivity extends ActionBarActivity {
12
13
private TitlePageIndicator mTitlePageIndicator;
14
private ViewPager mViewPager;
15
16
@Override
17
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 ทดสอบรันโปรแกรม ก็จะได้หน้าตาประมาณนี้

Title

LinePageIndicator

ทำการสร้างเลเอาท์ขึ้นมาใหม่ชื่อว่า activity_viewpager_line.xml

1
<?xml version="1.0" encoding="utf-8"?>
2
<LinearLayout
3
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.ViewPager
10
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.LinePageIndicator
16
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 ส่วนอื่นคงไว้เหมือนเดิมครับ จะได้ดังนี้

1
package com.devahoy.learn30androidlibraries.day14;
2
3
import android.os.Bundle;
4
import android.support.v4.view.ViewPager;
5
import android.support.v7.app.ActionBarActivity;
6
7
import com.devahoy.learn30androidlibraries.R;
8
import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;
9
import com.viewpagerindicator.LinePageIndicator;
10
import com.viewpagerindicator.TitlePageIndicator;
11
12
public class ViewPagerIndicatorActivity extends ActionBarActivity {
13
14
private LinePageIndicator mLinePageIndicator;
15
private ViewPager mViewPager;
16
17
@Override
18
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)

Line

CirclePageIndicator

ส่วนการใช้ CirclePageIndicator ก็คล้ายๆกับ ด้านบนครับ แค่เปลี่ยนจาก LinePageIndicator เป็น CirclePageIndicator แบบนี้

1
<?xml version="1.0" encoding="utf-8"?>
2
<RelativeLayout
3
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.ViewPager
8
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.CirclePageIndicator
15
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 ก็เป็นแบบนี้

1
package com.devahoy.learn30androidlibraries.day14;
2
3
import android.os.Bundle;
4
import android.support.v4.view.ViewPager;
5
import android.support.v7.app.ActionBarActivity;
6
7
import com.devahoy.learn30androidlibraries.R;
8
import com.devahoy.learn30androidlibraries.day13.SimplePagerAdapter;
9
import com.viewpagerindicator.CirclePageIndicator;
10
11
public class ViewPagerIndicatorActivity extends ActionBarActivity {
12
13
private CirclePageIndicator mCirclePageIndicator;
14
private ViewPager mViewPager;
15
16
@Override
17
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
}

ทดสอบ รันได้ผลลัพธ์แบบนี้

Circle

สรุป

จริงๆ แล้วบทความนี้ก็เป็นแนว ตัวอย่างซะมากกว่าครับ โดยนำเสนอเพียงแค่ 3 แบบเท่านั้น แต่ว่า ViewPagerIndicator ยังมีแบบอื่นๆให้ใช้อีกครับ ตามที่กล่าวไว้ในตอนต้นของบทความ สำหรับใครที่อยากจะลองใช้แบบอื่น ก็ไม่ยากเลยครับ วิธีการก็ทำเหมือนกับ 3 แบบที่ผมยกมาด้านบนนั้นแหละครับ เพียงแค่เปลี่ยน tag xml, ในคลาส ก็ทำการกำหนดคลาส PageIndicator ให้ตรงกันกับที่ประกาศไว้ในเลเอาท์ซะ แล้วก็ setViewPager() ปกติครับ สำหรับบทความนี้ขอจบเพียงเท่านี้ครับ

Happy Coding :D

Source Code

References

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts