RunTextView 滚动的TextView,仿淘宝头条等
2017-12-20 本文已影响0人
A_CUI
废话不多说直接上代码。
水平滚动,类似跑马灯
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 搞定