實(shí)例講解Android中ViewPager組件的一些進(jìn)階使用技巧
更新時(shí)間：2016年03月23日 15:27:43 作者：yayun0516
這篇文章主要介紹了Android中ViewPager組件的一些進(jìn)階使用技巧,包括添加標(biāo)題與onPagerChangeListener監(jiān)聽使用等,需要的朋友可以參考下
我們經(jīng)?？吹绞褂昧薞iewPager的App，在每頁上面都會(huì)有一個(gè)滑塊來標(biāo)志當(dāng)前處于哪一頁。在PagerView包里有android.support.v4.view.PagerTitleStrip和android.support.v4.view.PagerTabStrip兩個(gè)組件，可以在布局文件中，作為ViewPager的子標(biāo)簽，并設(shè)定相對(duì)與ViewPager的位置(比如頂部)。但這兩個(gè)組件都很丑，并且標(biāo)題會(huì)隨著頁面一起滑動(dòng)，所以一般都不用。
其實(shí)實(shí)現(xiàn)一個(gè)滑塊標(biāo)志當(dāng)前頁面也很簡(jiǎn)單，大概需要兩步：
第一步 在布局文件ViewPager的上方放置一個(gè)ImageView組件，組件可以是圖片或是shape資源。注意需要把ImageView的scaleType屬性設(shè)為matrix，就是說該組件的位置和大小由一個(gè)變換矩陣來控制；
第二步 在Activity中為ViewPager組件添加OnPageChangeListener監(jiān)聽器。在OnPageChangeListener里設(shè)定matrix，用于控制指示滑塊ImageView的位置。該監(jiān)聽器需要實(shí)現(xiàn)三個(gè)方法：
onPageScrollStateChanged：用于監(jiān)聽滑動(dòng)狀態(tài)的改變
onPageScrolled：用于監(jiān)聽滑動(dòng)的動(dòng)作
onPageSeleted:用于監(jiān)聽頁面的切換，即某個(gè)頁面被選中了作為當(dāng)前頁面。
一般實(shí)現(xiàn)onPageSelected方法就可以，其他兩個(gè)方法可以空著。另外為了使頁面切換時(shí)滑塊也是平滑地滑動(dòng)，可以給滑塊的ImageView指定一個(gè)TranslateAnimation動(dòng)畫，指定動(dòng)畫用setAnimation，TranlateAnimation也很簡(jiǎn)單，有個(gè)構(gòu)造函數(shù)是TranslateAnimation(int beginX,int endX,int beginY,int endY)，將運(yùn)動(dòng)矢量的起始位置和終止位置傳給它就好了。
下面我們來看五個(gè)具體的例子：
一 實(shí)現(xiàn)ViewPager（數(shù)據(jù)源為L(zhǎng)ist<View>）
1.先在main.xml文件中添加一個(gè)ViewPager:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</LinearLayout>
2.創(chuàng)建三個(gè)View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="25dp"
android:text="第一頁" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二頁" >
</TextView>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/txt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第三頁" >
</TextView>
</LinearLayout>
3.創(chuàng)建一個(gè)ViewPager適配器類：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
public ViewPagerAdapter(List<View> lViews){
this.lViews=lViews;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
}
4.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
listViews=new ArrayList<View>();
/**
* 為Adapter創(chuàng)建數(shù)據(jù)源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews) ;
viewPager.setAdapter(pagerAdapter);
}
}
5.運(yùn)行實(shí)例：
可以實(shí)現(xiàn)翻頁效果。
二 添加標(biāo)題
1.我們需要更改main.xml文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTabStrip
android:id="@+id/strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" >
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>
2.需要更改適配器文件：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> lViews=new ArrayList<View>();
private List<String> titleList=new ArrayList<String>();
public ViewPagerAdapter(List<View> lViews,List<String> titleList){
this.lViews=lViews;
this.titleList=titleList;
}
@Override
public int getCount() {
return lViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0==arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(lViews.get(position));
return lViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(lViews.get(position));
}
/**
* 標(biāo)題
*/
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.需要更改MainActivity.java文件：
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.os.Build;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
titleList.add("第一頁");
titleList.add("第二頁");
titleList.add("第三頁");
/**
* 為Adapter創(chuàng)建數(shù)據(jù)源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
viewPager.setAdapter(pagerAdapter);
}
}
4.運(yùn)行實(shí)例如下：
三 實(shí)現(xiàn)ViewPager(數(shù)據(jù)源為L(zhǎng)ist<Fragment>)
1.首先我們要?jiǎng)?chuàng)建三個(gè)Fragment:
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view1, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment2 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view2, container, false);
}
}
package com.yayun.viewpagerdemo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.view3, container, false);
}
}
2.設(shè)置Adapter:
package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加標(biāo)題
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
}
3.MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
public class MainActivity extends ActionBarActivity {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 設(shè)置PagerTabStrip屬性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一頁");
titleList.add("第二頁");
titleList.add("第三頁");
/**
* 為Adapter創(chuàng)建數(shù)據(jù)源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
}
}
4.運(yùn)行實(shí)例：
這種方法不會(huì)銷毀不在當(dāng)前頁面的頁面，不能實(shí)現(xiàn)頁卡的創(chuàng)建和銷毀。
四 實(shí)現(xiàn)ViewPager(數(shù)據(jù)源為L(zhǎng)ist<Fragment>實(shí)現(xiàn)FargmentStatePagerAdapter)常用
改變Adapter:
package com.yayun.viewpagerdemo;
import java.util.List;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.View;
public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {
List<Fragment> fragmentsList;
List<String> titleList;
public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {
super(fm);
this.fragmentsList=fragmentsList;
this.titleList=titleList;
}
@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragmentsList.get(arg0);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return fragmentsList.size();
}
@Override
/**
* 添加標(biāo)題
*/
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titleList.get(position);
}
@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
return super.instantiateItem(container, position);
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
}
將MainActivity.java中的Adapter換一下即可，它可以實(shí)現(xiàn)頁卡的創(chuàng)建和銷毀。
五 onPagerChangeListener 監(jiān)聽使用
只需要修改MainActivity.java:
package com.yayun.viewpagerdemo;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.view.ViewPager.PageTransformer;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.Window;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity implements OnPageChangeListener {
private ViewPager viewPager;
private List<View> listViews=null;
ViewPagerAdapter pagerAdapter;
PagerTabStrip pagerTabStrip;
private List<String> titleList;
private List<Fragment> fragmentsList;
MyFragmentPagerAdapter myFragmentPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewPager=(ViewPager) findViewById(R.id.pager);
pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);
/**
* 設(shè)置PagerTabStrip屬性
*/
pagerTabStrip.setBackgroundColor(Color.GREEN);
pagerTabStrip.setDrawFullUnderline(false);
pagerTabStrip.setTextColor(Color.WHITE);
listViews=new ArrayList<View>();
titleList=new ArrayList<String>();
fragmentsList=new ArrayList<Fragment>();
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
titleList.add("第一頁");
titleList.add("第二頁");
titleList.add("第三頁");
/**
* 為Adapter創(chuàng)建數(shù)據(jù)源
*/
View view1=View.inflate(this, R.layout.view1, null);
View view2=View.inflate(this, R.layout.view2, null);
View view3=View.inflate(this, R.layout.view3, null);
listViews.add(view1);
listViews.add(view2);
listViews.add(view3);
pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;
myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);
//viewPager.setAdapter(pagerAdapter);
viewPager.setAdapter(myFragmentPagerAdapter);
viewPager.setOnPageChangeListener(this);//加載監(jiān)聽器
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int arg0) {
Toast.makeText(this, "當(dāng)前頁面為"+(arg0+1), Toast.LENGTH_SHORT).show();
}
}
運(yùn)行實(shí)例即可以顯示當(dāng)前頁面標(biāo)簽。
您可能感興趣的文章:
- Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實(shí)例
- Android中的ViewPager視圖滑動(dòng)切換類的入門實(shí)例教程
- Android實(shí)現(xiàn)千變?nèi)f化的ViewPager切換動(dòng)畫
- Android自定義ViewPager實(shí)現(xiàn)個(gè)性化的圖片切換效果
- Android利用HorizontalScrollView仿ViewPager設(shè)計(jì)簡(jiǎn)單相冊(cè)
- Android ViewPager制作新手導(dǎo)航頁(動(dòng)態(tài)加載)
- Android App中用Handler實(shí)現(xiàn)ViewPager頁面的自動(dòng)切換
- 舉例講解Android中ViewPager中的PagerTitleStrip子控件
- Android App開發(fā)中ViewPager組件的入門使用教程
- Android應(yīng)用中利用ViewPager實(shí)現(xiàn)多頁面滑動(dòng)切換效果示例
- 詳解Android App中創(chuàng)建ViewPager組件的方法
- Android中viewPager使用指南
- Android中ViewPager實(shí)現(xiàn)滑動(dòng)條及與Fragment結(jié)合的實(shí)例教程
相關(guān)文章
這篇文章主要介紹了Android context源碼詳解及深入分析的相關(guān)資料,這里對(duì)Android Context 如何使用進(jìn)行了詳細(xì)介紹，需要的朋友可以參考下2017-01-01
Android解析json數(shù)組對(duì)象的方法及Apply和數(shù)組的三個(gè)技巧
這篇文章主要介紹了Android解析json數(shù)組對(duì)象的方法及Apply和數(shù)組的三個(gè)技巧的相關(guān)資料,需要的朋友可以參考下2015-12-12
Android編程實(shí)現(xiàn)簡(jiǎn)單文件瀏覽器功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)簡(jiǎn)單文件瀏覽器功能,結(jié)合實(shí)例形式分析了Android文件管理器的布局、文件與目錄的遍歷、權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
android studio git 刪除已在遠(yuǎn)程倉(cāng)庫(kù)的文件或文件夾方式
這篇文章主要介紹了android studio git 刪除已在遠(yuǎn)程倉(cāng)庫(kù)的文件或文件夾方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Kotlin作用域函數(shù)之間的區(qū)別和使用場(chǎng)景詳解
這篇文章主要給大家介紹了關(guān)于Kotlin作用域函數(shù)之間的區(qū)別和使用場(chǎng)景的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Android自定義動(dòng)畫根據(jù)控件Y軸旋轉(zhuǎn)動(dòng)畫(仿紅包)
這篇文章主要介紹了Android自定義動(dòng)畫根據(jù)控件Y軸旋轉(zhuǎn)動(dòng)畫(仿紅包)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)地圖軌跡的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
Android中WebView加載網(wǎng)頁設(shè)置進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android中WebView加載網(wǎng)頁設(shè)置進(jìn)度條的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
本篇文章通過實(shí)例給大家講解了Android自定義控件的使用技巧和需要注意的地方，跟著學(xué)習(xí)參考下吧。2017-12-12
Android仿微信右上角點(diǎn)擊加號(hào)彈出PopupWindow
這篇文章主要為大家詳細(xì)介紹了Android仿微信右上角點(diǎn)擊加號(hào)彈出PopupWindow，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04