Android ViewPager 的使用总结
- 作者: 周沫cc
- 来源: 51数据库
- 2020-08-20
在一个窗口里面添加tab便签，完成便签切换来实现页面的切换，这样的好处是可以在同一个窗口里面有多个页面，这些页面共享同一个窗口的资源，同使用多个窗口来实现这个功能来得更加流畅！！
主要产生的类文件有activity，n个view，adapter，自定义的ViewPager，n+1个布局文件
demo所用到文件
步骤：
创建activity
package?com.example.myviewpager;
import?java.util.ArrayList;
import?java.util.List;
import?android.app.Activity;
import?android.content.Context;
import?android.graphics.Color;
import?android.os.Bundle;
import?android.support.v4.view.ViewPager;
import?android.view.View;
import?android.view.View.OnClickListener;
import?android.widget.TextView;
/**
?*?主窗口
?*?@author?cgx
?*
?*/
public?class?MainActivity?extends?Activity?implements?OnClickListener?{
private?Context?mContext;
private?MyViewPager?mPager;//?页面内容
private?MyViewPagerAdapter?pagerAdapter?=?null;
private?TextView?t1,?t2,?t3;//?页卡头标
private?List<View>?pageList?=?new?ArrayList<View>();
private?View1?mView1;
private?View2?mView2;
private?View3?mView3;
@Override
protected?void?onCreate(Bundle?savedInstanceState)?{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext?=?this;
initViews();
initEvents();
initViewPager();
}
private?void?initViews()?{
//?TODO?Auto-generated?method?stub
t1?=?(TextView)?findViewById(R.id.text1);
t2?=?(TextView)?findViewById(R.id.text2);
t3?=?(TextView)?findViewById(R.id.text3);
mPager?=?(MyViewPager)?findViewById(R.id.vPager);
//?设置ViewPager不允许滑动
//mPager.setCanScroll(false);
//一开始进入窗口的时候，默认第一个便签被选中
t1.setBackgroundColor(Color.parseColor("#FFFF00"));
t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
}
private?void?initEvents()?{
//?TODO?Auto-generated?method?stub
t1.setOnClickListener(this);
t2.setOnClickListener(this);
t3.setOnClickListener(this);
}
private?void?initViewPager()?{
//?TODO?Auto-generated?method?stub
pageList.clear();
if?(mView1?==?null)?{
mView1?=?new?View1(mContext);
}
if?(mView2?==?null)?{
mView2?=?new?View2(mContext);
}
if?(mView3?==?null)?{
mView3?=?new?View3(mContext);
}
pageList.add(mView1.getView());
pageList.add(mView2.getView());
pageList.add(mView3.getView());
pagerAdapter?=?new?MyViewPagerAdapter(pageList);
//?缓存页面，如果想全部都缓存的话，参数等于页卡数减一,系统默认参数为1，保存两个
mPager.setOffscreenPageLimit(2);
mPager.setAdapter(pagerAdapter);
//?设置Page改变监听器
mPager.setOnPageChangeListener(onPageChangeListener);
}
/**
?*?SimpleOnPageChangeListener.该监听是当我们的viewpager页面切换的时候会触发?在里面我们会去改变?tab的聚焦情况
?*?。?因为实现上viewpager与actionbar是独立的，需要我们手动同步?。
?*/
ViewPager.SimpleOnPageChangeListener?onPageChangeListener?=?new?ViewPager.SimpleOnPageChangeListener()?{
@Override
public?void?onPageSelected(int?position)?{
/**
?*?setSelectedNavigationItem?方法用于设置ActionBar的聚焦tab?.
?*?在接下来我们判断了SLidingMenu的手势力模式，?如果ViewPager已经滑到了最左边，则我们把手势设置成全屏的，
?*?这样更往左滑动的时候，就会打开Menu?.
?*/
initTab(position);
}
//?初始化便签颜色
private?void?initTab(int?position)?{
//?TODO?Auto-generated?method?stub
if?(position?==?0)?{
t1.setBackgroundColor(Color.parseColor("#FFFF00"));
t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
}?else?if?(position?==?1)?{
t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
t2.setBackgroundColor(Color.parseColor("#FFFF00"));
t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
}?else?{
t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
t3.setBackgroundColor(Color.parseColor("#FFFF00"));
}
}
};
@Override
public?void?onClick(View?v)?{
//?TODO?Auto-generated?method?stub
switch?(v.getId())?{
case?R.id.text1://?点击第一个便签
mPager.setCurrentItem(0,?false);
break;
case?R.id.text2://?点击第二个便签
mPager.setCurrentItem(1,?false);
break;
case?R.id.text3://?点击第三个便签
mPager.setCurrentItem(2,?false);
break;
default:
break;
}
}
}
自定义MyViewPager
package?com.example.myviewpager;
import?android.content.Context;
import?android.support.v4.view.ViewPager;
import?android.util.AttributeSet;
import?android.view.MotionEvent;
/**
?*?自定义滑动翻页可控，可通过设置isCanScroll参数来控制是否允许滑动切换页面
?*/
public?class?MyViewPager?extends?ViewPager?{
/**?是否允许滑动翻页?,默认可滑动*/
private?boolean?isCanScroll?=?true;
public?MyViewPager(Context?context,?AttributeSet?attrs)?{
super(context,?attrs);
}
public?MyViewPager(Context?context)?{
super(context);
}
public?boolean?isCanScroll()?{
return?isCanScroll;
}
/**?设置是否可以滑动翻页?*/
public?void?setCanScroll(boolean?isCanScroll)?{
this.isCanScroll?=?isCanScroll;
}
@Override
public?void?scrollTo(int?x,?int?y)?{
super.scrollTo(x,?y);
}
//?设置禁止滑动的关键
@Override
public?boolean?onTouchEvent(MotionEvent?arg0)?{
if?(!isCanScroll)
return?true;
return?super.onTouchEvent(arg0);
}
@Override
public?boolean?onInterceptTouchEvent(MotionEvent?arg0)?{
return?super.onInterceptTouchEvent(arg0);
}
@Override
public?void?setCurrentItem(int?item,?boolean?smoothScroll)?{
super.setCurrentItem(item,?smoothScroll);
}
@Override
public?void?setCurrentItem(int?item)?{
super.setCurrentItem(item);
}
}
适配器：
package?com.example.myviewpager;
import?java.util.List;
import?android.support.v4.view.PagerAdapter;
import?android.view.View;
import?android.view.ViewGroup;
/**
?*?viewpager适配器
?*?*/
public?class?MyViewPagerAdapter?extends?PagerAdapter{
????private?List<View>?mListViews;??
????public?MyViewPagerAdapter(List<View>?mListViews)?{??
????????this.mListViews?=?mListViews;//构造方法，参数是我们的页卡，这样比较方便?
????}
????@Override??
????public?void?destroyItem(ViewGroup?container,?int?position,?Object?object)???{?????
????????container.removeView(mListViews.get(position));//删除页卡??
????}??
????@Override??
????public?Object?instantiateItem(ViewGroup?container,?int?position)?{??//这个方法用来实例化页卡
????????container.addView(mListViews.get(position),?0);//添加页卡??
????????return?mListViews.get(position);
????}??
????@Override??
????public?int?getCount()?{???????????
????????return??mListViews.size();//返回页卡的数目?
????}??
????@Override??
????public?boolean?isViewFromObject(View?arg0,?Object?arg1)?{?????????????
????????return?arg0==arg1;//官方提示这样写
????}
}
第一个view
package?com.example.myviewpager;
import?android.content.Context;
import?android.view.LayoutInflater;
import?android.view.View;
/**
?*?第一个
?*?@author?cgx
?*
?*/
public?class?View1?{
private?Context?mContext;
private?View?rootView;
public?View1(Context?mContext)?{
//?TODO?Auto-generated?constructor?stub
this.mContext=mContext;
//加载布局
rootView?=?LayoutInflater.from(mContext).inflate(
R.layout.view1_layout,?null);
}
public?View?getView(){
return?rootView;
}
}
activity布局文件
<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android" ????xmlns:tools="http://schemas.android.com/tools" ????android:layout_width="match_parent" ????android:layout_height="match_parent" ????android:orientation="vertical" ???> <LinearLayout ????????android:id="@+id/linearLayout1" ????????android:layout_width="fill_parent" ????????android:layout_height="wrap_content" ????????android:background="#FFFFFF"?> ????????<TextView ????????????android:id="@+id/text1" ????????????android:layout_width="fill_parent" ????????????android:layout_height="fill_parent" ????????????android:layout_weight="1.0" ????????????android:gravity="center" ????????????android:text="页卡1" ????????????android:textColor="#000000" ????????????android:textSize="20sp"?/> ????????<TextView ????????????android:id="@+id/text2" ????????????android:layout_width="fill_parent" ????????????android:layout_height="fill_parent" ????????????android:layout_weight="1.0" ????????????android:gravity="center" ????????????android:text="页卡2" ????????????android:textColor="#000000" ????????????android:textSize="20sp"?/> ????????<TextView ????????????android:id="@+id/text3" ????????????android:layout_width="fill_parent" ????????????android:layout_height="fill_parent" ????????????android:layout_weight="1.0" ????????????android:gravity="center" ????????????android:text="页卡3" ????????????android:textColor="#000000" ????????????android:textSize="20sp"?/> ????</LinearLayout> ?????<com.example.myviewpager.MyViewPager ????????android:id="@+id/vPager" ????????android:layout_width="wrap_content" ????????android:layout_height="wrap_content" ????????android:layout_gravity="center" ????????android:layout_weight="1.0" ????????android:background="#000000" ????????android:flipInterval="30" ?????????/> </LinearLayout>
View1的布局
<?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" ????android:background="#123456"?> </LinearLayout>
由于用于演示，所以view的布局只是用不同的背景色来区分，开发中具体要展示的布局可以直接在view的布局文件里面改。demo中的view都是参考第一个来写的，类似
总结
实际开发中，虽然官方提供了很多api，真正等到要自己用的时候，还是自己在依照习惯再包装一层，成为自己的工具，这样以后就可以直接用了，上面的例子是我在实习期间总结的，鄙陋之处敬请原谅，也欢迎大家指出，一起学习(^_^)
代码链接：http://pan.baidu.com/s/1pJAF6Gz
推荐阅读
热点文章
android中Bitmap用法(显示,保存,缩放,旋转)实例分析
12
android 仿微信聊天气泡效果实现思路
1
Android的尺度，drawable-xxxxxxx
2
Codeforces Round #656 (Div. 3) (C、D题)
1
Android之handler异步消息处理机制解析
6
GridView中图片显示出现上下间距过大，左右图片显示类似瀑布流的问题
0
AsyncTask的简单使用
5
两个简单Fragment之间的通信（三种方式）
18
uboot修改设置boot参数命令
41
android中实现从相册中一次性获取多张图片与拍照，并将选中的图片显示出来
2
