android学习日记(五):ViewPager详解上

一.ViewPager详解：

      viewPager就是一个页面切换的组件,我们可以往里面添加很多个view,然后左右滑动切换不同的view,跟Listview一样,我们使用viewPager也需要相应的adapter,viewPager有特点的adapter--PagerAdapter,当然也提供了两个不同的aadapter,分别是FragmentPagerAdapter和FragmentStatePagerAdapter,对于页面较少的ViewPager一般用前者,页面较多的viewPager一般较多用后者

    

    PagerAdapter详解:

    当我们使用ViewPager时, 我们必须要实现四个方法,分别是：

    1.getCount():返回有多少个view

    2.isViewFromObject(View,Object)：判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是

代表的同一个视图，通常我们return view==object;就可以了

    3.destroyItem(ViewGroup container,int position,Object object):从ViewGroup容器中删除指定位置position的页面,我们可以这样写：container.removeView(list.get(position));

    

    4.instantiateItem(ViewGroup,int):这个方法用来实例化页面,把指定position位置的页面添加到容器

     container.addView(list.get(position),0);

     return list.get(position);

    

     当然如果想要功能更加健壮和强壮,我们可以实现其他方法。我们可以写一个工具类,代码如下:

      

private class MyAdapter extends PagerAdapter{        private List<View> viewList;        private List<String> titleList;//显示标题的集合public MyAdapter(List<View> viewList){   this.viewList=viewList;}/** * 两个参数的构造方法,传入页面集合和标题集合 */public MyAdapter(List<View> viewList,List<String> titleList){ this.viewList=viewList; this.titleList=titleList;}        public int getCount() {return viewList.size();//返回页面的个数}public boolean isViewFromObject(View view, Object object) {return view==object;//官方提示这样写}public void destroyItem(ViewGroup container, int position, Object object) {container.removeView(viewList.get(position));//容器中删除view}        //实例化界面public Object instantiateItem(ViewGroup container, int position) {container.addView(viewList.get(position),0);//我们在这里可以实例化组件//Button button=findViewById(R.id.buutton);//这里要注意两点,第一点是直接this.findViewById()而不是view.findViewById();//第二点不能在onCreate方法里直接通过findViewById()实例化滑动页面上面的控件,会报错return viewList.get(position);}public int getItemPosition(Object object) {return super.getItemPosition(object);}/* * 我们可以在适配器里面设置标题 */public CharSequence getPageTitle(int position) {if(titleList!=null){return titleList.get(position);}else{return null;}}    }

   viewPager的常见方法：

    setCurrentItem(int);设置当前显示的界面为第几个view;

    

   

 二.代码实战   

 接下来来写几个demo

 1.ViewPager的简单用法:添加三个view到pager:

 效果图如下:

 

 代码实现:

 step1:新建页面布局v1:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FF6666"    android:gravity="center"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="第一个Page" >    </TextView>  </LinearLayout>

 view2,view3直接复制张贴修改颜色就好

step2:PagerAdapter,直接使用上面写的工具类MyAdapter

step3:MainActvity的代码:

public class MainActivity extends Activity {private ViewPager viewpager;private View v1,v2,v3;private List<View> list;private MyAdapter adapter;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewpager=(ViewPager) findViewById(R.id.viewPager);        LayoutInflater inflater=getLayoutInflater();        v1=inflater.inflate(R.layout.view1, null);    v2=inflater.inflate(R.layout.view2, null);    v3=inflater.inflate(R.layout.view3, null);    list=new ArrayList<View>();    list.add(v1);    list.add(v2);    list.add(v3);        adapter=new MyAdapter(list);    viewpager.setAdapter(adapter);}<span style="font-family:Comic Sans MS;">}</span>

2.ViewPager标题栏--PagerTitleStrip和PagerTabStrip

   就是跟随着ViewPager滑动而滑动的标题咯,这两个是官方提供的,PagerTitleStrip是普通文字标题,PagerTabStrip是带有下划线的标题

点击标题可切换界面(个人感觉这个很呆板)

   基本上不会用到,就不多介绍，下面介绍用的较多的一种方式,用viewPager来实现TabHost效果

3.ViewPager实现TabHost效果

 先来看下效果图:

接下来张贴代码:

篇幅问题,布局就不写了,有兴趣可以在下面下载源码,无非就是上面一个标签式布局加下面一个ViewPager

MainActivity的代码:

 

package com.example.viewpagerdemo01;import java.util.ArrayList;import java.util.Arrays;import java.util.List;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.provider.ContactsContract.CommonDataKinds.Relation;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.Button;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends Activity  {private ViewPager viewpager;private RelativeLayout rl_message;private RelativeLayout rl_contacts;private RelativeLayout rl_news;private RelativeLayout rl_setting;private ImageView iv_message,iv_contacts,iv_news,iv_setting;private TextView tv_message,tv_contacts,tv_news,tv_setting;private List<View> list;private MyAdapter adapter;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewpager=(ViewPager) findViewById(R.id.viewPager);//初始化控件initView();        LayoutInflater inflater=getLayoutInflater();    list=new ArrayList<View>();    list.add(inflater.inflate(R.layout.view1, null));    list.add(inflater.inflate(R.layout.view2, null));    list.add(inflater.inflate(R.layout.view3, null));     list.add(inflater.inflate(R.layout.view4, null));    //注意顺序    //1.把通过LayoutInflater找到view,把view添加到List集合    //2.viewpager.setAdapter把view和PagerAdapter绑定    //3.viewpager.setCurrentItem(0)然后指向第一个界面    //4.最后设置标题点击事件和页面切换事件    adapter=new MyAdapter(list);    viewpager.setAdapter(adapter);    viewpager.setCurrentItem(0);//设置当前的页面为第一个view    iv_message.setImageResource(R.drawable.contacts_selected);    tv_message.setTextColor(Color.parseColor("#82858b"));        rl_message.setOnClickListener(new MyListener(0));        rl_contacts.setOnClickListener(new MyListener(1));        rl_news.setOnClickListener(new MyListener(2));        rl_setting.setOnClickListener(new MyListener(3));    //设置页面切换事件,当跳转到某个页面时,上面对于的标题的字体颜色和背景图片发生变化        viewpager.setOnPageChangeListener(new MyOnPageChangeListener());}private void initView() {rl_message=(RelativeLayout) findViewById(R.id.rl_message);rl_contacts=(RelativeLayout) findViewById(R.id.rl_contacts);rl_news=(RelativeLayout) findViewById(R.id.rl_news);rl_setting=(RelativeLayout) findViewById(R.id.rl_setting);iv_message=(ImageView) findViewById(R.id.iv_message);iv_contacts=(ImageView) findViewById(R.id.iv_contacts);iv_news=(ImageView) findViewById(R.id.iv_news);iv_setting=(ImageView) findViewById(R.id.iv_setting);        tv_message=(TextView) findViewById(R.id.tv_message);        tv_contacts=(TextView) findViewById(R.id.tv_contacts);        tv_news=(TextView) findViewById(R.id.tv_news);        tv_setting=(TextView) findViewById(R.id.tv_setting);}private class MyAdapter extends PagerAdapter{        private List<View> viewList;        private List<String> titleList;public MyAdapter(List<View> viewList){   this.viewList=viewList;}public MyAdapter(List<View> viewList,List<String> titleList){ this.viewList=viewList; this.titleList=titleList;}        public int getCount() {return viewList.size();//返回页面的个数}public boolean isViewFromObject(View view, Object object) {return view==object;//官方提示这样写}public void destroyItem(ViewGroup container, int position, Object object) {container.removeView(viewList.get(position));//容器中删除view}        //实例化界面public Object instantiateItem(ViewGroup container, int position) {container.addView(viewList.get(position),0);//我们在这里可以实例化组件,例如//Button button=findViewById(R.id.buutton);//这里要注意两点,第一点是直接this.findViewById()而不是view.findViewById();//第二点不能在onCreate方法里直接通过findViewById()实例化滑动页面上面的控件,会报错//还有一种方式就是直接在Button控件里设置onclickreturn viewList.get(position);}public int getItemPosition(Object object) {return super.getItemPosition(object);}        public CharSequence getPageTitle(int position) {    // TODO Auto-generated method stub    if(titleList!=null){    return titleList.get(position);    }else{    return null;    }    }    }/** * 四个标题的点击事件 */private class MyListener implements OnClickListener{        private int i;        public MyListener(int i){        this.i=i;        }        //当点击不同的标题时  显示对于的界面  并且修改背景图片和字体颜色public void onClick(View v) {//清楚所有的选中状态clearSelection();switch(i){case 0:viewpager.setCurrentItem(0);iv_message.setImageResource(R.drawable.message_selected);tv_message.setTextColor(Color.WHITE);break;case 1:viewpager.setCurrentItem(1);iv_contacts.setImageResource(R.drawable.contacts_selected);tv_contacts.setTextColor(Color.WHITE);break;case 2:viewpager.setCurrentItem(2);iv_news.setImageResource(R.drawable.news_selected);tv_news.setTextColor(Color.WHITE);break;case 3:viewpager.setCurrentItem(3);iv_setting.setImageResource(R.drawable.setting_selected);tv_setting.setTextColor(Color.WHITE);break;}}}/** *页面切换事件 ,当切换界面时,标题的背景图片和字体颜色全部发生变化 */private class MyOnPageChangeListener implements OnPageChangeListener{public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}        //页面切换时调用的方法public void onPageSelected(int index) {//index表示选择的页面switch(index){case 0://先清除之前所有的选中状态clearSelection();iv_message.setImageResource(R.drawable.message_selected);tv_message.setTextColor(Color.WHITE);break;case 1:clearSelection();iv_contacts.setImageResource(R.drawable.contacts_selected);tv_contacts.setTextColor(Color.WHITE);break;case 2:clearSelection();iv_news.setImageResource(R.drawable.news_selected);tv_news.setTextColor(Color.WHITE);break;case 3:clearSelection();iv_setting.setImageResource(R.drawable.setting_selected);tv_setting.setTextColor(Color.WHITE);break;}} }    /**     * 清楚所有的选中状态     */public void clearSelection() {iv_message.setImageResource(R.drawable.message_unselected);iv_contacts.setImageResource(R.drawable.contacts_unselected);iv_news.setImageResource(R.drawable.news_unselected);iv_setting.setImageResource(R.drawable.setting_unselected);tv_message.setTextColor(Color.parseColor("#82858b"));tv_contacts.setTextColor(Color.parseColor("#82858b"));tv_news.setTextColor(Color.parseColor("#82858b"));tv_setting.setTextColor(Color.parseColor("#82858b"));}}

点我下载源代码