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

        }
    }
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义轮播控件可以使用ViewPager和Handler实现: 1. 首先创建一个自定义ViewPager类,并重写onTouchEvent()方法,实现手势滑动效果。 ``` public class MyViewPager extends ViewPager { private float startX; private float startY; private OnItemClickListener onItemClickListener; public MyViewPager(Context context) { super(context); } public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: startX = ev.getX(); startY = ev.getY(); break; case MotionEvent.ACTION_UP: float endX = ev.getX(); float endY = ev.getY(); if (startX == endX && startY == endY) { if (onItemClickListener != null) { onItemClickListener.onItemClick(getCurrentItem()); } } break; } return super.onTouchEvent(ev); } public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public interface OnItemClickListener { void onItemClick(int position); } } ``` 2. 创建一个自定义的轮播控件类,继承自LinearLayout,并在该类中初始化ViewPager和指示器,并设置自动轮播。 ``` public class MyBanner extends LinearLayout { private Context mContext; private MyViewPager mViewPager; private LinearLayout mIndicatorLayout; private List<ImageView> mIndicatorViews; private List<String> mImageUrls; private int mCurrentItem = 0; private Handler mHandler = new Handler(); public MyBanner(Context context) { super(context); initView(context); } public MyBanner(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } private void initView(Context context) { mContext = context; View view = LayoutInflater.from(mContext).inflate(R.layout.my_banner_layout, this); mViewPager = (MyViewPager) view.findViewById(R.id.viewpager); mIndicatorLayout = (LinearLayout) view.findViewById(R.id.indicator_layout); } public void setImageUrls(List<String> imageUrls) { mImageUrls = imageUrls; initIndicator(); mViewPager.setAdapter(new MyBannerAdapter()); mViewPager.setCurrentItem(Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % mImageUrls.size())); startAutoScroll(); } private void initIndicator() { mIndicatorViews = new ArrayList<>(); for (int i = 0; i < mImageUrls.size(); i++) { ImageView indicatorView = new ImageView(mContext); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.rightMargin = 20; indicatorView.setLayoutParams(params); if (i == 0) { indicatorView.setImageResource(R.drawable.indicator_selected); } else { indicatorView.setImageResource(R.drawable.indicator_normal); } mIndicatorLayout.addView(indicatorView); mIndicatorViews.add(indicatorView); } } private void startAutoScroll() { mHandler.postDelayed(new Runnable() { @Override public void run() { mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1); mHandler.postDelayed(this, 2000); } }, 2000); } private class MyBannerAdapter extends PagerAdapter { @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public Object instantiateItem(ViewGroup container, final int position) { ImageView imageView = new ImageView(mContext); imageView.setScaleType(ImageView.ScaleType.FIT_XY); Glide.with(mContext).load(mImageUrls.get(position % mImageUrls.size())).into(imageView); container.addView(imageView); imageView.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { Toast.makeText(mContext, "点击了第" + (position % mImageUrls.size() + 1) + "张图片", Toast.LENGTH_SHORT).show(); } }); return imageView; } } } ``` 3. 在布局文件中使用自定义的轮播控件。 ``` <com.example.myapplication.MyBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp" /> ``` 4. 在代码中设置轮播的图片地址。 ``` List<String> imageUrls = new ArrayList<>(); imageUrls.add("http://img2.imgtn.bdimg.com/it/u=202085641,1798154443&fm=27&gp=0.jpg"); imageUrls.add("http://img5.imgtn.bdimg.com/it/u=2746360890,4221331673&fm=27&gp=0.jpg"); imageUrls.add("http://img0.imgtn.bdimg.com/it/u=3054917406,3471798182&fm=27&gp=0.jpg"); mBanner.setImageUrls(imageUrls); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值