滚动条 viewPager

Posted nangongyibin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了滚动条 viewPager相关的知识,希望对你有一定的参考价值。

滚动条 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);
        }
    };

 

以上是关于滚动条 viewPager的主要内容,如果未能解决你的问题,请参考以下文章

我的片段中有 webview,当滑动 webview 时, viewPager 也开始滑动

可滚动布局中的 ViewPager

ViewPager里面的ScrollView,自动滚动到中间

带有标签和 Viewpager 的 Android 片段

ViewPager中的视图在ScrollView中不能垂直滚动

滚动条 viewPager