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
网友评论