ViewPage實現無限輪播畫廊效果

1. 效果圖

 

2. 佈局文件

主要使用的 android:clipChildren的意思:是否限制子View在其範圍內。再父佈局和viewpager中設置該屬性  ,要顯示三個界面 ,還要設置marginleft和marginRightjava

 

<?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"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:clipChildren="false"
        android:layout_marginTop="30dp"
        android:layout_marginLeft="60dp"
        android:layout_marginRight="60dp"
        android:layout_height="150dp"></android.support.v4.view.ViewPager>

</RelativeLayout>

  

3. Adapter

 private class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//無限輪播
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view==o;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            View view=LayoutInflater.from(Grally2Activity.this).inflate(R.layout.item_vp,null);
            int newwPos=position%(datas.size());//對應數據中的位置
            ImageView img=view.findViewById(R.id.img);
            img.setImageResource(datas.get(newwPos));
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object
                object) {
//            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }
    }

 

4.關鍵點PageTransformer

public class Scalltransformer implements ViewPager.PageTransformer {
    private float MINSCALE=0.8f;//最小縮放值

    /**
     * position取值特色:
     * 假設頁面從0~1,則:
     * 第一個頁面position變化爲[0,-1]
     * 第二個頁面position變化爲[1,0]
     *
     * @param view
     * @param v
     */
    @Override
    public void transformPage(@NonNull View view, float v) {

        float scale;//view  應縮放的值
        if(v>1||v<-1){
            scale=MINSCALE;
        }else if(v<0){
            scale=MINSCALE+(1+v)*(1-MINSCALE);
        }else{
            scale=MINSCALE+(1-v)*(1-MINSCALE);
        }
        view.setScaleY(scale);
        view.setScaleX(scale);
    }
}

  

5.Activity代碼

public class Grally2Activity extends AppCompatActivity {
    @BindView(R.id.vp)
    ViewPager vp;

    private List<Integer> datas=new ArrayList<>();
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grally);
        ButterKnife.bind(this);
        initDatas();
        initVP();
    }

    private void initVP() {
        vp.setPageMargin(20);//設置ViewPager中子佈局的間隔
        vp.setOffscreenPageLimit(2);
        vp.setPageTransformer(false,new Scalltransformer());
        vp.setAdapter(new MyAdapter());
        vp.setCurrentItem(Integer.MAX_VALUE/2-(Integer.MAX_VALUE/2%datas.size()));//設置首個輪播顯示的位置   實現左右滑動 且首頁面對應的是第一個數據
    }

    private void initDatas() {
        datas.add(R.mipmap.p2);
        datas.add(R.mipmap.p3);
        datas.add(R.mipmap.p4);
        datas.add(R.mipmap.p5);
    }

    private class MyAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view==o;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            View view=LayoutInflater.from(Grally2Activity.this).inflate(R.layout.item_vp,null);
            int newwPos=position%(datas.size());
            ImageView img=view.findViewById(R.id.img);
            img.setImageResource(datas.get(newwPos));
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object
                object) {
//            super.destroyItem(container, position, object);
            container.removeView((View) object);
        }
    }
}
相關文章
相關標籤/搜索