自定义view：信息飘窗/弹幕——AutoSwitchTextView

实现背景

项目中，闪购页面 用于自动切换 展示 购买信息，就是那种 “xxx 10s 买了huawei p30 ” 然后自动翻滚上去，接着底部向上滑出下一条。效果如下图。（感觉有点像连续多个Toast）    也可参考小红书的闪购页面~

即，从下面较快的出现，停留展示一会，在缓慢的向上滑出。

实现思路

一开始想的是，使用TextSwitcher实现，因为之前做过类似的文字切换。但效果给UI看后表示不行。因为要参考小红书的效果来，就去瞅了瞅。特点是 文字是一条一条的出现，而TextSwitcher是连着两个Text进行翻转。所以考虑自定义，使用属性动画来实现。

代码

代码很简单，有注释。在代码中调用

//显示飘窗
mAutoSwitchTextView.setData(list); 

即可展示出来。

/**
 * @apiNote 自动向上翻滚的view，用于信息展示~
 * @author hufy
 * @date 2019/7/4 17:34
 */
public class AutoSwitchTextView extends RelativeLayout {

    /**
     * 展示的数据
     */
    private List<FlashBuyerInfo.Buyer> dataList = new ArrayList<>();

    /**
     * 用于翻滚的textView
     */
    private TextView mTextView;

    /**
     * index
     */
    private int index = 0;

    /**
     * 动画集合
     */
    private AnimatorSet mAnimatorSet;

    public AutoSwitchTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        mTextView = new TextView(context);
        mTextView.setTextColor(ResUtil.getColor(R.color.common_color_ffffff));
        mTextView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 10);
        mTextView.setBackgroundResource(R.drawable.text_switch_bg);
        mTextView.setPadding(CommonUtils.dip2px(8), 0 ,CommonUtils.dip2px(8) ,0);
        mTextView.setGravity(Gravity.CENTER);
        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        addView(mTextView, layoutParams);
    }

    /**
     * 设置要展示的数据，会自动开始翻滚。
     * @param dataList
     */
    public void setData(List<FlashBuyerInfo.Buyer> dataList){
        this.dataList = dataList;
        setVisibility(View.VISIBLE);
        start();
    }

    /**
     * 快速向上滑动text、停留展示、向上滑出、等待x 秒后 继续下一个text 。
     */
    private void start(){

        int size = dataList.size();
        index = 0;
        setTextInfo(index);

        mAnimatorSet = new AnimatorSet();

        //从底部出现
        ObjectAnimator showAnimator = ObjectAnimator.ofFloat(mTextView, "translationY", 100, 0);
        showAnimator.setDuration(500);

        //向上滑出
        ObjectAnimator outAnimator = ObjectAnimator.ofFloat(mTextView, "translationY", 0, -100);
        outAnimator.setDuration(1000);
        outAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                //动画结束后，继续下一个
                index++;
                if (index <= size - 1){
                    setTextInfo(index);
                    long nextPopupTime = getNextPopupTime(index);
                    mAnimatorSet.play(outAnimator).after(1500).after(showAnimator);
                    mAnimatorSet.setStartDelay(nextPopupTime);
                    mAnimatorSet.start();
                }
            }
        });

        mAnimatorSet.play(outAnimator).after(1500).after(showAnimator);
        mAnimatorSet.start();
    }

    /**
     * 结束动画
     */
    public void finish(){
        if (mAnimatorSet != null) {
            mAnimatorSet.end();
        }
    }

    /**
     * 获取 等待多久后 继续下一条弹窗
     * @param index
     * @return
     */
    private long getNextPopupTime(int index) {
        FlashBuyerInfo.Buyer buyer = dataList.get(index);
        return buyer.getNextPopupTime() * 1000;
    }


    /**
     *  设置文字、图片
     * @param index
     */
    private void setTextInfo(int index) {
        FlashBuyerInfo.Buyer buyer = dataList.get(index);
        String text = buyer.getText();
        mTextView.setText(text);
    }


}

xml中使用 很简单：

    <AutoSwitchTextView
        android:id="@+id/flash_sale_auto_switch_text"
        android:layout_marginTop="250dp"
        android:layout_marginLeft="@dimen/aku_margin_8"
        android:layout_width="wrap_content"
        android:layout_height="24dp"
        android:gravity="center"/>