自定義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"/>