继承FlexboxLayout自定义可自动换行的tag标签

左手的ㄟ右手 2022-12-03 12:50 94阅读 0赞

实现效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA_size_16_color_FFFFFF_t_70][]

通过继承自FlexboxLayout实现，Java代码：

package org.test;
    
    import android.content.Context;
    import android.graphics.Color;
    import android.graphics.drawable.GradientDrawable;
    import android.util.AttributeSet;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    import androidx.annotation.NonNull;
    import androidx.annotation.Nullable;
    
    import com.google.android.flexbox.FlexDirection;
    import com.google.android.flexbox.FlexWrap;
    import com.google.android.flexbox.FlexboxLayout;
    import com.google.android.flexbox.JustifyContent;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class TagGroup extends FlexboxLayout {
        private List<String> mTexts;
        private List<Integer> mColors;
        private Context mContext;
        private int TAG_VIEW_COUNT = 0;
    
        public TagGroup(Context context, AttributeSet attrs) {
            super(context, attrs);
            mContext = context;
            init();
        }
    
        private void init() {
            mTexts = new ArrayList<>();
            mColors = new ArrayList<>();
    
            this.setFlexDirection(FlexDirection.ROW);
            this.setJustifyContent(JustifyContent.FLEX_START);
            this.setFlexWrap(FlexWrap.WRAP);
        }
    
        public void setTagView(@NonNull List<String> texts, @Nullable List<Integer> colors) {
            if (texts == null || texts.size() == 0) {
                throw new RuntimeException("tag view文本字段不能为空");
            }
    
            this.mTexts = texts;
            TAG_VIEW_COUNT = texts.size();
    
            if (colors == null || colors.size() == 0) {
                for (int i = 0; i < TAG_VIEW_COUNT; i++) {
                    mColors.clear();
                    mColors.add(Color.WHITE);
                }
            } else {
                this.mColors = colors;
            }
    
            this.removeAllViews();
    
            for (int i = 0; i < TAG_VIEW_COUNT; i++) {
                TextView textView = makeTextView(mTexts.get(i), mColors.get(i));
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
                //设置每一个子View在整体布局中与其他子View的上下左右的margin
                layoutParams.setMargins(0, 1, 5, 1);
    
                this.addView(textView, layoutParams);
            }
    
            this.invalidate();
        }
    
        //绘制圆角描边的TextView
        private TextView makeTextView(String s, Integer c) {
            TextView textView = new TextView(mContext);
            textView.setText(s);
            textView.setPadding(10, 5, 10, 5);
    
            int strokeWidth = 5; // 5px
            int roundRadius = 15; // 15px
            int strokeColor = Color.GRAY;
            int fillColor = c;
    
            GradientDrawable gd = new GradientDrawable();
            gd.setColor(fillColor);
            gd.setCornerRadius(roundRadius);
            gd.setStroke(strokeWidth, strokeColor);
    
            textView.setBackground(gd);
    
            return textView;
        }
    }

使用方式，把TagGroup当作一个普通布局使用，写入xml布局：

<org.test.TagGroup
            android:id="@+id/tag_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

然后在上层，通过set方式，添加子tag标签实现：

TagGroup tagGroup = findViewById(R.id.tag_group);
            List<String> texts = Arrays.asList("zhang", "phil", "csdn", "android", "zhang", "phil", "csdn", "android", "zhang", "phil", "csdn", "android");
            List<Integer> colors = Arrays.asList(Color.RED, Color.DKGRAY, Color.BLUE, Color.RED, Color.DKGRAY, Color.BLUE, Color.RED, Color.DKGRAY, Color.BLUE, Color.RED, Color.DKGRAY, Color.BLUE);
            tagGroup.setTagView(texts, colors);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5ncGhpbA_size_16_color_FFFFFF_t_70]: /images/20221123/9457e9541dc540e1b4d0798e9a5079d3.png