滚动条 viewPager

Posted 2021-02-06 nangongyibin

滚动条 viewPager

• [1]在布局中声明控件

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="250dp"></android.support.v4.view.ViewPager>

 

• [2]viewpager展示数据和listview一样需要一个适配器(pagerAdapter) 定义适配器

    class MyAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return vpMax;
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            position = position % lists.size();
            ImageView iv = lists.get(position);
            container.addView(iv);
            return iv;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView((View) object);
        }
    }

 

• [3]添加小圆点和文本对应的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="250dp"></android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/vp"
        android:background="#66000000"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:gravity="center"
            android:text="天道酬勤,追梦无疆"
            android:textColor="#fff"
            android:textSize="24sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/vp"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingBottom="5dp"></LinearLayout>
</RelativeLayout>

 

• [4]初始化小圆点的逻辑

    private void initDotData() {
        for (int i = 0; i < lists.size(); i++) {
            View view = new View(getApplicationContext());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(7, 7);
            if (i != 0) {
                params.leftMargin = 7;
            }
            view.setLayoutParams(params);
            view.setBackgroundResource(R.drawable.selctor_dot);
            ll.addView(view);
        }
    }

 

• [5]当滑动viewpager的时候 ,改变小圆点的状态并且还要改变对应文本信息,就是给viewpager设置滑动的监听

        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                changeUI(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

 

• [6]由于改变小圆点的状态和对应文本信息这个逻辑用到了2次 所以抽出一个方法调用

    private void changeUI(int position) {
        position = position % lists.size();
        View child = ll.getChildAt(position);
        tv.setText(descs[position]);
        child.setSelected(true);
        if (currentSelectDot != null) {
            currentSelectDot.setSelected(false);
        }
        currentSelectDot = child;
    }

 

• [7]实现无限循环 原理:就是在适配器getcount方法里面返回一个比较大的数 
  • 5 % 5—–>0 
  • 6 %5—–>1 
  • 7 %5—–>2 
  • …… 
  • 50—->0 
  • 适配器getCount方法逻辑

        @Override
        public int getCount() {
            return vpMax;
        }

 

• • 初始化每个条目的业务逻辑

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            position = position % lists.size();
            ImageView iv = lists.get(position);
            container.addView(iv);
            return iv;
        }

 

• [8]实现viewpager自动滚动逻辑 handler 在onStrat方法里面通过handler发消息实现无限循环

    @Override
    protected void onStart() {
        handler.sendEmptyMessageDelayed(10, 3000);
        super.onStart();
    }

 

• [9]在handlemessage方法里面让viewpager加载下一页

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            vp.setCurrentItem(vp.getCurrentItem() + 1);
            handler.sendEmptyMessageDelayed(10, 3000);
            super.handleMessage(msg);
        }
    };