ViewPager 側滑 橫向滑動 露邊 側邊 留邊 看下圖

一個頁面顯示多個ViewPager的Item,如何在一個頁面上顯示ViewPager的多個item?

一共有兩種解決方案:
第一種就是我們上文所說的clipChildren屬性,
第二種是clipToPadding屬性

只需要在父容器和ViewPager中都添加上clipChildren屬性,然后給ViewPager設置左右兩個margin,使其不致于把整個屏幕占滿,就是這么簡單

<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:clipChildren="false"  
    tools:context="org.lenve.myviewpagercards.MainActivity">  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/viewpager"  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:layout_marginLeft="60dp"  
        android:layout_marginRight="60dp"  
        android:clipChildren="false"></android.support.v4.view.ViewPager>  
</RelativeLayout>  

我們再來看看ViewPager的Adapter:

public class MyVpAdater extends PagerAdapter {  
    private List<Integer> list;  
    private Context context;  
  
    public MyVpAdater(Context context, List<Integer> list) {  
        this.context = context;  
        this.list = list;  
    }  
  
    @Override  
    public int getCount() {  
        return list.size();  
    }  
  
    @Override  
    public boolean isViewFromObject(View view, Object object) {  
        return view == object;  
    }  
  
    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  
        ImageView iv = new ImageView(context);  
        iv.setImageResource(list.get(position));  
        container.addView(iv);  
        return iv;  
    }  
  
    @Override  
    public void destroyItem(ViewGroup container, int position, Object object) {  
        container.removeView((View) object);  
    }  
} 
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);  
viewPager.setPageMargin(80);  
viewPager.setOffscreenPageLimit(3);
MyVpAdater adater = new MyVpAdater(this, list);  
viewPager.setAdapter(adater);  

比我們一般使用ViewPager多了兩行代碼,
一個是setOffscreenPageLimit,這個是設置預加載的頁數(shù),我們知道默認情況下這個參數(shù)為1,也就是左右各預加載一頁,但是我們這里要讓左右各預加載兩頁;
另外一個PageMargin就好說了,就是設置ViewPager中兩頁之間的距離。OK,那我們來看看顯示效果:

image

第二種:(ViewPager結合CardView)
那就是clipToPadding,這個屬性是什么意思呢?它表示是否允許ViewGroup在ViewGroup的padding中進行繪制,默認情況下該屬性的值為true,即不允許在ViewGroup的padding中進行繪制。


<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"  
    tools:context="org.lenve.myviewpagercards2.MainActivity">  
  
    <android.support.v4.view.ViewPager  
        android:id="@+id/viewpager"  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:clipToPadding="false"  
        android:paddingBottom="24dp"  
        android:paddingLeft="48dp"  
        android:paddingRight="48dp"  
        android:paddingTop="24dp"></android.support.v4.view.ViewPager>  
</RelativeLayout>  

ViewPager的Adapter如下:

public class MyAdapter extends PagerAdapter {  
    private List<Integer> list;  
    private Context context;  
    private LayoutInflater inflater;  
  
    public MyAdapter(Context context, List<Integer> list) {  
        this.context = context;  
        this.list = list;  
        inflater = LayoutInflater.from(context);  
    }  
    @Override  
    public int getCount() {  
        return list.size();  
    }  
  
    @Override  
    public boolean isViewFromObject(View view, Object object) {  
        return view == object;  
    }  
  
    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  
        View view = inflater.inflate(R.layout.vp_item, container, false);  
        container.addView(view);  
        return view;  
    }  
  
    @Override  
    public void destroyItem(ViewGroup container, int position, Object object) {  
        container.removeView((View) object);  
    }  
}  

調用

ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);  
        List<Integer> list = new ArrayList<>();  
        MyAdapter adapter = new MyAdapter(this, list);  
        viewPager.setAdapter(adapter);  
        viewPager.setPageMargin((int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,  48, getResources().getDisplayMetrics()));  
        viewPager.setPageTransformer(false, new ScaleTransformer(this));  

轉載自:https://blog.csdn.net/u012702547/article/details/52334161

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容