Viewpager自定义轮播特效(仿京东超市 休闲零食 头部轮播)
发布日期:2022-02-26 14:49:31
浏览次数:49
分类:技术文章
本文共 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); ArrayListimageViews = 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 ArrayListlist = 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年08月24日 01时31分49秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
2. 两数相加
2019-05-24
JZ1.二维数组的查找
2019-05-24
3.无重复字符的最长子串
2019-05-24
String 类
2019-05-24
什么是接口
2019-05-24
Java高级篇之进程
2019-05-24
类加载机制
2019-05-24
了解jdk1.8版本一些新的特性
2019-05-24
Java高级篇之网络通讯
2019-05-24
浅谈篇之线程池
2019-05-24
Lambda 表达式
2019-05-24
字符串函数MySQL
2019-05-24
8个SQL讲解优化
2019-05-24
MySQL实战续(二)
2019-05-24
安装Elastic和kibana
2019-05-24
什么是搜索
2019-05-24
全文检索工具elasticsearch
2019-05-24
ES6之模块化
2019-05-24
Vue之条件渲染实战
2019-05-24
Vue之列表渲染
2019-05-24