首页 > 系统 > iOS > 正文

iOS仿微信添加标签效果(shape实现)

2019-10-21 18:50:43
字体:
来源:转载
供稿:网友

一、 概述

可以说微信做的用户体验太棒了,可以做到老少皆宜,给个赞,我们也同时应该告诫自己,用户体验应该向微信看齐,微信就是我们的标杆,那我们今天也来仿一仿微信添加的标签功能。只能仿着做了,真是做不到微信的那种体验。甘拜下风。

我们上篇学习了shape属性的用法,那我们今天就用shape来做下微信的标签功能。先看一下效果。

我不仅用到了shape属性,还用到了翔哥的标签布局FlowLayout跟TagFlowLayout鸿洋的博客

二、效果图

ios,仿微信添加标签

三 、定义shape

添加标签

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><cornersandroid:bottomLeftRadius="30dp"android:bottomRightRadius="30dp"android:topLeftRadius="30dp"android:topRightRadius="30dp" /><stroke android:dashWidth="5dp" android:dashGap="2dp" android:width="1dp" android:color="#e0e0e0" /><paddingandroid:bottom="2dp"android:left="10dp"android:right="10dp"android:top="2dp" /></shape>

删除标签

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><cornersandroid:bottomLeftRadius="30dp"android:bottomRightRadius="30dp"android:topLeftRadius="30dp"android:topRightRadius="30dp" /><solid android:color="#00FF00" /><paddingandroid:bottom="2dp"android:left="10dp"android:right="10dp"android:top="2dp" /></shape>

正常标签

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><cornersandroid:bottomLeftRadius="30dp"android:bottomRightRadius="30dp"android:topLeftRadius="30dp"android:topRightRadius="30dp" /><stroke android:width="1dp" android:color="#00FF00" /><paddingandroid:bottom="2dp"android:left="10dp"android:right="10dp"android:top="2dp" /></shape>

标签选中

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><cornersandroid:bottomLeftRadius="30dp"android:bottomRightRadius="30dp"android:topLeftRadius="30dp"android:topRightRadius="30dp" /><strokeandroid:width="1dp"android:color="#00FF00" /><paddingandroid:bottom="2dp"android:left="10dp"android:right="10dp"android:top="2dp" /></shape>

以上是部分shape定义,大家可以下载源码自己看。

四、 思路

我们可以标签大概有以下逻辑

点击上面标签删除 所有标签里面更新未选中

点击所有标签的某一个 上面标签添加或者删除

五、代码

public class MainActivity extends AppCompatActivity {private FlowLayout flowLayout;//上面的flowLayoutprivate TagFlowLayout allFlowLayout;//所有标签的TagFlowLayoutprivate List<String> label_list = new ArrayList<>();//上面的标签列表private List<String> all_label_List = new ArrayList<>();//所有标签列表final List<TextView> labels = new ArrayList<>();//存放标签final List<Boolean> labelStates = new ArrayList<>();//存放标签状态final Set<Integer> set = new HashSet<>();//存放选中的private TagAdapter<String> tagAdapter;//标签适配器private LinearLayout.LayoutParams params;private EditText editText;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();initEdittext();initAllLeblLayout();}/*** 初始化View*/private void initView() {flowLayout = (FlowLayout) findViewById(R.id.id_flowlayout);allFlowLayout = (TagFlowLayout) findViewById(R.id.id_flowlayout_two);params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);params.setMargins(20, 20, 20, 20);flowLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {String editTextContent = editText.getText().toString();if (TextUtils.isEmpty(editTextContent)) {tagNormal();} else {addLabel(editText);}}});}/*** 初始化数据*/private void initData(){//初始化上面标签label_list.add("同事");label_list.add("亲人");label_list.add("同学");label_list.add("朋友");label_list.add("知己");//初始化下面标签列表all_label_List.addAll(label_list);all_label_List.add("异性朋友");all_label_List.add("高中同学");all_label_List.add("大学同学");all_label_List.add("社会朋友");for (int i = 0; i < label_list.size() ; i++) {editText = new EditText(getApplicationContext());//new 一个EditTexteditText.setText(label_list.get(i));addLabel(editText);//添加标签}}/*** 初始化默认的添加标签*/private void initEdittext(){editText = new EditText(getApplicationContext());editText.setHint("添加标签");//设置固定宽度editText.setMinEms(4);editText.setTextSize(12);//设置shapeeditText.setBackgroundResource(R.drawable.label_add);editText.setHintTextColor(Color.parseColor("#b4b4b4"));editText.setTextColor(Color.parseColor("#000000"));editText.setLayoutParams(params);//添加到layout中flowLayout.addView(editText);editText.addTextChangedListener(new TextWatcher() {@Overridepublic void beforeTextChanged(CharSequence s, int start, int count, int after) {}@Overridepublic void onTextChanged(CharSequence s, int start, int before, int count) {tagNormal();}@Overridepublic void afterTextChanged(Editable s) {}});}/*** 初始化所有标签列表*/private void initAllLeblLayout() {//初始化适配器tagAdapter = new TagAdapter<String>(all_label_List) {@Overridepublic View getView(FlowLayout parent, int position, String s) {TextView tv = (TextView) getLayoutInflater().inflate(R.layout.flag_adapter,allFlowLayout, false);tv.setText(s);return tv;}};allFlowLayout.setAdapter(tagAdapter);//根据上面标签来判断下面的标签是否含有上面的标签for (int i = 0; i < label_list.size(); i++) {for (int j = 0; j < all_label_List.size(); j++) {if (label_list.get(i).equals(all_label_List.get(j))) {tagAdapter.setSelectedList(i);//设为选中}}}tagAdapter.notifyDataChanged();//给下面的标签添加监听allFlowLayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener() {@Overridepublic boolean onTagClick(View view, int position, FlowLayout parent) {if (labels.size() == 0) {editText.setText(all_label_List.get(position));addLabel(editText);return false;}List<String> list = new ArrayList<>();for (int i = 0; i < labels.size(); i++) {list.add(labels.get(i).getText().toString());}//如果上面包含点击的标签就删除if (list.contains(all_label_List.get(position))) {for (int i = 0; i < list.size(); i++) {if (all_label_List.get(position).equals(list.get(i))) {flowLayout.removeView(labels.get(i));labels.remove(i);}}} else {editText.setText(all_label_List.get(position));addLabel(editText);}return false;}});//已经选中的监听allFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener() {@Overridepublic void onSelected(Set<Integer> selectPosSet) {set.clear();set.addAll(selectPosSet);}});}/*** 添加标签* @param editText* @return*/private boolean addLabel(EditText editText) {String editTextContent = editText.getText().toString();//判断输入是否为空if (editTextContent.equals(""))return true;//判断是否重复for (TextView tag : labels) {String tempStr = tag.getText().toString();if (tempStr.equals(editTextContent)) {editText.setText("");editText.requestFocus();return true;}}//添加标签final TextView temp = getTag(editText.getText().toString());labels.add(temp);labelStates.add(false);//添加点击事件,点击变成选中状态,选中状态下被点击则删除temp.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int curIndex = labels.indexOf(temp);if (!labelStates.get(curIndex)) {//显示 ×号删除temp.setText(temp.getText() + " ×");temp.setBackgroundResource(R.drawable.label_del);temp.setTextColor(Color.parseColor("#ffffff"));//修改选中状态labelStates.set(curIndex, true);} else {delByTest(temp.getText().toString());flowLayout.removeView(temp);labels.remove(curIndex);labelStates.remove(curIndex);for (int i = 0; i < label_list.size(); i++) {for (int j = 0; j < labels.size(); j++) {if (label_list.get(i).equals(labels.get(j).getText())) {tagAdapter.setSelectedList(i);}}}tagAdapter.notifyDataChanged();}}});flowLayout.addView(temp);//让输入框在最后一个位置上editText.bringToFront();//清空编辑框editText.setText("");editText.requestFocus();return true;}/*** 根据字符删除标签* @param text*/private void delByTest(String text) {for (int i = 0; i < all_label_List.size(); i++) {String a = all_label_List.get(i) + " ×";if (a.equals(text)) {set.remove(i);}}tagAdapter.setSelectedList(set);//重置选中的标签}/*** 标签恢复到正常状态*/private void tagNormal() {//输入文字时取消已经选中的标签for (int i = 0; i < labelStates.size(); i++) {if (labelStates.get(i)) {TextView tmp = labels.get(i);tmp.setText(tmp.getText().toString().replace(" ×", ""));labelStates.set(i, false);tmp.setBackgroundResource(R.drawable.label_normal);tmp.setTextColor(Color.parseColor("#00FF00"));}}}/*** 创建一个正常状态的标签* @param label* @return*/private TextView getTag(String label) {TextView textView = new TextView(getApplicationContext());textView.setTextSize(12);textView.setBackgroundResource(R.drawable.label_normal);textView.setTextColor(Color.parseColor("#00FF00"));textView.setText(label);textView.setLayoutParams(params);return textView;}}

注释的很详细了。其实正常一步步来就按照逻辑来就可以实现,别慌,别乱,别急躁。什么功能都能实现的。

六、源码

点击下载

以上所述是小编给大家介绍的iOS仿微信添加标签效果(shape实现),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VEVB武林网网站的支持!


注:相关教程知识阅读请移步到IOS开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表