IOS Imitation micro-letter tagging effect (Shape implementation) _ios

I. Overview

It can be said that the user experience of micro-letter is great, you can do for all ages, give a praise, we should also remind ourselves that the user experience should be to the micro-letter, the micro-letter is our benchmark, then we today also to imitate a micro-letter added tag function. Can only imitate to do, really do not have the micro-letter that kind of experience. Outdone

We learned the use of shape properties in the previous chapter, so we use shape today to label the micro-letters. Look at the effect first.

I have not only used the shape properties, but also used the label layout FlowLayout and Tagflowlayout Hong Yang Blog

Second, the effect chart

Third, define shape

Add label

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
android:shape=" Rectangle >
<corners
android:bottomleftradius= "30DP"
android: bottomrightradius= "30DP"
android:topleftradius= "30DP"
android:toprightradius= "30DP"/>
< Stroke android:dashwidth= "5DP" android:dashgap= "2DP" android:width= "1DP" android:color= "#e0e0e0"/>
< padding
android:bottom= "2DP"
android:left= "10DP"
android:right= "10DP"
android:top= "2DP"/ >
</shape>

Delete Label

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
android:shape=" Rectangle >
<corners
android:bottomleftradius= "30DP"
android: bottomrightradius= "30DP"
android:topleftradius= "30DP"
android:toprightradius= "30DP"/>
<solid Android:color= "#00FF00"/>
<padding
android:bottom= "2DP"
android:left= "10DP"
android: right= "10DP"
android:top= "2DP"/>
</shape>

Normal label

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
android:shape=" Rectangle >
<corners
android:bottomleftradius= "30DP"
android: bottomrightradius= "30DP"
android:topleftradius= "30DP"
android:toprightradius= "30DP"/>
< Stroke android:width= "1DP" android:color= "#00FF00"/>
<padding android:bottom=
"2DP"
android: left= "10DP"
android:right= "10DP"
android:top= "2DP"/>
</shape>

Label selected

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android=
"http://schemas.android.com/apk/res/" Android "
android:shape=" Rectangle >
<corners
android:bottomleftradius= "30DP"
android: bottomrightradius= "30DP"
android:topleftradius= "30DP"
android:toprightradius= "30DP"/>
< Stroke
android:width= "1DP"
android:color= "#00FF00"/>
<padding
android:bottom= "2DP"
android:left= "10DP"
android:right= "10DP"
android:top= "2DP"/>
</shape>

The above is a partial shape definition, you can download the source to see themselves.

Iv. Train of thought

We can label probably have the following logic

Click on the above tab to delete all tags inside the update unchecked

Click on one of the labels above to add or remove

Five, code

public class Mainactivity extends Appcompatactivity {private FlowLayout flowlayout;//above FlowLayout private tagflowlayou T allflowlayout;//all tagged tagflowlayout private list<string> label_list = new arraylist<> ();//above label list private list<string> all_label_list = new arraylist<> ();//All Tags list final list<textview> labels = new arraylist& Lt;> ()//Hold tag final list<boolean> labelstates = new arraylist<> ()//store tag status final set<integer> Set = New hashset<> ()//Hold the selected private tagadapter<string> tagadapter;//label Adapter Private Linearlayout.layoutparams
Params
Private EditText EditText; @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (
R.layout.activity_main);
Initview ();
InitData ();
Initedittext ();
Initalllebllayout (); /** * Initialize 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 () {@Override public void OnClick (view view) {String
Edittextcontent = Edittext.gettext (). toString ();
if (Textutils.isempty (edittextcontent)) {tagnormal ();} else {AddLabel (edittext);}}
}); }/** * Initialize data/private void InitData () {//Initialize top label Label_list.add ("colleague"); Label_list.add ("Family"); Label_list.add ("classmate"); Labe
L_list.add ("friend");
Label_list.add ("confidant");
Initialize the following tag list All_label_list.addall (label_list);
All_label_list.add ("Friends of the opposite sex");
All_label_list.add ("High school classmate");
All_label_list.add ("college classmate");
All_label_list.add ("social Friend"); for (int i = 0; i < label_list.size (); i++) {edittext = new EditText (Getapplicationcontext ());//new a edittext Editte
Xt.settext (Label_list.get (i)); AddLabel (edittext);//Add label}}/** * Initialize default tagging * * private void Initedittext () {edittext = new EditText (getapplicationcontEXT ());
Edittext.sethint ("tagging");
Set Fixed width edittext.setminems (4);
Edittext.settextsize (12);
Set Shape Edittext.setbackgroundresource (r.drawable.label_add);
Edittext.sethinttextcolor (Color.parsecolor ("#b4b4b4"));
Edittext.settextcolor (Color.parsecolor ("#000000"));
Edittext.setlayoutparams (params);
Add to Layout Flowlayout.addview (EditText); Edittext.addtextchangedlistener (New Textwatcher () {@Override public void beforetextchanged (charsequence s, int start, int count, int after] {} @Override public void ontextchanged (charsequence s, int start, int before, int count) {Tagnorma
L ();
@Override public void aftertextchanged (Editable s) {}});  /** * Initialize all tag lists */private void Initalllebllayout () {//Initialize adapter Tagadapter = new Tagadapter<string> (all_label_list) {@Override public 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); According to the above label to determine whether the following label contains the above label 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);//set to checked}}
Tagadapter.notifydatachanged (); Add a listener allflowlayout.setontagclicklistener to the tag below (new Tagflowlayout.ontagclicklistener () {@Override public boolean Ontagclick (view view, int position, FlowLayout parent) {if (labels.size () = = 0) {Edittext.settext (pos
ition));
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 the clicked tag is included above, delete if (List.con Tains (All_label_list.get (position))) {for (int i = 0; i < list.size (); i++) {if (all_label_list.get). Equals (
List.get (i))) {Flowlayout.removeview (Labels.get (i)); Labels.remove (i);} else {Edittext.settext (all_label_list.get (position)); AddLabel (EditteXT);
return false;
}
}); The Listener Allflowlayout.setonselectlistener (new Tagflowlayout.onselectlistener () {@Override public void onselected (
Set<integer> selectposset) {set.clear (); Set.addall (Selectposset);}}); /** * Add label * @param edittext * @return/private Boolean AddLabel (EditText edittext) {String edittextcontent = Edittex
T.gettext (). toString ();
Determines whether the input is an empty if (Edittextcontent.equals ("")) return true; Determines whether to repeat for (TextView tag:labels) {String tempstr = Tag.gettext (). toString (); if (Tempstr.equals (edittextcontent)) {E
Dittext.settext ("");
Edittext.requestfocus ();
return true;
}//Add label final TextView temp = Gettag (Edittext.gettext (). toString ());
Labels.add (temp);
Labelstates.add (FALSE); Add Click event, click Into selected state, click to delete Temp.setonclicklistener (new View.onclicklistener () {@Override public void OnClick (View 
V) {int curindex = Labels.indexof (temp); if (!labelstates.get (Curindex)) {//show X Delete Temp.settext (Temp.gettext () + "X"); Temp.setbackgroundresource (R.DRAWABLE.LAbel_del);
Temp.settextcolor (Color.parsecolor ("#ffffff"));
Modifies the selected state 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);
Let the input box Edittext.bringtofront at the last position ();
Empty the edit box Edittext.settext ("");
Edittext.requestfocus ();
return true;  /** * Delete label according to character * @param text */private void Delbytest (String text) {for (int i = 0; i < all_label_list.size (); i++) {String A = All_label_list.get (i) + "x"; if (a.equals (text) {set.remove (i);} tagadapter.setselectedlist (set);//Reset Selection  The label in the/** * tag is restored to the normal state/private void Tagnormal () {//* the selected label for (int i = 0; i < labelstates.size (); i++) {if (Labelstates.get (i)) {TextView TMP =Labels.get (i);
Tmp.settext (Tmp.gettext (). toString (). Replace ("X", ""));
Labelstates.set (I, false);
Tmp.setbackgroundresource (R.drawable.label_normal);
Tmp.settextcolor (Color.parsecolor ("#00FF00")); }}/** * Create a normal status label * @param label * @return/Private TextView Gettag (String label) {TextView TextView = new TEXTVI
EW (Getapplicationcontext ());
Textview.settextsize (12);
Textview.setbackgroundresource (R.drawable.label_normal);
Textview.settextcolor (Color.parsecolor ("#00FF00"));
Textview.settext (label);
Textview.setlayoutparams (params);
return textView; }
}

The notes are very detailed. In fact, the normal step-by-step in accordance with the logic can be achieved, do not panic, don't mess, don't be impatient. What functions can be achieved.

VI. SOURCE code

Click to download

The above is a small set to introduce the iOS imitation Micro-letter label effect (shape implementation), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!