在实际开发中我们有各式各样的UI效果下面我给你展示一下我的这个字体轮播
先看效果
效果
首先它是自定位View实现的看代码
public class RxTextViewVerticalMore 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);
}
}
这里面用到了两个动画资源
自己创建文件夹
<?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>
<?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>
使用在自己的Activity或fragment里面自己定义即可
<com.example.t.app.live.fragment.RxTextViewVerticalMore
android:id="@+id/upview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="10dp" />
代码里面
public void initView() {
List<View> views = new ArrayList<>();
setUPMarqueeView(views, 11);
upview1.setViews(views);
}
private void setUPMarqueeView(List<View> views, int size) {
for (int i = 0; i < size; i = i + 2) {
final int position = i;
//设置滚动的单个布局
LinearLayout moreView = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.item_view, null);
//初始化布局的控件
TextView tv1 = moreView.findViewById(R.id.tv1);
TextView tv2 = 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("五一欢乐与您共享，ＸＸ节能高清惊喜大促销。");
if (size > i + 1) {
//因为淘宝那儿是两条数据，但是当数据是奇数时就不需要赋值第二个，所以加了一个判断，还应该把第二个布局给隐藏掉
tv2.setText("五一充值送机，你准备好了吗？");
} else {
moreView.findViewById(R.id.rl2).setVisibility(View.GONE);
}
//添加到循环滚动数组里面去
views.add(moreView);
}
}
item_view里面的那个最新我是用的文字也可以是图片
<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:layout_marginRight="6dp"
android:background="@drawable/textview_border"
android:padding="3dp"
android:text="最新"
android:textColor="@color/red"
android:textSize="9sp" />
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/title_tv1"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/black"
android:textSize="14sp" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/title_tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dp"
android:background="@drawable/textview_border"
android:padding="3dp"
android:text="最新"
android:textColor="@color/red"
android:textSize="9sp" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/title_tv2"
android:ellipsize="end"
android:maxLines="1"
android:textColor="@color/black"
android:textSize="14sp" />
</RelativeLayout>
红色边框效果字体文件
<?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>
本文属于原创如有转载请附上原地址
https://www.jianshu.com/p/a93b0bd69c77
网友评论