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) {
            }
        });
    }