ViewPager的使用

最新推荐文章于 2025-04-18 13:13:11 发布

原创最新推荐文章于 2025-04-18 13:13:11 发布 · 403 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#viewpager

布局控件专栏收录该内容

12 篇文章

订阅专栏

ViewPager的使用

ViewPager用途举例:

布局中的轮播图;

页面,相册等翻页;

用法简单,直接上代码吧,xml布局:

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

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_above="@+id/view"	//此处注意用的是Layout_above
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/green" />

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@android:color/darker_gray"
        android:layout_above="@+id/ll" />

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@android:color/background_light"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw"
            android:text="dddddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw2"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw3"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw4"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />
    </LinearLayout>
</RelativeLayout>

注意:该布局需要注意采用的是layout_above反向布局技巧,使ViewPager和下边选择按钮更合理化的布局,外层布局也要注意用的是RelativeLayout,而还有一种布局也能达到相同效果,不过则需用LinearLayout和weight配合使用:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  //此处注意要用LinearLayout 
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/replace"
        android:background="@android:color/holo_blue_dark"
        android:layout_weight="1"		//此处注意用的是 layout_weight
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw"
            android:text="dddddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw2"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw3"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:drawableTop="@drawable/selector_draw4"
            android:text="ddd"
            android:gravity="center"
            android:textColor="@color/selector_tv"
            android:textSize="14sp" />
    </LinearLayout>
</LinearLayout>

Activity中代码:

   @Override
    protected void initData() {
        tv1.setSelected(true);
        viewPager.setCurrentItem(0);
        viewsList = new ArrayList<View>();  //用于ViewPager
        fragmentsList = new ArrayList<Fragment>(); //用于FragmentViewPager
        for (int i = 0; i < 4; i++) {
            //这里必须要创建新的view,这样在后来Adapter中填充时,view的父控件才不会把这唯一的view删除,
	    //这样才能显示多个view效果
            View view = getLayoutInflater().from(ThreeActivity.this).inflate(R.layout.activity_second, new RelativeLayout(ThreeActivity.this));
            viewsList.add(i, view);
            fragmentsList.add(new MyPagerFragment());
        }

        viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View page, float position) {
                //执行属性动画
                ObjectAnimator.ofFloat(page, "scaleX", 1,0.3f,2,1).setDuration(1222).start();
            }
        });

        viewPager.setAdapter(getAdapter(1));
    }

    @NonNull
    private PagerAdapter getAdapter(int i) {
        if (i == 1) {
            return new MyPagerAdapter(viewsList);
        } else if (i == 2) {
            return new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList);
        }
        return null;
    }

PagerAdapter中代码:

/**
 * (View)PagerAdapter:使用的时,要求填充View集合,而FragmentPagerAdapter使用时,
 * 要求填充的是Fragment集合,这点需要注意;
 */
public class MyPagerAdapter extends PagerAdapter {
    public List<View> viewList;

    public MyPagerAdapter(List<View> viewList) {
        this.viewList = viewList;
        if (viewList == null) {
            viewList = new ArrayList<>();
        }
    }

    @Override
    public int getCount() {
        return viewList.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = viewList.get(position);
        if (view.getParent() !=null) {
            //去除view的父布局
            ViewGroup parent = (ViewGroup) view.getParent();
            parent.removeView(view);
        }
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
//        container.removeView((View) object); //已经remove过了,这里就不要再次remove了,
        //但这个方法必须重写,否则报错
    }
}

FragmentPagerAdapter中代码:

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragmentsList;

    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentsList) {
        super(fm);
        this.fragmentsList = fragmentsList;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = fragmentsList.get(position);
//        ((MyPagerFragment)fragment).initData(); //延后型数据加载模式,能节省流量
        return fragment;
    }

    @Override
    public int getCount() {
        return fragmentsList.size();
    }
}

顺便简单说一下ViewPager和ViewPagerIndicator、TabLayout的使用：

布局：

<LinearLayout>
   <android.support.design.widget.TabLayout
       android:layout_width="match_parent"
       android:id="@+id/shop_tableyout"
       android:layout_height="wrap_content"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/shop_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
</LinearLayout>

Activity中代码设置：

   tabLayout.setTabTextColors(Color.parseColor("#000000"), Color.parseColor("#a20000"));// 选中为绿色,未选中为灰色
   tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#a20000"));// 设置下标线为蓝色
   tabLayout.setupWithViewPager(shopViewpager);

注意：在ViewPager的adapter中必须实现方法：

@Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];// 添加标题
        }

总结:
使用FragmentPagerAdapter比PagerAdapter方式更便于代码的管理,各个页面中控件的初始化和监听都可以在Fragment中进行管理,而若是采用PagerAdapter这种方式,都是以view的形式存在与Activity中,这样就会导致Activity代码冗余,不利于管理,所以PagerAdapter这种方式适合轮播图这种简单的布局,而对于复杂的页面布局最好采用FragmentPagerAdapter方式填充pager较好，ViewPagerIndicator、TabLayout二者在ViewPager中的用法很相似;

有不完善的地方,欢迎大家给与建议!