Android 自定义控件----ViewPager

 

1.ViewPager的使用

（1）在布局文件中定义ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.example.guanggaotiao.MainActivity"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="200dp"
  />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:background="#44000000"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="3dp"
            android:text="美国队长"
            android:textColor="#ffffff"
            android:gravity="center_horizontal"/>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/point"
            android:layout_gravity="center_horizontal"
            >

        </LinearLayout>
    </LinearLayout>

</LinearLayout>

（2）在代码中实例化ViewPager

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    private TextView title;
    private LinearLayout point_ll;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        title=(TextView)findViewById(R.id.title);
        point_ll=(LinearLayout)findViewById(R.id.point);

    }

}

（3）准备数据

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    private TextView title;
    private LinearLayout point_ll;
    private ArrayList<ImageView>imageViews;

    //图片
    private final int[] imageIds={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5};
    //标题
    private final String[]imageDescriptions={"aaaaa","bbbbb","ccccc","ddddd","eeeee"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        title=(TextView)findViewById(R.id.title);
        point_ll=(LinearLayout)findViewById(R.id.point);

    }
        imageViews=new ArrayList<>();
        for(int i=0;i<imageIds.length;i++){
            ImageView imageView=new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            imageViews.add(imageView);

        }

}

（4）设置设配器(pagerAdapter) item布局 绑定数据

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    private TextView title;
    private LinearLayout point_ll;
    private ArrayList<ImageView>imageViews;

    //图片
    private final int[] imageIds={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5};
    //标题
    private final String[]imageDescriptions={"aaaaa","bbbbb","ccccc","ddddd","eeeee"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        title=(TextView)findViewById(R.id.title);
        point_ll=(LinearLayout)findViewById(R.id.point);

        imageViews=new ArrayList<>();
        for(int i=0;i<imageIds.length;i++){
            ImageView imageView=new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            imageViews.add(imageView);

        }
        viewpager.setAdapter(new MyPagerAdapter());

    }
   
    class MyPagerAdapter extends PagerAdapter{
        //图片的总数
        @Override
        public int getCount() {
            return imageViews.size();
        }

        /**
         * 比较view和object是否是同一个实例
         * @param view 页面
         * @param object 这个方法instantiateItem返回的结果
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            if (view == object) {
                return true;
            } else {
                return false;
            }
        }

        /**
         *
         * @param container viewpager
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView imageView= imageViews.get(Position);
            container.addView(imageView);//添加到viewpager中
            return imageView;

        }


        /**
         *  释放资源
         * @param container viewpager
         * @param position 要释放的位置
         * @param object 要释放的页面
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //super.destroyItem(container, position, object);
            container.removeView((View) object);

        }
    }

}

2.根据页面改变设置文本

        title.setText(imageDescriptions[0]);
        viewpager.addOnPageChangeListener(new MyOnpageChangeListener());

    class MyOnpageChangeListener implements ViewPager.OnPageChangeListener{

        /**
         *  当页面滚动了的时候回调这个方法
         * @param position 当前页面的位置
         * @param positionOffset 滑动页面的百分比
         * @param positionOffsetPixels 在屏幕上滑动的像数
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        /**
         * 当某个页面被选中了的时候回调
         * @param position 被选中页面的位置
         */
        @Override
        public void onPageSelected(int position) {          
            //设置对应页面的信息
            title.setText(imageDescriptions[Position]);
            

        }

        /**
         * 当页面滚动状态变化的时候回调这个方法
         * 静止 到 滑动
         * 滑动 到 静止
         * 静止 到 拖拽
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {
            

        }
    }

3.添加指示点

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/point_normal"/>
    <item android:state_enabled="true" android:drawable="@drawable/point_press"/>

</selector>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="8dp"
        android:height="8dp"
        />
    <solid android:color="#44000000"/>
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="8dp"
        android:height="8dp"
        />
    <solid android:color="#ff0000"/>
</shape>

            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
            point.setLayoutParams(params);
            if(i==0){
                point.setEnabled(true);//显示红色

            }else {
                point.setEnabled(false);//显示灰色
                params.leftMargin = 8;
            }
            point_ll.addView(point);

        /**
         * 当某个页面被选中了的时候回调
         * @param position 被选中页面的位置
         */
        @Override
        public void onPageSelected(int position) {
            //设置对应页面的信息
            title.setText(imageDescriptions[Position]);
            //把上一个高亮的设置为灰色
            point_ll.getChildAt(prePosition).setEnabled(false);
            //把当前设置为高亮
            point_ll.getChildAt(Position).setEnabled(true);
            prePosition = Position;

        }

4.支持左右无限滑动

        //设置中间的位置
        int item=Integer.MAX_VALUE/2 -Integer.MAX_VALUE/2%imageViews.size();
        viewpager.setCurrentItem(item);

        @Override
        public int getCount() {
            //return imageViews.size();
            return Integer.MAX_VALUE;
        }

5.自动滑动页面

    private Handler handler =new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            int item = viewpager.getCurrentItem()+1;
            viewpager.setCurrentItem(item);

            handler.sendEmptyMessageDelayed(0,4000);
        }
    };

        //发消息
        handler.sendEmptyMessageDelayed(0,4000);

6.当手滑动或手按下的时候停止滑动

            imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN://手指按下
                            Log.w("aaaa","手指按下");
                            handler.removeCallbacksAndMessages(null);
                            break;
                        case  MotionEvent.ACTION_MOVE://手指在控件上移动
                            break;
                        case MotionEvent.ACTION_UP://手指离开
                            Log.w("aaaa","手指离开");
                            handler.removeCallbacksAndMessages(null);
                            handler.sendEmptyMessageDelayed(0,4000);
                            break;
                    }
                    return true;
                }
            });

当拖拽图片到一半的时候还是会每隔四秒钟自动滑动页面。

解决：

//                        case MotionEvent.ACTION_CANCEL://在同时去打开另外的软件的时候触发，因为一离开就不会执行ACTION_UP
//                            Log.w("aaaa","事件取消");
//                            handler.removeCallbacksAndMessages(null);
//                            handler.sendEmptyMessageDelayed(0,4000);
//
//                            break;

但在同时去打开另外的软件的时候触发，因为一离开就不会执行ACTION_UP

改进：

    /**
     * 是否已经滚动
     */
    private boolean isDrahhing =false;

        /**
         * 当页面滚动状态变化的时候回调这个方法
         * 静止 到 滑动
         * 滑动 到 静止
         * 静止 到 拖拽
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {
            if(state == ViewPager.SCROLL_STATE_DRAGGING){//拖拽
                Log.w("aaaa","拖拽");
                isDrahhing = true;
                handler.removeCallbacksAndMessages(null);
            }else if(state == ViewPager.SCROLL_STATE_SETTLING){//滑动
                Log.w("aaaa","滑动");
            }else if(state == ViewPager.SCROLL_STATE_IDLE && isDrahhing){//空闲
                Log.w("aaaa","空闲");
                handler.removeCallbacksAndMessages(null);
                handler.sendEmptyMessageDelayed(0,4000);
            }

        }

当执行完 SCROLL_STATE_DRAGGING 并不会执行 ACTION_UP，所以在SCROLL_STATE_IDLE时发送消息。

7.添加点击事件

instantiateItem（）要返回false。true与点击事件冲突，点击事件不起作用。

            imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (int) v.getTag()%imageViews.size();
                    String text=imageDescriptions[position];
                    Toast.makeText(MainActivity.this,"text"+text,Toast.LENGTH_SHORT).show();
                }
            });

源码:

public class MainActivity extends AppCompatActivity {
    private ViewPager viewpager;
    private TextView title;
    private LinearLayout point_ll;
    private ArrayList<ImageView>imageViews;
    private int prePosition=0;
    /**
     * 是否已经滚动
     */
    private boolean isDrahhing =false;

    //图片
    private final int[] imageIds={R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5};
    //标题
    private final String[]imageDescriptions={"aaaaa","bbbbb","ccccc","ddddd","eeeee"};

    private Handler handler =new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);

            int item = viewpager.getCurrentItem()+1;
            viewpager.setCurrentItem(item);

            handler.sendEmptyMessageDelayed(0,4000);
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        title=(TextView)findViewById(R.id.title);
        point_ll=(LinearLayout)findViewById(R.id.point);

        //1.ViewPager的使用
        //2.在布局文件中定义ViewPager
        //3.在代码中实例化ViewPager
        //4.准备数据
        imageViews=new ArrayList<>();
        for(int i=0;i<imageIds.length;i++){
            ImageView imageView=new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            imageViews.add(imageView);

            //添加点
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
            point.setLayoutParams(params);
            if(i==0){
                point.setEnabled(true);//显示红色

            }else {
                point.setEnabled(false);//显示灰色
                params.leftMargin = 8;
            }
            point_ll.addView(point);



        }
        //5.设置设配器(pagerAdapter) item布局 绑定数据
        viewpager.setAdapter(new MyPagerAdapter());
        //设置监听viewpager页面的改变
        title.setText(imageDescriptions[0]);

        viewpager.addOnPageChangeListener(new MyOnpageChangeListener());

        //设置中间的位置
        int item=Integer.MAX_VALUE/2 -Integer.MAX_VALUE/2%imageViews.size();
        viewpager.setCurrentItem(item);

        //发消息
        handler.sendEmptyMessageDelayed(0,4000);

    }


    class MyOnpageChangeListener implements ViewPager.OnPageChangeListener{

        /**
         *  当页面滚动了的时候回调这个方法
         * @param position 当前页面的位置
         * @param positionOffset 滑动页面的百分比
         * @param positionOffsetPixels 在屏幕上滑动的像数
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        /**
         * 当某个页面被选中了的时候回调
         * @param position 被选中页面的位置
         */
        @Override
        public void onPageSelected(int position) {
            int realPosition = position%imageViews.size();
            //设置对应页面的信息
            title.setText(imageDescriptions[realPosition]);
            //把上一个高亮的设置为灰色
            point_ll.getChildAt(prePosition).setEnabled(false);
            //把当前设置为高亮
            point_ll.getChildAt(realPosition).setEnabled(true);
            prePosition = realPosition;

        }

        /**
         * 当页面滚动状态变化的时候回调这个方法
         * 静止 到 滑动
         * 滑动 到 静止
         * 静止 到 拖拽
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {
            if(state == ViewPager.SCROLL_STATE_DRAGGING){//拖拽
                Log.w("aaaa","拖拽");
                isDrahhing = true;
                handler.removeCallbacksAndMessages(null);
            }else if(state == ViewPager.SCROLL_STATE_SETTLING){//滑动
                Log.w("aaaa","滑动");
            }else if(state == ViewPager.SCROLL_STATE_IDLE && isDrahhing){//空闲
                Log.w("aaaa","空闲");
                handler.removeCallbacksAndMessages(null);
                handler.sendEmptyMessageDelayed(0,4000);
            }

        }
    }

    //图片的总数
    class MyPagerAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            //return imageViews.size();
            return Integer.MAX_VALUE;
        }

        /**
         * 比较view和object是否是同一个实例
         * @param view 页面
         * @param object 这个方法instantiateItem返回的结果
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            if (view == object) {
                return true;
            } else {
                return false;
            }
        }

        /**
         *
         * @param container viewpager
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            int realPosition = position % imageViews.size();
            ImageView imageView= imageViews.get(realPosition);
            container.addView(imageView);//添加到viewpager中

            imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN://手指按下
                            Log.w("aaaa","手指按下");
                            handler.removeCallbacksAndMessages(null);
                            break;
                        case  MotionEvent.ACTION_MOVE://手指在控件上移动
                            break;
                        case MotionEvent.ACTION_UP://手指离开
                            Log.w("aaaa","手指离开");
                            handler.removeCallbacksAndMessages(null);
                            handler.sendEmptyMessageDelayed(0,4000);
                            break;
//                        case MotionEvent.ACTION_CANCEL://在同时去打开另外的软件的时候触发，因为一离开就不会执行ACTION_UP
//                            Log.w("aaaa","事件取消");
//                            handler.removeCallbacksAndMessages(null);
//                            handler.sendEmptyMessageDelayed(0,4000);
//
//                            break;
                    }
                    return false;//true与点击事件冲突，点击事件不起作用
                }
            });

            imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (int) v.getTag()%imageViews.size();
                    String text=imageDescriptions[position];
                    Toast.makeText(MainActivity.this,"text"+text,Toast.LENGTH_SHORT).show();
                }
            });
            return imageView;

        }


        /**
         *  释放资源
         * @param container viewpager
         * @param position 要释放的位置
         * @param object 要释放的页面
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //super.destroyItem(container, position, object);
            container.removeView((View) object);

        }
    }
}