自定义标签 android,自定义android爱情标签

原标题：自定义android爱情标签

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

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

源代码地址：github上源码

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

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

activity_label.xml 文件配置如下：

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">

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">

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"/>

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"/>

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">

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 布局详解

动态生成标签：protectedvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_label);

initView;

initLabelData;

initselectLabelData;

}

privatevoidinitLabelData(){

unSelectedFlexLayout.removeAllViews;

for( inti = 0; i < labelData.size; i++) {

TextView textView = ScreenUtils.createFlexItemView(LabelActivity. this, labelData. get(i), false);

textView.setLayoutParams(ScreenUtils.createDefaultLayoutParams);

unSelectedFlexLayout.addView(textView);

final intfinalI = i;

textView.setOnClickListener( newView.OnClickListener {

@ Override

publicvoidonClick(View v) {

selectLabelData. add(labelData. get(finalI));

labelData. remove(labelData. get(finalI));

initselectLabelData;

initLabelData;

}

});

}

}

privatevoidinitselectLabelData(){

selectedFlexLayout.removeAllViews;

for( inti = 0; i < selectLabelData.size; i++) {

TextView textView = ScreenUtils.createFlexItemView(LabelActivity. this, selectLabelData. get(i), true);

final intfinalI = i;

textView.setOnClickListener( newView.OnClickListener {

@ Override

publicvoidonClick(View v) {

String content = selectLabelData. get(finalI);

labelData. add(content);

selectLabelData. remove(content);

initselectLabelData;

initLabelData;

}

});

textView.setLayoutParams(ScreenUtils.createDefaultLayoutParams);

selectedFlexLayout.addView(textView);

}

addEditLabel;

}

动态添加一个标签item

/**

* @paramcontent 内容

* @paramselected 是否被选中

*

*/

publicstaticTextView createFlexItemView(Context context, String content, booleanselected){

TextView textView = newTextView(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);

returntextView;

}

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

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

privatevoidaddEditLabel(){

View view = LayoutInflater. from(LabelActivity. this).inflate(R.layout.label_edt_item, null);

editLabelET = view.findViewById(R.id.lable_tip_et);

FlexboxLayout.LayoutParams lp = newFlexboxLayout.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( newTextView.OnEditorActionListener {

@ Override

publicboolean onEditorAction(TextView v, intactionId, KeyEvent event) {

if(actionId == EditorInfo.IME_ACTION_DONE) {

String content = editLabelET.getText.toString.trim.replace( " ", "");

if(!isRepaetContent(content)) {

selectLabelData. add(content);

initselectLabelData;

}

}

returnfalse;

}

});

}

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

更多代码请看github上，左下角原文链接

作者：翻身不做咸鱼

链接：https://juejin.im/post/5d483e685188253b4924436c返回搜狐，查看更多

责任编辑：