ViewPager小结

ViewPager(Android3.0以后发布)
1、这个控件支持页面的左右滑动。
2、ViewPager是V4包的，在使用的时候需要导入V4包。
3、Viewpager不是一个单一的控件，而是一个容器。不可以直接添加View，需要使用适配器来完成相应的操作。常用的适配器有PageAdapter，FragmentPageAdapter。
4、ViewPager的应用：
1>:写布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    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.support.v4.view.ViewPager        android:id="@+id/mViewPager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></RelativeLayout>

    2>:找到控件

mViewPager= (ViewPager) findViewById(R.id.mViewPager);

    3>:获取数存放到List集合中

        img_01 = (ImageView) findViewById(R.id.img_01);        img_02 = (ImageView) findViewById(R.id.img_02);        img_03 = (ImageView) findViewById(R.id.img_03);        img_04 = (ImageView) findViewById(R.id.img_04);        lists.add(img_01);        lists.add(img_02);        lists.add(img_03);        lists.add(img_04);

    4>:自定义适配器，实现PagerAdapter

    /**     * PagerAdapter适配器     */    public class MyAdapter extends PagerAdapter{        @Override        public int getCount() {//返回的是内容的条目            return lists.size();        }        @Override        public boolean isViewFromObject(View view, Object object) {//view的来源是否是object            return view==object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = lists.get(position);            if (view.getParent()!=null){                ViewGroup vg = (ViewGroup) view.getParent();                vg.removeView(view);            }            container.removeView(view);            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(lists.get(position));        }    }

    5>:给ViewPager对象绑定适配器

       mViewPager.setAdapter(mMyAdapter);

    6>:实现ViewPager自动播放

        new Thread(new Runnable() {            @Override            public void run() {                try {                    while (true){                        Thread.sleep(3000);                        if(++positionIndex>3){                            positionIndex=0;                        }                        Handler.sendEmptyMessage(100);                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }).start();    Handler Handler=new Handler(){        @Override        public void handleMessage(Message msg) {            switch (msg.what){                case 100:                    mViewPager.setCurrentItem(positionIndex);                    break;            }        }    };

5、ViewPager的应用二（实现上述应用的无限循环滑动，主要的区别在于自定义适配器）    1>:写布局文件    2>:找到控件    3>:获取数存放到List集合中     4>:自定义适配器，实现PagerAdapter    5>:给ViewPager对象绑定适配器

    /**     * PagerAdapter适配器     */    public class MyAdapter extends PagerAdapter{        //将容器设置为最大值（理论上是可以滑动完成的）        @Override        public int getCount() {//返回的是内容的条目            return Integer.MAX_VALUE;        }        @Override        public boolean isViewFromObject(View view, Object object) {//view的来源是否是object            return view==object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = lists.get(position % lists.size());            if (view.getParent()!=null){                ViewGroup vg = (ViewGroup) view.getParent();                vg.removeView(view);            }            container.removeView(view);            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(lists.get(position % lists.size()));        }    }

    6>:实现ViewPager自动播放

    Handler mHandler=new Handler(){        @Override        public void handleMessage(Message msg) {            switch (msg.what){                case 100:                    mViewPager.setCurrentItem(mIndex++);                    break;            }        }    };        new Thread(new Runnable() {            @Override            public void run() {                try {                    while (true){                        Thread.sleep(3000);                        Message msg=new Message();                        msg.what=100;                        mHandler.sendMessage(msg);                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }).start();

6、广告条制作    1>:写布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"    tools:context="com.example.tingxiangxi.viewpagerapplication.Main3Activity">    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="300dp">        <android.support.v4.view.ViewPager            android:id="@+id/mViewpager"            android:layout_width="match_parent"            android:layout_height="260dp">        </android.support.v4.view.ViewPager>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="40dp"            android:layout_below="@+id/mViewpager"            android:layout_alignParentBottom="true"            android:background="#ccc"            android:gravity="center"            android:orientation="vertical">            <TextView                android:id="@+id/tv_title"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="标题"                android:textSize="16sp" />            <LinearLayout                android:id="@+id/selectedContainer"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:orientation="horizontal">            </LinearLayout>        </LinearLayout>    </LinearLayout>    <!--下面还可能有内容--></RelativeLayout>

    2>:查找控件

   /**     * 查找控件     */    private void findView(){        mViewPager = (ViewPager) findViewById(R.id.mViewpager);        title=(TextView) findViewById(R.id.tv_title);        selectedContainer=(LinearLayout) findViewById(R.id.selectedContainer);    }

    3>:初始化数据

    /**     * 初始化数据     */    private void initData(){        for (int i = 0; i <titles.length; i++) {            ImageView img=new ImageView(Main3Activity.this);            img.setBackgroundResource(immgs[i]);            img.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));            //将要显示的View装到容器中            lists.add(img);            //初始化“点”的view            View view=new View(Main3Activity.this);            //给“点”设置背景            view.setBackgroundResource(R.drawable.dot_normal);            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(25,25);            //给“点”设置左右上下的外边距            params.setMargins(20,5,0,0);            view.setLayoutParams(params);            //将“点”添加到容器中去            selectedContainer.addView(view);            //把动态生成的点保存到集合中            points.add(view);        }        //设置默认标题        title.setText(titles[0]);        //将“点”变成红色        points.get(0).setBackgroundResource(R.drawable.dot_enable);    }

    4>:自定义适配器

  /**     * 自定义适配器     */    private class MyAdapter extends PagerAdapter{        //给容器设置最大值        @Override        public int getCount() {            return Integer.MAX_VALUE;        }        @Override        public boolean isViewFromObject(View view, Object object) {            return view==object;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            View view = lists.get(position % lists.size());            if (view.getParent()!=null){                ViewGroup vg = (ViewGroup) view.getParent();                vg.removeView(view);            }            container.removeView(view);            container.addView(view);            return view;        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView(lists.get(position % lists.size()));        }    }

    5>:给ViewPager对象绑定适配器

  /**     * 创建方法来添加适配器     */    private void setAdapter() {        MyAdapter mMyAdapter =new MyAdapter();        mViewPager.setAdapter(mMyAdapter);    }

    6>:设置页面改变的监听事件

  /**     * 设置页面改变的监听     */    private void setOnPagerListener() {        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            /**             * 某一个页面被选中             * @param position             */            @Override            public void onPageSelected(int position) {                //改变标题                title.setText(titles[position % titles.length]);                points.get(prePosittion).setBackgroundResource(R.drawable.dot_normal);                points.get(position%titles.length).setBackgroundResource(R.drawable.dot_enable);                //记录改变之前的位置                prePosittion=position%titles.length;            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }

    7、实现广告的自动循环

   /**     * 自动滑动     */    private void autoFling() {        new Thread(new Runnable() {            @Override            public void run() {                while (isLooping){                    try {                        Thread.sleep(3000);                        mHandler.sendEmptyMessage(100);                    } catch (InterruptedException e) {                        e.printStackTrace();                    }                }            }        }).start();    }    Handler mHandler=new Handler(){        @Override        public void handleMessage(Message msg) {            switch (msg.what){                case 100:                    //获取当前位置                    int position = mViewPager.getCurrentItem();                    //向下一个页面进行滑动                    mViewPager.setCurrentItem(position+1);                    break;            }        }    };

7、Fragment与ViewPager的混合使用    1>:写布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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"    tools:context="com.example.tingxiangxi.viewpagerapplication.Main4Activity">    <android.support.v4.view.ViewPager        android:id="@+id/mViewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></RelativeLayout>

    2>:查找控件

mViewPager = (ViewPager) findViewById(R.id.mViewpager);

    3>:初始化数据

    /**     * 初始化数据     */    private void initData() {        for (int i = 0; i < 4; i++) {            ContentFragment contentFragment=new ContentFragment();            Bundle bundle = new Bundle();            bundle.putString("content","页面"+i);            contentFragment.setArguments(bundle);            lists.add(contentFragment);        }    }

    4>:自定义适配器

   /**     * 自定义适配器     * 这个适配器是Viewpager专门设置给Fragment的     */    private class MyAdapter extends FragmentPagerAdapter{        public MyAdapter(FragmentManager fm) {            super(fm);        }        @Override        public android.support.v4.app.Fragment getItem(int position) {            return lists.get(position);        }        @Override        public int getCount() {            return lists.size();        }    }}

    5>:将ViewPager对象绑定适配器

    /**     * 设置适配器     */    private void setAdapter() {        MyAdapter myAdapter=new MyAdapter(getSupportFragmentManager());        mViewPager.setAdapter(myAdapter);    }

    6>:Fragment中的代码如下

import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class ContentFragment extends Fragment {    private TextView tv_01;    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.activity_content_fragment,null,false);        findView(view);        return view;    }    private void findView(View view) {        tv_01 = (TextView) view.findViewById(R.id.tv_01);    }    @Override    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);        String result = getArguments().getString("content");        tv_01.setText(result);    }}

8、综合案例    1>:写布局文件

<?xml version="1.0" encoding="utf-8"?><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"    tools:context="com.example.tingxiangxi.viewpagerapplication.Main5Activity">    <HorizontalScrollView        android:id="@+id/hsv"        android:layout_width="match_parent"        android:layout_height="50dp"        android:fillViewport="false"        android:scrollbars="none"        >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="50dp"            android:orientation="vertical">            <LinearLayout                android:id="@+id/titleContainer"                android:layout_width="wrap_content"                android:layout_height="45dp"                android:gravity="center"                android:orientation="horizontal">            </LinearLayout>                <TextView                    android:id="@+id/fling"                    android:layout_width="0dp"                    android:layout_height="2dp"                    android:background="#3A94FF"></TextView>                <TextView                    android:layout_width="match_parent"                    android:layout_height="1dp"                    android:background="#3A94FF"></TextView>        </LinearLayout>    </HorizontalScrollView>    <android.support.v4.view.ViewPager        android:id="@+id/mViewpager"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>

    2>:查找控件

   /**     * 查找控件     */    private void findView() {        mHorizontalScrollView = (HorizontalScrollView) findViewById(R.id.hsv);        mViewPager=(ViewPager) findViewById(R.id.mViewpager);        titleContainer=(LinearLayout) findViewById(R.id.titleContainer);        fling=findViewById(R.id.fling);    }

    3>:初始化数据

   /**     * 初始化数据     */    private void initData() {        initScreenWidth();        for (int i = 0; i < titles.length; i++) {            TextView mTextView=new TextView(Main5Activity.this);            mTextView.setTextSize(20);            mTextView.setGravity(Gravity.CENTER);            mTextView.setText(titles[i]);            mTextView.setLayoutParams(new LinearLayout.LayoutParams(mScreenWidth/3,LinearLayout.LayoutParams.WRAP_CONTENT));            titleContainer.addView(mTextView);            textViews.add(mTextView);            //初始化Fragment            ContentFragment contentFragment=new ContentFragment();            Bundle bundle = new Bundle();            bundle.putString("content",titles[1]);            contentFragment.setArguments(bundle);            fragments.add(contentFragment);        }        setViewFlingWidth();        setAdapter();        setTitleTabListener();        setPagerListener();    }

    4>:自定义适配器

   /**     * 自定义适配器     */    private class MyAdapter extends FragmentPagerAdapter{        public MyAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int position) {            return fragments.get(position);        }        @Override        public int getCount() {            return titles.length;        }    }

    5>:将ViewPager对象绑定适配器

    /**     * 设置适配器     */    private void setAdapter() {        MyAdapter mMyAdapter=new MyAdapter(getSupportFragmentManager());        mViewPager.setAdapter(mMyAdapter);    }

    6>:设置切换卡的TextView的监听

   /**     * 设置切换卡的监听事件     */    private void setTitleTabListener() {        int childCount = titleContainer.getChildCount();        for (int i = 0; i < childCount; i++) {            titleContainer.getChildAt(i).setTag(i);            titleContainer.getChildAt(i).setOnClickListener(new Listener());        }    }    /**     * titleTextView的监听事件     */    private class Listener implements View.OnClickListener{        @Override        public void onClick(View v) {            mViewPager.setCurrentItem((int)v.getTag());        }    }

    7>:设置滑块的宽度

    /**     * 获取屏幕宽度     */    private void initScreenWidth() {        DisplayMetrics mDisplayMetrics=new DisplayMetrics();        getWindowManager().getDefaultDisplay().getMetrics(mDisplayMetrics);        mScreenWidth=mDisplayMetrics.widthPixels;    }    /**     * 设置滑动块的宽度     */    private void setViewFlingWidth() {        params=new LinearLayout.LayoutParams(mScreenWidth/3,fling.getLayoutParams().height);        fling.setLayoutParams(params);    }

    8>:设置页面滚动的监听事件

    /**     * 滑动的时候mHorizontalScrollView跟着滑动     * @param position     */    private void setSooth(int position) {        int offset=titleContainer.getChildAt(position).getLeft()-mScreenWidth/2+titleContainer.getChildAt(position).getWidth()/2;        mHorizontalScrollView.smoothScrollTo(offset,0);    }   /**     * 设置页面滚动的监听事件     */    private void setPagerListener() {        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            /**             *             * @param position  滚动的位置             * @param positionOffset    偏移量             * @param positionOffsetPixels  偏移的像素             */            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                params.leftMargin= (int) ((position+positionOffset)*params.width);                fling.setLayoutParams(params);            }            @Override            public void onPageSelected(int position) {                textViews.get(prePosition).setTextColor(Color.BLACK);                textViews.get(position).setTextColor(Color.RED);                prePosition=position;                setSooth(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }