看了高中同学发朋友圈的婚纱照,即将结束奔跑十年的爱情。除了祝福和羡慕以外,一股柠檬酸油然而生。十年的爱情奔跑,是一种什么体验,没经历过,未可得知。但是两年的感情经历还是有点话语权的,相识、相知、却不能相守下去,无疑结局是一个不完整的句号。或许不完整才是人生吧。
听我哔哔了这么久,今天我想要记录的是标签选择功能。实现的效果如下:
源代码地址: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上源码
作者:翻身不做咸鱼
链接:https://juejin.im/post/5d483e685188253b4924436c
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
转载请注明:Android开发中文站 » 自定义android爱情标签