需求
后台可进行配置标签,前端根据接口返回数据来加载展示,注意标签数量是需要有限制的
代码实现
Java代码
public class LabelView extends LinearLayout {
private Context mContext;
private LayoutParams lps;
private LayoutParams labelLps;
public LabelView(Context context) {
super(context);
initView(context);
}
public LabelView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
initView(context);
}
private void initView(Context context) {
mContext = context;
lps = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT,1);
labelLps = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
public void setData(List<HomeLabelBean> mList){
removeAllViews();
for(int i=0,N=mList.size();i<N;i++){
HomeLabelBean bean = mList.get(i);
View view = LayoutInflater.from(mContext).inflate(R.layout.home_item_label,this,false);
ImageView iv_label = view.findViewById(R.id.iv_label);
TextView tv_label = view.findViewById(R.id.tv_label);
EasyGlide.getInstance().showImage(0,bean.icon,iv_label,-1);
tv_label.setText(bean.describe);
if(i==0){
labelLps.leftMargin = DisplayUtil.dip2px(mContext,6);
}else if(i == N-1){
labelLps.rightMargin = DisplayUtil.dip2px(mContext,6);
}
addView(view,labelLps);
if(i!=N-1){
View cutView = new View(mContext);
addView(cutView,lps);
}
}
}
}
其中home_item_label也很简单,就是一个图片和文字的组合:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:background="@android:color/transparent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="@+id/iv_label"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_gravity="center_vertical"/>
<TextView
android:id="@+id/tv_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:layout_gravity="center_vertical"
style="@style/text_medium_color3_size12"
android:textColor="@color/white"
android:layout_marginStart="5dp"/>
</LinearLayout>
效果如下:
整个组件很简单,无话可说。
网友评论