Android 上下滚动(跑马灯)效果实现

产品的有个需求是 文字上下滚动,第一想到的是用属性动画实现,2个TextView 切换滚动,网上看了一堆资料大部分都是 TextSwitch,写博客不贴效果图真的是很惆怅,不知道具体效果如何,第一次进入切换是否有问题,还有就是最后一个切换到第二个是否有问题,动画是否流畅等,啥都看不到。所以还是按照第一个想法,找到了类似的做法,但是好像有点问题,于是修改一番,效果图如下:(gif帧率有点低,不是很顺畅,真机上挺好的)

思路就是2个TextView 利用属性动画上下切换,延迟发送线程触发下次滚动。

代码如下:

1.ScrrollTextView.java

import android.animation.ObjectAnimator;
import android.content.Context;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.lanjinger.choiassociatedpress.R;

import java.util.List;

/**
 * 上下滚动的 textView
 */
public class ScrollTextView extends LinearLayout {
    private TextView mBannerTV1;
    private TextView mBannerTV2;
    private Handler handler;
    private boolean isShow = false;
    private int startY1, endY1, startY2, endY2;
    private Runnable runnable;
    private List<String> list;
    private int position = 0;
    private int offsetY = 100;
    private boolean hasPostRunnable = false;

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

    public ScrollTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScrollTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        View view = LayoutInflater.from(context).inflate(R.layout.widget_scroll_text_layout, this);
        mBannerTV1 = view.findViewById(R.id.tv_banner1);
        mBannerTV2 = view.findViewById(R.id.tv_banner2);
        handler = new Handler();
        runnable = new Runnable() {
            @Override
            public void run() {
                isShow = !isShow;
                if (position == list.size() - 1) {
                    position = 0;
                }

                if (isShow) {
                    mBannerTV1.setText(list.get(position++));
                    mBannerTV2.setText(list.get(position));
                } else {
                    mBannerTV2.setText(list.get(position++));
                    mBannerTV1.setText(list.get(position));
                }

                startY1 = isShow ? 0 : offsetY;
                endY1 = isShow ? -offsetY : 0;
                ObjectAnimator.ofFloat(mBannerTV1, "translationY", startY1, endY1).setDuration(300).start();

                startY2 = isShow ? offsetY : 0;
                endY2 = isShow ? 0 : -offsetY;
                ObjectAnimator.ofFloat(mBannerTV2, "translationY", startY2, endY2).setDuration(300).start();

                handler.postDelayed(runnable, 3000);
            }
        };
    }

    public List<String> getList() {
        return list;
    }

    public void setList(List<String> list) {
        this.list = list;

        //处理最后一条数据切换到第一条数据 太快的问题
        if (list.size() > 1) {
            list.add(list.get(0));
        }
    }

    public void startScroll() {
        mBannerTV1.setText(list.get(0));
        if (list.size() > 1) {
            if(!hasPostRunnable) {
                hasPostRunnable = true;
                //处理第一次进入 第一条数据切换第二条 太快的问题
                handler.postDelayed(runnable,3000);
            }
        } else {
            //只有一条数据不进行滚动
            hasPostRunnable = false;
//            mBannerTV1.setText(list.get(0));
        }
    }

    public void stopScroll() {
        handler.removeCallbacks(runnable);
        hasPostRunnable = false;
    }


}

注意点:1.就是开启和关闭滚动,都需要在控件外面控制。如果需要在控件内部自行控制也可以,

onAttachedToWindow 这里开启线程,注意判断列表是否为空。

2.当列表数据大于1条是,我会手动在后面再加上第一条数据,为了避免,最后一条切换到一条是滚动太快(即动效不明显的问题),我这里没有判空,因为传递过来是一定有数据的,为了严瑾可以加上判空.


2.widget_scroll_text_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_banner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/skin_common_title"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/tv_banner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/skin_common_title"
        android:textSize="12sp" />

</RelativeLayout>

3.具体调用

        ScrollTextView marqueeText = headView.findViewById(R.id.xxxx);

        List<String> demographicsList = new ArrayList<>();

        demographicsList.add("今日测试股票 上市");
        demographicsList.add("今日科伦药业 中国人保 可申购");
        demographicsList.add("今日中国平安 上市");

        marqueeText.setList(demographicsList);
        marqueeText.startScroll();

注意:正确处理生命周期的问题,什么时候调用starScroll(),什么时候调用stopScroll(),根据具体的生命周期而定;


尾:

感觉这样写想要啥动效都可以自行定义,更具需求定制属性动画就好了,也不需要多余的new TextView();简单的看了下,好像TextSwitch 要麻烦点。

今日任务做完,研究 TextSwitch 去,对比下2者的优缺点;

猜你喜欢

转载自blog.csdn.net/android_freshman/article/details/84105637