美文网首页程序员
RunTextView 滚动的TextView,仿淘宝头条等

RunTextView 滚动的TextView,仿淘宝头条等

作者: A_CUI | 来源:发表于2017-12-20 17:43 被阅读0次

废话不多说直接上代码。

水平滚动,类似跑马灯

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);
    }


    /**
     * 设置循环滚动的View数组
     *
     * @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;
            //设置监听回调
            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;

    /**
     * 设置监听接口
     * @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>

实现代码:

 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);

            /**
             * 设置监听
             */
            moreView.findViewById(R.id.rl).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                }
            });
            /**
             * 设置监听
             */
            moreView.findViewById(R.id.rl2).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                }
            });
            //进行对控件赋值
            tv1.setText("五一欢乐与您共享,XX节能高清惊喜大促销。");
            if (size > i + 1) {
                //因为淘宝那儿是两条数据,但是当数据是奇数时就不需要赋值第二个,所以加了一个判断,还应该把第二个布局给隐藏掉
                tv2.setText("五一充值送机,你准备好了吗?");
            } else {
                moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
            }

            //添加到循环滚动数组里面去
            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 搞定

相关文章

网友评论

    本文标题:RunTextView 滚动的TextView,仿淘宝头条等

    本文链接:https://www.haomeiwen.com/subject/zawgwxtx.html