美文网首页Android
02.ViewPager一屏显示多个item:

02.ViewPager一屏显示多个item:

作者: 随风_逝 | 来源:发表于2018-09-06 09:40 被阅读266次

    1.首先如何在一个页面显示多个ViewPager的Item:

    只需要在父容器和ViewPager中都添加上clipChildren属性,然后给ViewPager设置左右两个margin,使其不致于把整个屏幕占满。

    <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:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        tools:context="com.example.ywt.viewpagertest.MainActivity">
    
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_margin="20dp"
            android:clipChildren="false" />
    
    </LinearLayout>
    

    android:clipChildren="false"
    此属性的意思是子View不必拘束在父控件的内部:
    当子View的大小超过父控件时,仍然可以显示,这个属性的默认值一般为true。
    注意:此处要求 viewPager 的高度为确定值EXACTLY,
    即 match_parsent 或者精确的值,必须给子View设置一个高度,不能是 wrap_content。

    2.其次写ViewPager的Adapter:

    public class ViewPagerAdapter extends PagerAdapter {
    
        private List<Bean> list;
        private Context mContext;
    
        public ViewPagerAdapter(List<Bean> list, Context mContext) {
            this.list = list;
            this.mContext = mContext;
        }
    
        /**
         * 返回list长度
         *
         * @return
         */
        @Override
        public int getCount() {
            return list.size();
        }
    
        /**
         * 判断instantiateItem(ViewGroup container, int position)返回的要加载的pager对象是不是view视图,
         * 是则返回true并显示,不是返回false不显示。
         *
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        /**
         * @param container 用来装填list的ViewPager对象
         * @param position  装填过程中给每个list的下标
         * @return 返回的对象就是当前填充进去的list对象
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = LayoutInflater.from(container.getContext()).inflate(R.layout.item_viewpager, container, false);
            //获取图片与标题id
            ImageView imageView = view.findViewById(R.id.img);
            TextView tv_title = view.findViewById(R.id.tv_title);
    
            Bean bean = list.get(position);
    
            imageView.setImageResource(bean.getImg());
            tv_title.setText(bean.getTitle());
    
            container.addView(view);
            return view;
        }
    
        /**
         * 销毁多余3个的pager对象。
         *
         * @param container vp对象
         * @param position  vp对象的下标
         * @param object
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }
    

    3.最后再来看看Activity:

    public class MainActivity extends AppCompatActivity {
    
        private List<Bean> list;
        private ViewPager viewPager;
        ViewPagerAdapter viewPagerAdapter;
        Context context;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            viewPager = findViewById(R.id.viewpager);
            initData();
        }
    
        private void initData() {
            list = new ArrayList<>();
            list.add(new Bean(R.mipmap.img_one, "标题一"));
            list.add(new Bean(R.mipmap.img_two, "标题二"));
            list.add(new Bean(R.mipmap.img_one, "标题三"));
    
            //设置Page间间距
            viewPager.setPageMargin(20);
            //设置缓存的页面数量
            viewPager.setOffscreenPageLimit(3);
            //设置自定义滑动动画
            //  viewPager.setPageTransformer(false, new GalleryTransformer());
    
            viewPagerAdapter = new ViewPagerAdapter(list, context);
            viewPager.setAdapter(viewPagerAdapter);
    
            viewPager.setOnTouchListener(new View.OnTouchListener() {
                int flage = 0;
    
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                        case MotionEvent.ACTION_DOWN:
                            flage = 0;
                            break;
                        case MotionEvent.ACTION_MOVE:
                            flage = 1;
                            break;
                        case MotionEvent.ACTION_UP:
                            if (flage == 0) {
                                int item = viewPager.getCurrentItem();
                                if (item == 0) {
                                    Toast.makeText(MainActivity.this, "点击1", Toast.LENGTH_SHORT).show();
                                } else if (item == 1) {
                                    Toast.makeText(MainActivity.this, "点击2", Toast.LENGTH_SHORT).show();
                                } else if (item == 2) {
                                    Toast.makeText(MainActivity.this, "点击3", Toast.LENGTH_SHORT).show();
                                }
                            }
                            break;
                    }
                    return false;
                }
            });
        }
    
    }
    
    

    4.关于PageTransformer:

    可以自定义PageTransformer来显示viewpager的动画效果。
    详情请参照:https://github.com/jfeinstein10/JazzyViewPager

    本文参照:
    https://www.jianshu.com/p/c9e8448472ed https://blog.csdn.net/u012702547/article/details/52334161
    我的Demo

    相关文章

      网友评论

        本文标题:02.ViewPager一屏显示多个item:

        本文链接:https://www.haomeiwen.com/subject/wfoybftx.html