先看看效果图吧
作者在里面封装一个文本适配器,直接调用以下方法即可
当向上滑的时候把第2个view放到view1的下面并修改viwe2的数据,
动画结束后把viwe1的数据修改成viwe2的数据,然后位置放回原来的地方。
SmartViewFlipper view_flipper = findViewById(R.id.view_flipper);view_flipper.setTextAdapter(Arrays.asList("1 -aaaa","2 -aaaa","3 -aaaa","4 -aaaa"));view_flipper.start();
快速上手
设置滚动方向 DIRECTION_TOP DIRECTION_BOTTOM DIRECTION_LEFT DIRECTION_RIGHTsetDirection(SmartViewFlipper.DIRECTION_BOTTOM);每隔多少毫秒滑动一次setDelayed(5000);滑动时间setSlidingTime(1000);
使用方法
布局控件 android:id="@+id/view_flipper" android:background="@drawable/shape_black_radius_100" android:layout_marginLeft="@dimen/dp12" android:layout_marginTop="@dimen/dp120" android:layout_width="wrap_content" android:layout_height="@dimen/dp30"/>
item_flipper.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="match_parent"> <com.bd_appzq.view.circleimg.CircularImage android:id="@+id/img" android:layout_width="@dimen/dp26" android:layout_height="@dimen/dp26" android:layout_marginLeft="@dimen/dp2" android:src="@drawable/ic_empty_head" /> <TextView android:id="@+id/tv" android:layout_marginRight="@dimen/dp16" android:layout_marginLeft="@dimen/dp8" android:textSize="@dimen/sp11" android:textColor="@color/white" android:maxLines="1" android:layout_width="wrap_content" android:layout_height="wrap_content"/>LinearLayout>
//数据类 class Data{ private String img; private String text; public Data(String img, String text) { this.img = img; this.text = text; } public String getImg() { return img; } public void setImg(String img) { this.img = img; } public String getText() { return text; } public void setText(String text) { this.text = text; } }//查找每页的控件class VH extends SmartViewFlipper.ViewHolder { CircularImage img; TextView tv; public VH(View itemView) { super(itemView); img = findViewById(R.id.img); tv = findViewById(R.id.tv); } }
最终使用代码
List data = Arrays.asList( new Data("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1529415482,1107411788&fm=26&gp=0.jpg","1.狗狗"), new Data("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3401053187,2861658565&fm=26&gp=0.jpg","2.狗狗"), new Data("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3100300256,2664407905&fm=26&gp=0.jpg","3.狗狗"), new Data("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1931714271,381023284&fm=26&gp=0.jpg","4.狗狗") ); SmartViewFlipper view_flipper = findViewById(R.id.view_flipper); view_flipper.setAdapter(new SmartViewFlipper.Adapter(data) { @Override public void updateData(VH vh, Data data, int i) { Glide.with(thisAct).load(data.img).into(vh.img); vh.tv.setText(data.text); } @Override public VH createView(Context context) { View view = LayoutInflater.from(context).inflate(R.layout.item_flipper,null,false); return new VH(view); } }); view_flipper.start();
原理就是2个view重叠起来并且显示的数据都一样。当向上滑的时候把第2个view放到view1的下面并修改viwe2的数据,
动画结束后把viwe1的数据修改成viwe2的数据,然后位置放回原来的地方。
这里就是一整个类的代码直接复制即可
/** * 视图翻转器 * * 注意:建议不要在RecyclerView使用,如果非要使用请调用setAutoCancel(false); 再调试关闭Activity 此类的updateView方法是否还会执行 */public class SmartViewFlipper extends FrameLayout { private long delayed = 3000; //每隔多少毫秒滑动一次 private long slidingTime = 1000; //滑动时间 private boolean isCancel; //是否停止动画 private boolean isAutoCancel = true; //控件销毁是否自动取消动画 private int direction = DIRECTION_TOP; //方向 1 上 2 下 3 左 3 右 private Adapter adapter; private ViewHolder vh1,vh2; private boolean isStart; //是否在启动 //滑动方向常量 public static final int DIRECTION_TOP = 1; public static final int DIRECTION_BOTTOM = 2; public static final int DIRECTION_LEFT = 3; public static final int DIRECTION_RIGHT = 4; public SmartViewFlipper(@NonNull Context context) { super(context); } public SmartViewFlipper(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); } //每隔多少毫秒滑动一次 public void setDelayed(long delayed) { if (delayed > 0) this.delayed = delayed; } //滑动时间 public void setSlidingTime(long slidingTime) { this.slidingTime = slidingTime; } //设置背景透明度 public void setBackgroundAlpha(int alpha) { if (getBackground() != null) { if (alpha > 255) { alpha = 255; } else if (alpha < 0) { alpha = 0; } getBackground().mutate().setAlpha(alpha); } } @Override public void setBackground(Drawable background) { super.setBackground(background); setBackgroundAlpha(175); } //设置滚动方向 1 上 2 下 3 左 3 右 public void setDirection(int direction) { if (direction > 4 || direction < 1) { return; } this.direction = direction; } //设置适配器 public void setAdapter(Adapter adapter) { this.adapter = adapter; removeAllViews(); vh1 = adapter.createView(getContext()); vh2 = adapter.createView(getContext()); vh1.itemView.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); vh2.itemView.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); addView(vh1.itemView); addView(vh2.itemView); } public void setTextAdapter(List data){ setAdapter(new TextAdapter(data)); } //控件销毁是否自动取消动画 public void setAutoCancel(boolean autoCancel) { this.isAutoCancel = autoCancel; } //停止动画 public void cancel() { isCancel = true; isStart = false; } //启动 public void start() { if (adapter == null) return; if (isStart){ adapter.refresh(); return; } isStart = true; isCancel = false; adapter.updateDataE(vh1, adapter.getData()); adapter.updateDataE(vh2, adapter.getData()); updateView(); } //是否在启动 public boolean isStart() { return isStart; } private void updateView() { if (isCancel) return; postDelayed(new Runnable() { @Override public void run() { if (isCancel) return; adapter.addIndex(); switch (direction) { case DIRECTION_BOTTOM: bottomAnimator(); break; case DIRECTION_LEFT: leftAnimator(); break; case DIRECTION_RIGHT: rightAnimator(); break; default: topAnimator(); break; } } }, delayed); } private void topAnimator() { ObjectAnimator animator = translationY(vh1.itemView, slidingTime, 0, -vh1.itemView.getHeight()); translationY(vh2.itemView, slidingTime, vh1.itemView.getHeight(), 0); adapter.updateDataE(vh2, adapter.getData()); animator.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { adapter.updateDataE(vh1, adapter.getData()); vh1.itemView.setTranslationY(0); updateView(); } }); } private void bottomAnimator() { ObjectAnimator animator = translationY(vh1.itemView, slidingTime, 0, vh1.itemView.getHeight()); translationY(vh2.itemView, slidingTime, -vh1.itemView.getHeight(), 0); adapter.updateDataE(vh2, adapter.getData()); animator.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { adapter.updateDataE(vh1, adapter.getData()); vh1.itemView.setTranslationY(0); updateView(); } }); } private void leftAnimator() { ObjectAnimator animator = translationX(vh1.itemView, slidingTime, 0, -getWidth()); translationX(vh2.itemView, slidingTime, getWidth(), 0); adapter.updateDataE(vh2, adapter.getData()); animator.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { adapter.updateDataE(vh1, adapter.getData()); vh1.itemView.setTranslationX(0); updateView(); } }); } private void rightAnimator() { vh2.itemView.setVisibility(INVISIBLE); adapter.updateDataE(vh2, adapter.getData()); vh2.itemView.post(new Runnable() { @Override public void run() { vh2.itemView.setVisibility(VISIBLE); ObjectAnimator animator = translationX(vh1.itemView, slidingTime, 0, getWidth()); translationX(vh2.itemView, slidingTime, -getWidth(), 0); animator.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { adapter.updateDataE(vh1, adapter.getData()); vh1.itemView.setTranslationX(0); updateView(); } }); } }); } private ObjectAnimator translationY(View view, long duration, float... values) { ObjectAnimator translationYAni = ObjectAnimator.ofFloat(view, "translationY", values); translationYAni.setDuration(duration); translationYAni.start(); return translationYAni; } private ObjectAnimator translationX(View view, long duration, float... values) { ObjectAnimator translationYAni = ObjectAnimator.ofFloat(view, "translationX", values); translationYAni.setDuration(duration); translationYAni.start(); return translationYAni; } @Override protected void dispatchDraw(Canvas canvas) { float roundSize = getMeasuredWidth() /2; //切圆角 Path path = new Path(); path.addRoundRect(new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), roundSize, roundSize, Path.Direction.CW); canvas.clipPath(path, Region.Op.REPLACE); super.dispatchDraw(canvas); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); if (isAutoCancel) { cancel(); } } public abstract static class Adapter<DATA, VH extends ViewHolder> { private List data; private int index = 0; public Adapter(List data) { this.data = data; } public Adapter() { } public void refresh() { index = 0; } public void addIndex() { index++; if (index >= getSize()) { index = 0; } } public void setData(List data) { this.data = data; } public DATA getData() { if (data == null) { return null; } return data.get(index); } public int getSelectIndex() { return index; } public int getSize() { return data == null ? 0 : data.size(); } //修改控件数据 public abstract void updateData(VH vh, DATA data); public final void updateDataE(VH vh, DATA data){ try { updateData(vh,data); } catch (Exception e) { e.printStackTrace(); } } //创建显示的View public abstract VH createView(Context context); } public static class ViewHolder { View itemView; public ViewHolder(View itemView) { if (itemView == null) { throw new RuntimeException("不能传入一个null的view"); } this.itemView = itemView; } public T findViewById(int id) { return itemView.findViewById(id); } } public static class TextAdapter extends Adapter<String, TextAdapter.VH> { private String textColor = "#FFFFFF"; private int textSize = 14; public TextAdapter(List strings) { super(strings); } public TextAdapter(List strings, String textColor) { super(strings); this.textColor = textColor; } public TextAdapter(List strings, int textSize) { super(strings); this.textSize = textSize; } public TextAdapter(List strings, String textColor, int textSize) { super(strings); this.textColor = textColor; this.textSize = textSize; } @Override public void updateData(VH vh, String s) { TextView tv = (TextView) vh.itemView; tv.setText(s); } @Override public VH createView(Context context) { TextView tv = new TextView(context); tv.setTextColor(Color.parseColor(textColor)); tv.setGravity(Gravity.CENTER); tv.setTextSize(textSize); tv.setMaxLines(1); VH vh = new VH(tv); return vh; } class VH extends ViewHolder { public VH(View itemView) { super(itemView); } } } private abstract class AnimatorListener implements Animator.AnimatorListener { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }}
到这里就结束啦。
往期精彩回顾:
Android实现短信验证码自动填充功能
Android仿echo精美弹幕功能
Android实现头像重叠排列功能
Android仿QQ个性标签功能
Android仿QQ侧滑删除的功能