Viewpager自定义轮播特效(仿京东超市休闲零食头部轮播)-白红宇的个人博客

Viewpager自定义轮播特效(仿京东超市休闲零食头部轮播)

发布日期：2022-02-26 14:49:31 浏览次数：43 分类：技术文章

本文共 8259 字，大约阅读时间需要 27 分钟。

要做类似这样的效果:(京东---京东超市---休闲零食)

做出来是这样的:

接下来直接上代码

页面布局

这里注意

clipToPadding这个属性  用法和原因请自行百度

clipChildren属性也请自行百度   这里两个属性用一个就行了

然后Activity

package com.huaxia.mytestviewpager;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import com.huaxia.mytestviewpager.adapter.MyViewPagerAdapter;import com.huaxia.mytestviewpager.widget.MyPagerTransformer;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {    private ViewPager main_viewpager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        main_viewpager = (ViewPager) findViewById(R.id.main_viewpager);        ArrayList
   
     imageViews = new ArrayList<>();        imageViews.add(Color.parseColor("#FF0000"));        imageViews.add(Color.parseColor("#00FF00"));        imageViews.add(Color.parseColor("#0000FF"));        imageViews.add(Color.parseColor("#FFFF00"));        imageViews.add(Color.parseColor("#00FFFF"));        imageViews.add(Color.parseColor("#FF00FF"));        initViewPager(imageViews);    }    private void initViewPager(ArrayList
    
      imageViews) {        main_viewpager.setOffscreenPageLimit(5);        main_viewpager.setPageTransformer(false, new MyPagerTransformer());        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(this);        main_viewpager.setAdapter(myViewPagerAdapter);        myViewPagerAdapter.setList(imageViews);    }}

然后继承的ViewPagerAdapter

package com.huaxia.mytestviewpager.adapter;import android.content.Context;import android.support.annotation.NonNull;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import java.util.ArrayList;/** * @Author:JiaoHaoKang * @E-mail:hkwaner@163.com * @Date:2019/6/18 * @Description: */public class MyViewPagerAdapter extends PagerAdapter {    private Context context;    private ArrayList
   
     list = new ArrayList<>();    public MyViewPagerAdapter(Context context) {        this.context = context;    }    public void setList(ArrayList
    
      list) {        this.list = list;        notifyDataSetChanged();    }    @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) {        ImageView imageView = new ImageView(context);        imageView.setScaleType(ImageView.ScaleType.FIT_XY);        imageView.setBackgroundColor(list.get(position % list.size()));        container.addView(imageView);        return imageView;    }    @Override    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {        container.removeView((View) object);    }}

然后继承的PageTransformer

package com.huaxia.mytestviewpager.widget;import android.os.Build;import android.support.annotation.NonNull;import android.support.annotation.RequiresApi;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.View;/** * @Author:JiaoHaoKang * @E-mail:hkwaner@163.com * @Date:2019/6/18 * @Description: */public class MyPagerTransformer implements ViewPager.PageTransformer {    /*private static final float MIN_SCALE = 0.85f;    private static final float MIN_ALPHA = 0.5f;    @Override    public void transformPage(View view, float position) {        int pageWidth = view.getWidth();        int pageHeight = view.getHeight();        if (position < -1) {            view.setAlpha(0);        } else if (position <= 1) {            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));            float vertMargin = pageHeight * (1 - scaleFactor) / 2;            float horzMargin = pageHeight * (1 - scaleFactor) / 2;            if (position < 0) {                view.setTranslationX(horzMargin - vertMargin / 2);            } else {                view.setTranslationX(-horzMargin + vertMargin / 2);            }            view.setScaleX(scaleFactor);            view.setScaleY(scaleFactor);            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));        } else {            view.setAlpha(0);        }    }*//*    private  static final float ROT_MAX=20.0f;    private  float mRot;    @Override    public void transformPage(View view, float position) {        if (position<-1){            view.setRotation(0);        }else if (position<=1){            //     if (position<0){            //      mRot=(ROT_MAX*position);            // view.setPivotX();            //    view.setPivotX(view.getMeasuredWidth()*0.5f);            //     view.setPivotY(view.getMeasuredHeight());            //    view.setRotation(mRot);            //   }else {            mRot=(ROT_MAX*position);            view.setPivotX(view.getMeasuredWidth()*0.5f);            view.setPivotY(view.getMeasuredHeight());            view.setRotation(mRot);            // }        }else{            view.setRotation(0);        }    }*/  /*  private  static final float MIN_SCALE=0.75f;    @Override    public void transformPage(View view, float position) {        int pageWidth = view.getWidth();        if (position<-1){            view.setAlpha(0);        }else if(position<=0){            view.setAlpha(1);            view.setTranslationX(0);            view.setScaleX(1);            view.setScaleY(1);        }else if (position<=1){            view.setAlpha(1-position);            view.setTranslationX(pageWidth*-position);            float scaleFactor=MIN_SCALE+(1-MIN_SCALE)*(1-Math.abs(position));            view.setScaleY(scaleFactor);            view.setScaleY(scaleFactor);        }else{            view.setAlpha(0);        }    }*/    private float interval = 24;//间距    /**     * @param view     * @param v    ? 玄学算数动不得     */    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)    @Override    public void transformPage(@NonNull View view, float v) {        int width = view.getWidth();        if (v <= -1) {            //                                  第负一張            //具体实现，此时page在界面的左边并且已经不显示在当前界面            view.setTranslationX(-width + -width);            view.setTranslationZ(0);        } else if (v <= 0) {            //具体实现，此时page正从中间往左侧移动  第一張            view.setTranslationX(0);                    //水平位移            view.setTranslationZ(4 + v);                //浮动            view.setScaleY((float) -((float) 1 - -0.1 * (v)));   //垂直缩放            view.setScaleX(1);        } else if (v <= 1) {            //具体实现，此时page正从右侧往中间移动   第二張            //Math.negateExact            view.setTranslationX(-width * (v - 1) - width + interval + ((v - 1) * interval));            view.setTranslationZ(2 + v);            view.setScaleY((float) ((float) 0.9 - -0.1 * (1 - v)));            float scaleX = view.getScaleX();            //view.setScaleX((float) ((float) 1 - -0.1 * (1 - v)));  //和布局上 android:clipToPadding="false"冲突???        } else if (v <= 2) {            //                                      第三張            view.setTranslationX((-width) * (v - 2) - width + -width + interval + interval + ((v - 2) * interval));            view.setTranslationZ(0 + v);            view.setScaleY((float) ((float) 0.8 - -0.1 * (2 - v)));        } else if (v <= 3) {            //                                       第四张            view.setTranslationX((-width) * (v - 3) - width + -width + -width + interval + interval + interval + ((v - 3) * interval));            view.setTranslationZ((-3 + v));            view.setScaleY((float) ((float) 0.7 - -0.1 * (3 - v)));        } else {            //具体实现，此时page在界面的右边并且已经不显示在当前界面            view.setTranslationX(width);            view.setTranslationZ(0);        }    }}

这个PageTransformer里面注释了还有从别的地方复制来的一些特效具体路径忘了所以不放链接了

最后可能是存在一个Bug 就是注释的:

view.setScaleX((float) ((float) 1 - -0.1 * (1 - v)));  //和布局上 android:clipToPadding="false"冲突???

这行这里用view.setScaleX的话回和clipToPadding和clipChildren这两个属性有冲突指着两个属性失效现在也不找原因了等闲的时候再找吧 , 如果有大佬知道原因欢迎评论留言.

--2019年6月21日 11:40:32

转载地址：https://blog.csdn.net/qq_31353347/article/details/93176632 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：百分比布局通过代码设置属性

下一篇：angularjs表单_2

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章