自定义android爱情标签

看了高中同学发朋友圈的婚纱照，即将结束奔跑十年的爱情。除了祝福和羡慕以外，一股柠檬酸油然而生。十年的爱情奔跑，是一种什么体验，没经历过，未可得知。但是两年的感情经历还是有点话语权的，相识、相知、却不能相守下去，无疑结局是一个不完整的句号。或许不完整才是人生吧。

听我哔哔了这么久，今天我想要记录的是标签选择功能。实现的效果如下：

源代码地址：github上源码

其实就是使用FlexboxLayout布局，依赖

 implementation 'com.google.android:flexbox:0.3.0-alpha2'//流式布局

activity_label.xml 文件配置如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff282729"
    tools:context="com.lqg.Image.LabelActivity">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/selected_flex_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:alignItems="center"
        app:flexDirection="row"
        app:flexWrap="wrap"
        app:justifyContent="flex_start"
        app:layout_constraintTop_toTopOf="parent"
        app:showDivider="beginning|middle">

    </com.google.android.flexbox.FlexboxLayout>

    <View
        android:id="@+id/line_view"
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_marginStart="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        android:background="@color/share_line_bg_color"
        app:layout_constraintTop_toBottomOf="@+id/selected_flex_layout" />

    <TextView
        android:id="@+id/label_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="推荐关键词"
        android:textColor="@color/normal_text_color"
        android:textSize="12sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/line_view" />

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/unselected_flex_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        app:alignItems="center"
        app:flexDirection="row"
        app:flexWrap="wrap"
        app:justifyContent="flex_start"
        app:layout_constraintTop_toBottomOf="@+id/label_title"
        app:showDivider="beginning|middle">

    </com.google.android.flexbox.FlexboxLayout>

</android.support.constraint.ConstraintLayout>

FlexboxLayout布局的一些知识点如下：

flexDirection表示主轴的项目的排列方向:

• row（默认值）：主轴为水平方向，起点在左端。
• row_reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column_reverse：主轴为垂直方向，起点在下沿。

flexWrap属性可以支持换行排列:

• nowrap （默认）：不换行。
• wrap：按正常方向换行。
• wrap_reverse：按反方向换行。

justifyContent 属性定义了项目在主轴上的对齐方式:

• flex_start（默认值）：左对齐。
• flex_end ：右对齐。
• center ： 居中。
• space_between ：两端对齐，项目之间的间隔都相等。
• space_around ：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。

alignItems 属性定义项目在副轴轴上如何对齐:

• flex_start：交叉轴的起点对齐。
• flex_end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

更多知识点请看写的很不错的文章Android FlexboxLayout 布局详解

动态生成标签：

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_label);
        initView();
        initLabelData();
        initselectLabelData();
    }
      private void initLabelData() {
        unSelectedFlexLayout.removeAllViews();
        for (int i = 0; i < labelData.size(); i++) {
            TextView textView = ScreenUtils.createFlexItemView(LabelActivity.this,  labelData.get(i), false);
            textView.setLayoutParams(ScreenUtils.createDefaultLayoutParams());
            unSelectedFlexLayout.addView(textView);
            final int finalI = i;
            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    selectLabelData.add(labelData.get(finalI));
                    labelData.remove(labelData.get(finalI));
                    initselectLabelData();
                    initLabelData();
                }
            });
        }
    }

    private void initselectLabelData() {
        selectedFlexLayout.removeAllViews();
        for (int i = 0; i < selectLabelData.size(); i++) {
            TextView textView = ScreenUtils.createFlexItemView(LabelActivity.this,  selectLabelData.get(i), true);
            final int finalI = i;
            textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    String content = selectLabelData.get(finalI);
                    labelData.add(content);
                    selectLabelData.remove(content);
                    initselectLabelData();
                    initLabelData();
                }
            });
            textView.setLayoutParams(ScreenUtils.createDefaultLayoutParams());
            selectedFlexLayout.addView(textView);
        }
        addEditLabel();
    }

动态添加一个标签item

    /**
     * @param content  内容
     * @param selected 是否被选中
     *
     */
    public static TextView createFlexItemView(Context context, String content, boolean selected) {
        TextView textView = new TextView(context);
        textView.setTextSize(12);
        textView.setPadding(30, 10, 30, 10);
        if (selected) {
            textView.setText(content + " ×");
            textView.setTextColor(context.getResources().getColor(R.color.btn_text_color));
            textView.setBackgroundResource(R.drawable.corner_13_bg);
        } else {
            textView.setText(content);
            textView.setTextColor(context.getResources().getColor(R.color.normal_text_color));
            textView.setBackgroundResource(R.drawable.corner_13_light_black_bg);
        }
        textView.setClickable(true);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }

selected true 表示已选的标签，false 表示未选标签。

addEditLabel方法表示在已选标签末尾添加编辑框：

  private void addEditLabel() {
        View view = LayoutInflater.from(LabelActivity.this).inflate(R.layout.label_edt_item, null);
        editLabelET = view.findViewById(R.id.lable_tip_et);
        FlexboxLayout.LayoutParams lp = new FlexboxLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        lp.setMargins(0, SizeUtils.dp2px(8), SizeUtils.dp2px(8), 0);
        editLabelET.setLayoutParams(lp);
        selectedFlexLayout.addView(editLabelET);
        editLabelET.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
                if (actionId == EditorInfo.IME_ACTION_DONE) {
                    String content = editLabelET.getText().toString().trim().replace(" ", "");
                    if (!isRepaetContent(content)) {
                        selectLabelData.add(content);
                        initselectLabelData();
                    }
                }
                return false;
            }
        });
    }

actionId == EditorInfo.IME_ACTION_DONE 监听键盘完成按钮。之后添加一个标签selectLabelData.add(content);动态生成 initselectLabelData();

更多代码请看github上源码