自定義android愛情標籤

看了高中同窗發朋友圈的婚紗照，即將結束奔跑十年的愛情。除了祝福和羨慕之外，一股檸檬酸油然而生。十年的愛情奔跑，是一種什麼體驗，沒經歷過，未可得知。可是兩年的感情經歷仍是有點話語權的，相識、相知、卻不能相守下去，無疑結局是一個不完整的句號。或許不完整纔是人生吧。android

聽我嗶嗶了這麼久，今天我想要記錄的是標籤選擇功能。實現的效果以下：git

源代碼地址：github上源碼github

其實就是使用FlexboxLayout佈局，依賴bash

implementation 'com.google.android:flexbox:0.3.0-alpha2'//流式佈局
複製代碼

activity_label.xml 文件配置以下：markdown

<?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表示主軸的項目的排列方向:app

row（默認值）：主軸爲水平方向，起點在左端。
row_reverse：主軸爲水平方向，起點在右端。
column：主軸爲垂直方向，起點在上沿。
column_reverse：主軸爲垂直方向，起點在下沿。

flexWrap屬性能夠支持換行排列:ide

nowrap （默認）：不換行。
wrap：按正常方向換行。
wrap_reverse：按反方向換行。

justifyContent 屬性定義了項目在主軸上的對齊方式:oop

flex_start（默認值）：左對齊。
flex_end ：右對齊。
center ：居中。
space_between ：兩端對齊，項目之間的間隔都相等。
space_around ：每一個項目兩側的間隔相等。項目之間的間隔比項目與邊框的間隔大一倍。

alignItems 屬性定義項目在副軸軸上如何對齊:佈局

flex_start：交叉軸的起點對齊。
flex_end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

更多知識點請看寫的很不錯的文章Android FlexboxLayout 佈局詳解post

動態生成標籤：

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上源碼