ViewPager 实现图片自动无限轮播、酷炫效果的实现（同时显示出多个item）、底部导航栏实现中间

 

一、简介

ViewPager是Android扩展包v4包中直接继承于ViewGrounp的容器类（如果你现在使用Android Studio开发的话就不用导入v4b包了，因为v7中就已经包含了v4），可以通过创建PageAdapter添加其他的View; 其实它也是个视图翻页工具，可以实现多页面切换的效果；主要用于fragment切换(这一部分比较简单文章也比较多，这里就不多说了)，酷炫图片展示，轮播图等等...

这篇文章主要给大家分享一下一个界面显示多个item的两种实现方法以及无限轮播图。

二、效果图

二、1 首先介绍一下ViewGrounp中的一个属性 clipChildren

clipChildren是ViewGroup中的一个很好的属性，用于定义子元素超出父元素的部分是否进行绘制.通常用于动画效果中需要绘制超出原有尺寸的元素时使用。clipChildren的值是哥boolean型，false表示可以超出父元素，true表示不可超出父元素。而且它的使用需要用在父元素上。并且自身也要使用layout_gravity="bottom"属性,代码如下：

<?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:clipChildren="false">

    <TextView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_above="@+id/footer" />

    <LinearLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@android:color/white"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/ic_receive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/receive_select"
            android:text="首页"
            android:textColor="@drawable/index_select_color" />

        <TextView
            android:id="@+id/ic_order"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="嘿嘿"
            android:gravity="center"
            android:layout_weight="1"
            android:drawableTop="@drawable/order_select"
            android:textColor="@drawable/index_select_color" />

        <LinearLayout
            android:id="@+id/centerFl"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginBottom="10dp"
            android:gravity="center"
            android:layout_gravity="bottom"
            android:background="@drawable/middle_circle">

            <ImageView
                android:id="@+id/middleRotate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/ic_and" />
        </LinearLayout>

        <TextView
            android:id="@+id/ic_subscribe"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="哈哈"
            android:layout_weight="1"
            android:gravity="center"
            android:drawableTop="@drawable/subscribe_select"
            android:textColor="@drawable/index_select_color" />

        <TextView
            android:id="@+id/ic_mine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="呵呵"
            android:layout_weight="1"
            android:gravity="center"
            android:drawableTop="@drawable/mine_select"
            android:textColor="@drawable/index_select_color" />

    </LinearLayout>
</RelativeLayout>

其实就注意两点（1）clipChildren 属性用在父元素上；（2）自身元素要使用layout_gravity="bottom"属性，使用其他属性或者不使用此属性可自行验证效果。

二、2 下面看一下ViewPager酷炫图片显示以及透明度和缩放设计

ViewPager实现一个界面显示多个item有两中方法：

1、clipChildren + pageTransformer; clipChildern上面已经说过了这里就不多介绍了；PageTransformer是ViewPager内部定义的接口，实现该接口并应用于ViewPager可以控制ViewPager中item view的滑动效果。废话不多说，上代码：

Activity代码：setOffscreenPageLimit(3)是预加载个数，设置3其实是预加载4张图片；OutPageTransformerClipPd()是自定义的pageTransformer,透明度和缩放效果就是在这里实现的（具体使用下面会有介绍）

ClipPaddingAdp viewPagerAdp = new ClipPaddingAdp(this, listClipPadding);
/*
 * ========== clipToPadding+pageTransformer ============*/
//缓存个数
clipPaddingVpg.setOffscreenPageLimit(3);
//设置显示效果 缩放 透明度
clipPaddingVpg.setPageTransformer(false, new OutPageTransformerClipPd());
clipPaddingVpg.setAdapter(viewPagerAdp);

layout 布局代码：这里还是和前面底部导航栏中间按