Android UI learning NoticeView realizes text carousel effect

Today I made 500 from moving bricks. You think I will give you 450, and then save 50 for instant noodles.
Do not! ! ! Your pattern is smaller! ! !
I will borrow another 20 from my friends to make 520 for you.

—Guangzhou · 14℃ · Cloudy · When the sky is dark, you are the sun~

Show results

Insert picture description here

How to achieve?

First of all, thank the author who wrote the NoticeView control, GitHub Portal: https://github.com/czy1121/noticeview , friends who like it can click star for him.

To make it easier for everyone to use, post the control source code below and copy it directly to use it:

  • For the attributes of the NoticeView control, define an attrs.xml file under the res/values ​​file, the code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="NoticeView">
        <!-- 图标 -->
        <attr name="nvIcon" format="reference"/>
        <!-- 图标与内容的间隙 -->
        <attr name="nvIconPadding" format="dimension"/>
        <!-- 图标颜色 -->
        <attr name="nvIconTint" format="color"/>

        <!-- 文本尺寸 -->
        <attr name="nvTextSize" format="dimension"/>
        <!-- 文本颜色 -->
        <attr name="nvTextColor" format="color"/>
        <!-- 文本最大行数 -->
        <attr name="nvTextMaxLines" format="integer"/>
        <!-- 文本对齐方式 -->
        <attr name="nvTextGravity" format="integer">
            <enum name="left" value="3"/>
            <enum name="center" value="17"/>
            <enum name="right" value="5"/>
        </attr>

        <!-- 切换动画间隔时间,毫秒 -->
        <attr name="nvInterval" format="integer"/>
        <!-- 切换动画持续时间,毫秒 -->
        <attr name="nvDuration" format="integer"/>
    </declare-styleable>


</resources>
  • NoticeView source code:
public class NoticeView extends TextSwitcher {
    
    

    private Animation mInUp = anim(1.5f, 0);
    private Animation mOutUp = anim(0, -1.5f);

    private List<String> mDataList = new ArrayList<>();

    private int mIndex = 0;
    private int mInterval = 4000;
    private int mDuration = 900;

    private Drawable mIcon;
    private int mIconTint = 0xff999999;
    private int mIconPadding = 0;
    private int mPaddingLeft = 0;

    private boolean mIsVisible = false;
    private boolean mIsStarted = false;
    private boolean mIsResumed = true;
    private boolean mIsRunning = false;
    private final TextFactory mDefaultFactory = new TextFactory();
    private final Runnable mRunnable = new Runnable() {
    
    
        @Override
        public void run() {
    
    
            if (mIsRunning) {
    
    
                show(mIndex + 1);
                postDelayed(mRunnable, mInterval);
            }
        }
    };

    public NoticeView(Context context) {
    
    
        this(context, null);
    }

    public NoticeView(Context context, AttributeSet attrs) {
    
    
        super(context, attrs);
        initWithContext(context, attrs);
        setInAnimation(mInUp);
        setOutAnimation(mOutUp);
        setFactory(mDefaultFactory);
        mInUp.setDuration(mDuration);
        mOutUp.setDuration(mDuration);
    }

    private void initWithContext(Context context, AttributeSet attrs) {
    
    
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.NoticeView);
        mIcon = a.getDrawable(R.styleable.NoticeView_nvIcon);
        mIconPadding = (int)a.getDimension(R.styleable.NoticeView_nvIconPadding, 0);

        boolean hasIconTint = a.hasValue(R.styleable.NoticeView_nvIconTint);

        if (hasIconTint) {
    
    
            mIconTint = a.getColor(R.styleable.NoticeView_nvIconTint, 0xff999999);
        }

        mInterval = a.getInteger(R.styleable.NoticeView_nvInterval, 4000);
        mDuration = a.getInteger(R.styleable.NoticeView_nvDuration, 900);

        mDefaultFactory.resolve(a);
        a.recycle();

        if (mIcon != null) {
    
    
            mPaddingLeft = getPaddingLeft();
            int realPaddingLeft = mPaddingLeft + mIconPadding + mIcon.getIntrinsicWidth();
            setPadding(realPaddingLeft, getPaddingTop(), getPaddingRight(), getPaddingBottom());

            if (hasIconTint) {
    
    
                mIcon = mIcon.mutate();
                DrawableCompat.setTint(mIcon, mIconTint);
            }
        }
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
    
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mIcon != null) {
    
    
            int y = (getMeasuredHeight() - mIcon.getIntrinsicWidth()) / 2;
            mIcon.setBounds(mPaddingLeft, y, mPaddingLeft + mIcon.getIntrinsicWidth(), y + mIcon.getIntrinsicHeight());
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
    
    
        super.onDraw(canvas);
        if (mIcon != null) {
    
    
            mIcon.draw(canvas);
        }
    }

    public int getIndex() {
    
    
        return mIndex;
    }

    public void start(List<String> list) {
    
    
        mDataList = list;
        if (mDataList == null || mDataList.size() < 1) {
    
    
            mIsStarted = false;
            update();
        } else {
    
    
            mIsStarted = true;
            update();
            show(0);
        }
    }

    @Override
    protected void onDetachedFromWindow() {
    
    
        super.onDetachedFromWindow();
        mIsVisible = false;
        update();
    }

    @Override
    protected void onWindowVisibilityChanged(int visibility) {
    
    
        super.onWindowVisibilityChanged(visibility);
        mIsVisible = visibility == VISIBLE;
        update();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
    
    
        int action = ev.getAction();
        switch (action) {
    
    
        case MotionEvent.ACTION_DOWN:
            mIsResumed = false;
            update();
            break;
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            mIsResumed = true;
            update();
            break;

        }
        return super.dispatchTouchEvent(ev);
    }

    private void update() {
    
    
        boolean running = mIsVisible && mIsResumed && mIsStarted;
        if (running != mIsRunning) {
    
    
            if (running) {
    
    
                postDelayed(mRunnable, mInterval);
            } else {
    
    
                removeCallbacks(mRunnable);
            }
            mIsRunning = running;
        }
        Log.e("ezy", "update() visible=" + mIsVisible + ", started=" + mIsStarted + ", running=" + mIsRunning);
    }

    private void show(int index) {
    
    
        mIndex = index % mDataList.size();
        setText(Html.fromHtml(mDataList.get(mIndex)));
    }

    private Animation anim(float from, float to) {
    
    
        final TranslateAnimation anim = new TranslateAnimation(0, 0f, 0, 0f, Animation.RELATIVE_TO_PARENT, from, Animation.RELATIVE_TO_PARENT, to);
        anim.setDuration(mDuration);
        anim.setFillAfter(false);
        anim.setInterpolator(new LinearInterpolator());
        return anim;
    }

    class TextFactory implements ViewFactory {
    
    
        DisplayMetrics dm = getContext().getResources().getDisplayMetrics();

        float size = dp2px(14);
        int color = 1;
        int lines = 1;
        int gravity = Gravity.LEFT;

        void resolve(TypedArray ta) {
    
    
            lines = ta.getInteger(R.styleable.NoticeView_nvTextMaxLines, lines);
            size = ta.getDimension(R.styleable.NoticeView_nvTextSize, size);
            color = ta.getColor(R.styleable.NoticeView_nvTextColor, color);
            gravity = ta.getInteger(R.styleable.NoticeView_nvTextGravity, gravity);
        }

        private int dp2px(float dp) {
    
    
            return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, dm);
        }
        @Override
        public View makeView() {
    
    
            TextView tv = new TextView(getContext());
            tv.setTextSize(TypedValue.COMPLEX_UNIT_PX, size);
            tv.setMaxLines(lines);
            if (color != 1) {
    
    
                tv.setTextColor(color);
            }
            tv.setEllipsize(TextUtils.TruncateAt.END);
            tv.setGravity(Gravity.CENTER_VERTICAL | gravity);
            tv.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            return tv;
        }
    }
}

It's very simple to use:


        final String[] test = new String[]{
    
    
                "须知少时凌云志,",
                "曾许人间第一流。",
                "哪晓岁月蹉跎过,",
                "依然名利两无收。"
        };
        noticeView = findViewById(R.id.nv_notice);
        noticeView.start(Arrays.asList(test));
        noticeView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                // TODO: 2021/3/21  
                Toast.makeText(XXActivity.this, test[noticeView.getIndex()], Toast.LENGTH_SHORT).show();
            }
        });
        

But it should be noted that if the setOnClickListenerclick event is not set for NoticeView , then 当NoticeView在轮播时被点击后会出现暂停现象,并且它也不会自动恢复轮播,无论再怎么点击NoticeView,它都会一直处于停止状态.
If the NoticeView is only used to display the information carousel and does not need to monitor its click event, it can be dispatchTouchEvent()deleted in the NoticeView .

Thank you very much for seeing here, it would be my honor to help you!

Guess you like

Origin blog.csdn.net/qq_36270361/article/details/115048571