这篇文章主要介绍了 Android ViewPager 的相关资料,并附实例代码,, 需要的朋友可以参考下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
在一个窗口里面添加 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
来源: http://www.phperz.com/article/17/0316/295667.html