RunTextView 滾動的TextView，仿淘寶頭條等

廢話不多說直接上代碼。

水平滾動，類似跑馬燈

import android.content.Context;
import android.support.v7.widget.AppCompatTextView;
import android.util.AttributeSet;
import android.view.ViewDebug;

public class RunTextView extends AppCompatTextView {
    public RunTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public RunTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public RunTextView(Context context) {
        super(context);
    }

    /**
     * 當前并沒有焦點
     */
    @Override
    @ViewDebug.ExportedProperty(category = "focus")
    public boolean isFocused() {
        return true;
    }
}

下面的是布局文件

<com.cwq.view.RunTextView
        android:id="@+id/tv_runTextView"
        android:layout_width="match_parent"  //寬度可以自定義
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:ellipsize="marquee"
        android:focusable="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:scrollHorizontally="true"
        android:singleLine="true"
        android:text="我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，我愛我的祖國，…"
        android:textColor="#7a583e"/>

仿淘寶頭條：

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;


import com.vondear.rxtools.R;

import java.util.List;

/**
 * 仿淘寶首頁的 淘寶頭條滾動的自定義View
 *
 */
public class TextViewVerticalMore extends ViewFlipper {

    private Context mContext;
    private boolean isSetAnimDuration = false;
    private int interval = 5000;
    /**
     * 動畫時間
     */
    private int animDuration = 500;

    public RxTextViewVerticalMore(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        this.mContext = context;
        setFlipInterval(interval);
        Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
        if (isSetAnimDuration) animIn.setDuration(animDuration);
        setInAnimation(animIn);
        Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
        if (isSetAnimDuration) animOut.setDuration(animDuration);
        setOutAnimation(animOut);
    }


    /**
     * 設置循環(huán)滾動的View數(shù)組
     *
     * @param views
     */
    public void setViews(final List<View> views) {
        if (views == null || views.size() == 0) return;
        removeAllViews();
        for ( int i = 0; i < views.size(); i++) {
            final int position=i;
            //設置監(jiān)聽回調(diào)
            views.get(i).setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onItemClickListener != null) {
                        onItemClickListener.onItemClick(position, views.get(position));
                    }
                }
            });
            addView(views.get(i));
        }
        startFlipping();
    }

    /**
     * 點擊
     */
    private OnItemClickListener onItemClickListener;

    /**
     * 設置監(jiān)聽接口
     * @param onItemClickListener
     */
    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }

    /**
     * item_view的接口
     */
    public interface OnItemClickListener {
        void onItemClick(int position, View view);
    }
}

anim_marquee_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromYDelta="100%p"
        android:toYDelta="0"/>
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"/>
</set>

anim_marquee_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="400"
        android:fromYDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>
</set>

實現(xiàn)代碼：

 TextViewVerticalMore mUpview1;
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      mUpview1 = (TextViewVerticalMore)findViewById(R.id.upview1);
      List<View> views = new ArrayList<>();//存放需要滾動的list
      int size = 11；
      for (int i = 0; i < size; i = i + 2) {
            final int position = i;
            //設置滾動的單個布局
            LinearLayout moreView = (LinearLayout)           LayoutInflater.from(mContext).inflate(R.layout.item_view, null);
            //初始化布局的控件
            TextView tv1 = (TextView) moreView.findViewById(R.id.tv1);
            TextView tv2 = (TextView) moreView.findViewById(R.id.tv2);

            /**
             * 設置監(jiān)聽
             */
            moreView.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                }
            });
            /**
             * 設置監(jiān)聽
             */
            moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                }
            });
            //進行對控件賦值
            tv1.setText("五一歡樂與您共享，ＸＸ節(jié)能高清驚喜大促銷。");
            if (size > i + 1) {
                //因為淘寶那兒是兩條數(shù)據(jù)，但是當數(shù)據(jù)是奇數(shù)時就不需要賦值第二個，所以加了一個判斷，還應該把第二個布局給隱藏掉
                tv2.setText("五一充值送機，你準備好了嗎？");
            } else {
                moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
            }

            //添加到循環(huán)滾動數(shù)組里面去
            views.add(moreView);
        }
 mUpview1.setViews(views);
}

布局文件：

<com.cwq.view.TextViewVerticalMore
        android:id="@+id/upview1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"/>

item_view.xml

  <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/title_tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="熱議"
            android:textSize="9sp"
            android:padding="3dp"
            android:background="@drawable/textview_border"
            android:layout_marginRight="6dp"
            android:textColor="@color/red" />

        <TextView
            android:id="@+id/tv1"
            android:textColor="@color/black"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/title_tv1"
            android:ellipsize="end"
            android:textSize="14sp"
            android:maxLines="1" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl2"
        android:layout_width="match_parent"
        android:layout_marginTop="5dp"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/title_tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="熱評"
            android:padding="3dp"
            android:textSize="9sp"
            android:background="@drawable/textview_border"
            android:layout_marginRight="6dp"
            android:textColor="@color/red" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/title_tv2"
            android:textColor="@color/black"
            android:ellipsize="end"
            android:textSize="14sp"
            android:maxLines="1" />
    </RelativeLayout>

textview_border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFFFF" />
    <stroke android:width="1dip" android:color="@color/red" />
    <corners
        android:radius="2dp"
       />
</shape>

OK 搞定

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容