1.实现viewpager同时显示三个item,这个效果实现起来还挺简单的。
只需要设置viewPager.setOffscreenPageLimit(3); 让viewpager可以显示3个item,并设置viewPager.setPageMargin(50);让每个item间有点间隔的效果 。在xml布局中设置viewpager和他的父控件的clipChildren属性为false就好了。
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main3Activity"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="50dp"
android:clipChildren="false"/>
</android.support.design.widget.CoordinatorLayout>
java代码:(adapter自己写吧,默认大家都会)
public class Main3Activity extends AppCompatActivity {
@BindView(R.id.viewpager)
ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
ButterKnife.bind(this);
//设置viewpager可以显示3个item,每个item间有点间隔的效果
viewPager.setOffscreenPageLimit(3);
viewPager.setPageMargin(50);
//设置viewpager的adapter
ArrayList<Integer> data = new ArrayList<>();
data.add(R.drawable.apple);
data.add(R.drawable.banana);
data.add(R.drawable.watermelon);
data.add(R.drawable.pineapple);
data.add(R.drawable.strawberry);
ViewPagerAdapter adapter = new ViewPagerAdapter(data);
viewPager.setAdapter(adapter);
}
}
2.实现切换动画。
设置viewpager的setPageTransformer(true, pagetransformer),pageTransFormer是个接口,需要我们自己实现它的transformPage方法。
@Override public void transformPage(@NonNull View view, float v)
这个方法中的view就是我们的item,v的值随左右滑动而变,概括来讲就是当前显示的item的v为0,其左边item的v都是负值,右边为正值,向左滑v减小,右滑v增大。我实现了一个缩放的效果,你也可以自己定义自己需要的效果。
布局和上面一样,java代码:
public class Main3Activity extends AppCompatActivity {
@BindView(R.id.viewpager)
ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
ButterKnife.bind(this);
//设置viewpager可以显示3个item,每个item间有点间隔的效果
viewPager.setOffscreenPageLimit(3);
viewPager.setPageMargin(50);
//设置viewpager的切换动画
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
@Override
public void transformPage(@NonNull View view, float v) {
//view就是我们adapter里返回的view,设置view的缩放中心为右上角
view.setPivotX(view.getWidth());
view.setPivotY(0);
//v的值随左右滑动而变,概况来讲就是当前显示的item的v为0,其左边item的v都是负值,右边为正值
if (v < -1) {//当前显示的item左边第二个及更左的item
//看不到的item不缩放
view.setScaleX(1);
view.setScaleY(1);
} else if (v < 0){//当前显示的item左边第一个item
//逐渐放大
view.setScaleX(1 + v);
view.setScaleY(1 + v);
} else if (v == 0) {//当前显示的item的
} else if (v <= 1) {//当前显示的item右边第一个item
//逐渐放大
view.setScaleX(1 - v);
view.setScaleY(1 - v);
} else {//当前显示的item右边第二个及更右的item
view.setScaleX(1);
view.setScaleY(1);
}
}
});
//设置viewpager的adapter
ArrayList<Integer> data = new ArrayList<>();
data.add(R.drawable.apple);
data.add(R.drawable.banana);
data.add(R.drawable.watermelon);
data.add(R.drawable.pineapple);
data.add(R.drawable.strawberry);
ViewPagerAdapter adapter = new ViewPagerAdapter(data);
viewPager.setAdapter(adapter);
}
}