9. 实现ItemView的标签效果
我们在使用电商平台软件的时候，总会看到商品下面会有一些友好提示：打折、双11活动节、打折、满减、自营。这样醒目的字眼，总是吸引我们去消费，他们为月底的花呗额度做出了必要的贡献。它的实现，倒是没什么稀奇的，无非是线性布局LinearLayout结合文本TextView展示的效果。
9.1分析效果图
/**
- A Drawable with a color gradient for buttons, backgrounds, etc.
It can be defined in an XML file with the
<shape>element. For more- information, see the guide to <a
- href=“{@docRoot}guide/topics/resources/drawable-resource.html”>Drawable Resources.
翻译：一种用于按钮、背景等颜色渐变效果需求的图。它可以通过shape元素定义在xml中，这就和我们的静态实现是一致的。
接下来就可以实现圆角的绘制工作了。
说白了就是一个方法，如下：
/**
*
* @param view 目标组件
* @param radius 圆角半径
* @param color 边框颜色
* @param solidColor 背景颜色
*/
private void drawRoundCornerBackground(View view, float radius, @ColorInt int color, @ColorInt int solidColor) {
GradientDrawable gd = new GradientDrawable();//创建drawable
gd.setCornerRadius(radius);
if (solidColor != -1) {
gd.setColor(solidColor); // 注意，如果需要背景渐变效果，可以传入颜色数组，因为gd本来就是处理渐变效果的嘛
}
gd.setStroke(1, color);
view.setBackground(gd);
}
9.2 布局效果实现
首先，我们从效果图中看到，TextView的文本是居中显示的，那么习惯了静态设计的你，是否对动态效果也游刃有余呢？答案是肯定的。居中效果，我们使用textView.setGravity(Gravity.CENTER)完成，边缘布局通过 layoutParams.setMargins(0, 0, rightMargin, 0)完成，单个文本的效果代码实现如下：
TextView textView = new TextView(mContext);
int width = dip2px(mContext, 27);
int height = dip2px(mContext, 15);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(width, height);
int rightMargin = dip2px(mContext, 4);
layoutParams.setMargins(0, 0, rightMargin, 0);
textView.setLayoutParams(layoutParams);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(10);
接着通过在staggered_tab_layout布局文件里添加LinearLayout作为标签的父布局或者叫容器，就可以实现相应效果。代码如下：
9.3 配色效果实现
配色效果，说白了就是根据不同标签的需求，给与相应的显示方案，当然这些不过是对9.1节提到的drawRoundCornerBackground方法的灵活运用。
代码如下：
/**
* 刷新itemView并对其子view填充数据
*
* @param vo
*/
public void onBind(StaggeredVO vo) {
if (!TextUtils.isEmpty(vo.getImgUrl())) {
productImg.setImageURI(Uri.parse(vo.getImgUrl()));
}
if (!TextUtils.isEmpty(vo.getDescription())) {
descriptionText.setText(vo.getDescription());
descriptionText.setVisibility(View.VISIBLE);
} else {
descriptionText.setVisibility(View.GONE);
itemView.setPadding(0, 0, 0, dip2px(mContext, 5));
}
ArrayList<Integer> tags = vo.getPromotionTags();
if (tags != null && tags.size() > 0) {
tabLayout.setVisibility(View.VISIBLE);
tabLayout.removeAllViews();
tabLayout.setBackgroundColor(0);
for (Integer tag : tags) {
TextView textView = new TextView(mContext);
int width = dip2px(mContext, 27);
int height = dip2px(mContext, 15);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(width, height);
int rightMargin = dip2px(mContext, 4);
layoutParams.setMargins(0, 0, rightMargin, 0);
textView.setLayoutParams(layoutParams);
textView.setGravity(Gravity.CENTER);
textView.setTextSize(10);
if (Integer.valueOf(0).equals(tag)) {
textView.setText("自营");
// TextView设置背景色毫无意义，他会被gd.setColor覆盖
// textView.setBackgroundColor(mContext.getResources().getColor(R.color.red_alpha_55_ff0000));
drawRoundCornerBackground(textView, dip2px(mContext, 2),
mContext.getResources().getColor(R.color.red_alpha_55_ff0000),
mContext.getResources().getColor(R.color.red_alpha_55_ff0000));
textView.setTextColor(mContext.getResources().getColor(android.R.color.white));
tabLayout.addView(textView, 0);
} else if (Integer.valueOf(1).equals(tag)) {
textView.setText("好评");
// textView.setBackgroundColor(mContext.getResources().getColor(android.R.color.white));
drawRoundCornerBackground(textView, dip2px(mContext, 2), mContext.getResources().getColor(R.color.red_ff6c00));
textView.setTextColor(mContext.getResources().getColor(R.color.red_ff6c00));
tabLayout.addView(textView);
} else if (Integer.valueOf(2).equals(tag)) {
textView.setText("满减");
// textView.setBackgroundColor(mContext.getResources().getColor(android.R.color.white));
drawRoundCornerBackground(textView, dip2px(mContext, 2), mContext.getResources().getColor(R.color.red_ff0000));
textView.setTextColor(mContext.getResources().getColor(R.color.red_ff0000));
tabLayout.addView(textView);
} else if (Integer.valueOf(3).equals(tag)) {
textView.setText("满折");
// textView.setBackgroundColor(mContext.getResources().getColor(android.R.color.white));
drawRoundCornerBackground(textView, dip2px(mContext, 2), mContext.getResources().getColor(R.color.red_ff0000));
textView.setTextColor(mContext.getResources().getColor(R.color.red_ff0000));
tabLayout.addView(textView);
}
if (tabLayout.getChildCount() > 4) { // 最多显示4个标签，自营必须显示，且在第一个位置
tabLayout.removeViewAt(4);
}
}
}
}
private void drawRoundCornerBackground(View view, float radius, @ColorInt int color) {
GradientDrawable gd = new GradientDrawable();//创建drawable
gd.setCornerRadius(radius);
gd.setStroke(1, color);
view.setBackground(gd);
}
/**
*
* @param view 目标组件
* @param radius 圆角半径
* @param color 边框颜色
* @param solidColor 背景颜色
*/
private void drawRoundCornerBackground(View view, float radius, @ColorInt int color, @ColorInt int solidColor) {
GradientDrawable gd = new GradientDrawable();//创建drawable
gd.setCornerRadius(radius);
if (solidColor != -1) {
gd.setColor(solidColor);
}
gd.setStroke(1, color);
view.setBackground(gd);
}
9.4 更改StaggeredVO匹配标签数据
在模型中需要添加promotionTags字段已匹配来自服务端的标签数据，因为标签可能有多个，所以会以数组的形式给出，代码如下：
public class StaggeredVO implements Serializable {
private String price;
private String description;
private String imgUrl;
private ArrayList<Integer> promotionTags;
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl = imgUrl;
}
public ArrayList<Integer> getPromotionTags() {
return promotionTags;
}
public void setPromotionTags(ArrayList<Integer> promotionTags) {
this.promotionTags = promotionTags;
}
}
最后，由于目前没有服务器数据，不要忘了模拟数据哦~
诗云：
扫一扫
2509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
