viewpager显示多页，左右翻页显示动画

         最近因为公司项目需要。要在一个页面中显示1个主页面，两边分别显示其他页面的一部分。效果类似下图这样：

      


        想了一下用viewpager写了个简单的demo，贴出来以供参考。

       首先因为我们看到这这个页面中显示了3个分页。所以我们首先需要解决的就是，怎么才能在viewpager中显示多页的问题。

       这里需要在根部局加入2个属性：

<!--关闭硬件加速-->
android:layerType="software"
android:clipChildren="false"

</pre><span style="font-size:14px">        第一个参数，是关闭硬件加速，为了保证下面一个参数可用。第二个参数是关键，就是当前一个页面超出view时，仍然能显示出来，不会被切掉。</span><p></p><p><span style="font-size:14px">       主布局：</span></p><p></p><pre name="code" class="html"><RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="@+id/root_rly"
android:layerType="software" android:clipChildren="false"><!--关闭硬件加速-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="200dp"
android:layout_height="270dp"
android:layout_centerInParent="true"
android:clipChildren="false" ><!--超出view的部分，不要切掉，依然显示-->

</android.support.v4.view.ViewPager>
</RelativeLayout>

        第二步，就是在显示和切换的时候，如何保证当前选中的页面为1:1，而没有选中的页面为4:5的。这里我是这么处理的，首先在Fragment创建完view的时候，让view执行一个动画，将其进行缩放和透明度的处理。如下代码：

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.beauty_info_fragment, null);
AnimationSet set=new AnimationSet(true);
ScaleAnimation scaleAnimation=new ScaleAnimation(1.0f,1.0f,1.0f,0.8f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(200);
AlphaAnimation alphaAnimation=new AlphaAnimation(1.0f,0.8f);
alphaAnimation.setDuration(200);
set.addAnimation(scaleAnimation);
set.addAnimation(alphaAnimation);
set.setFillAfter(true);
if(tag!=1) {
view.startAnimation(set);
}else if(fristOpen==1)
{
view.startAnimation(set);
}
recyclerView= (RecyclerView) view.findViewById(R.id.recyclerview);
return view;
}

        这里的tag代表的是在加入是从activity传递的数据，代表第几个fragment，由于加载时默认加载第一个所以没有做缩放处理。但是又定义了一个fristOpen来标识第几次执行onCreateView这个方法，所以当第一个fragment再次进入的时候，也会执行缩放的处理。接着我们需要监听viewpager的addOnPageChangeListener</span>事件，来处理选中的页面和被切换出去的页面。

@Override
public void onPageSelected(int position) {
View v1=fragmentList.get(currentIndex).getView();
View v2=fragmentList.get(position).getView();
childLLY= (LinearLayout) radioGroup.getChildAt(currentIndex);
pageNomal(childLLY);
currentLLY= (LinearLayout) radioGroup.getChildAt(position);
pageSelect(currentLLY);
currentIndex=position;
putAnimation(v2);
outAnimation(v1);
}

        在onPageSelected方法中，取到被滑出的view对象和当前被选中的view对象，分别执行缩小的动画和放大的动画。关键性代码就这么多吧！事实上这里的切入和切出动画在高版本中，也可以使用viewPager.setPageTransformer该方法来实现，不过为了兼容低版本所以我才使用了动画的这种方式来实现。而缩小和透明度的设置也可以通过一行代码来实现：

view.setScaleX(0.7f);
view.setScaleY(0.7f);
view.setAlpha(0.7f)。

可参考：viewpager动画不过不支持3.0以下的版本。

        顺便贴一下动画的代码：

public void putAnimation(View view)
{
AnimationSet set=new AnimationSet(true);
ScaleAnimation scaleAnimation=new ScaleAnimation(1.0f,1.0f,0.8f,1.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(200);
AlphaAnimation alphaAnimation=new AlphaAnimation(0.8f,1.0f);
alphaAnimation.setDuration(200);
set.addAnimation(scaleAnimation);
set.addAnimation(alphaAnimation);
set.setFillAfter(true);
view.startAnimation(set);
}

       组合动画这里，setFillAfter方法必须是animationset的，否则就会有问题，切记！