有好多应用要给商品或者杂志笔记添加标签,今天有应用涉及到,实现之后整理在这,方便查阅
这种流式标签效果,点击标签,改变颜色,并且限制所能添加标签的数量
首先是一个自定义控件,可以直接拿走放在项目中
package util; import android.content.Context; import android.graphics.Typeface; import android.text.TextUtils; import android.util.AttributeSet; import android.util.Log; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.TextView; import com.jianing.practice.R; import java.util.ArrayList; import java.util.List; /** * Created by christy on 16/11/12. */ public class FlowLayout extends ViewGroup { private static final String TAG = "FlowLayout"; /** * 存储所有的View,按行记录 */ private List> mAllViews = new ArrayList
>(); /** * 记录每一行的最大高度 */ private List
mLineHeight = new ArrayList (); public FlowLayout(Context context, AttributeSet attrs) { super(context, attrs); } public FlowLayout(Context context) { super(context); } /** * 负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 获得它的父容器为它设置的测量模式和大小 int sizeWidth = View.MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = View.MeasureSpec.getSize(heightMeasureSpec); int modeWidth = View.MeasureSpec.getMode(widthMeasureSpec); int modeHeight = View.MeasureSpec.getMode(heightMeasureSpec); Log.e(TAG, sizeWidth + "," + sizeHeight); // 如果是warp_content情况下,记录宽和高 int width = 0; int height = 0; /** * 记录每一行的宽度,width不断取最大宽度 */ int lineWidth = 0; /** * 每一行的高度,累加至height */ int lineHeight = 0; int cCount = getChildCount(); // 遍历每个子元素 for (int i = 0; i < cCount; i++) { View child = getChildAt(i); // 测量每一个child的宽和高 measureChild(child, widthMeasureSpec, heightMeasureSpec); // 得到child的lp ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) child .getLayoutParams(); // 当前子空间实际占据的宽度 int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; // 当前子空间实际占据的高度 int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; /** * 如果加入当前child,则超出最大宽度,则的到目前最大宽度给width,类加height 然后开启新行 */ if (lineWidth + childWidth > sizeWidth) { width = Math.max(lineWidth, childWidth);// 取最大的 lineWidth = childWidth; // 重新开启新行,开始记录 // 叠加当前高度, height += lineHeight; // 开启记录下一行的高度 lineHeight = childHeight; } else // 否则累加值lineWidth,lineHeight取最大高度 { lineWidth += childWidth; lineHeight = Math.max(lineHeight, childHeight); } // 如果是最后一个,则将当前记录的最大宽度和当前lineWidth做比较 if (i == cCount - 1) { width = Math.max(width, lineWidth); height += lineHeight; } } setMeasuredDimension((modeWidth == View.MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == View.MeasureSpec.EXACTLY) ? sizeHeight : height); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { mAllViews.clear(); mLineHeight.clear(); int width = getWidth(); int lineWidth = 0; int lineHeight = 0; // 存储每一行所有的childView List lineViews = new ArrayList (); int cCount = getChildCount(); // 遍历所有的孩子 for (int i = 0; i < cCount; i++) { View child = getChildAt(i); ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) child .getLayoutParams(); int childWidth = child.getMeasuredWidth(); int childHeight = child.getMeasuredHeight(); // 如果已经需要换行 if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) { // 记录这一行所有的View以及最大高度 mLineHeight.add(lineHeight); // 将当前行的childView保存,然后开启新的ArrayList保存下一行的childView mAllViews.add(lineViews); lineWidth = 0;// 重置行宽 lineViews = new ArrayList (); } /** * 如果不需要换行,则累加 */ lineWidth += childWidth + lp.leftMargin + lp.rightMargin; lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin); lineViews.add(child); } // 记录最后一行 mLineHeight.add(lineHeight); mAllViews.add(lineViews); int left = 0; int top = 0; // 得到总行数 int lineNums = mAllViews.size(); for (int i = 0; i < lineNums; i++) { // 每一行的所有的views lineViews = mAllViews.get(i); // 当前行的最大高度 lineHeight = mLineHeight.get(i); Log.e(TAG, "第" + i + "行 :" + lineViews.size() + " , " + lineViews); Log.e(TAG, "第" + i + "行, :" + lineHeight); // 遍历当前行所有的View for (int j = 0; j < lineViews.size(); j++) { View child = lineViews.get(j); if (child.getVisibility() == View.GONE) { continue; } ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) child .getLayoutParams(); //计算childView的left,top,right,bottom int lc = left + lp.leftMargin; int tc = top + lp.topMargin; int rc =lc + child.getMeasuredWidth(); int bc = tc + child.getMeasuredHeight(); Log.e(TAG, child + " , l = " + lc + " , t = " + t + " , r =" + rc + " , b = " + bc); child.layout(lc, tc, rc, bc); left += child.getMeasuredWidth() + lp.rightMargin + lp.leftMargin; } left = 0; top += lineHeight; } } /** * 返回当前ViewGroup相关联的LayoutParams */ @Override public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) { return new ViewGroup.MarginLayoutParams(getContext(), attrs); } public TextView addView(String tags) { LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); params.setMargins(0, 0,40,15);//左上右下 TextView textView = new TextView(this.getContext()); textView.setGravity(Gravity.CENTER); textView.setTextColor(getResources().getColor(R.color.black)); textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗 textView.setSelected(false); textView.setTextSize(14); textView.setPadding(20,20,20,20); textView.setSingleLine(); textView.setEllipsize(TextUtils.TruncateAt.valueOf("END")); textView.setText(tags); this.addView(textView, params); return textView; } }
然后在项目布局中引用这个自定义控件
xml version="1.0" encoding="utf-8"?>xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_test_biaoqian" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.jianing.practice.TestBiaoqian"> android:id="@+id/floLayout" android:layout_width="wrap_content" android:layout_centerInParent="true" android:layout_height="wrap_content">
接下来就是在Activity里面实现逻辑功能
package com.jianing.practice; import android.app.Activity; import android.graphics.Color; import android.provider.SyncStateContract; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import util.BussinessUtil; import util.FlowLayout; import util.RoundGroupView; import android.view.ViewGroup.LayoutParams; import android.view.ViewGroup.MarginLayoutParams; import android.widget.Toast; import java.util.ArrayList; import java.util.List; public class TestBiaoqian extends Activity { private FlowLayout floLayout; private String[] tags = {"日系", "韩系", "肉肉女", "品牌", "美妆", "冬天", "牛仔", "中学生", "大学生"}; private ListtagList = new ArrayList (); @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_test_biaoqian); floLayout = (FlowLayout) findViewById(R.id.floLayout); for (int i = 1; i < tags.length; i++){ final String tag = tags[i]; final TextView textView = floLayout.addView(tag); textView.setBackgroundResource(R.drawable.biaoqian_selected_drawable); textView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (textView.isSelected()) { removeTag(tag); textView.setSelected(false); String tagText = textView.getText().toString(); } else { tagList.add(tag); if (tagList.size() > 3){ Toast.makeText(TestBiaoqian.this,"最多只能选择3个",Toast.LENGTH_SHORT).show(); return; } textView.setSelected(true); } } }); } } private void removeTag(String curTag){ for (int i = 1 ; i<tagList.size(); i ++){ String taga = tagList.get(i); if (BussinessUtil.isValid(curTag) && curTag.equals(taga)){ tagList.remove(i); break; } } } }
到现在为止已经可以实现标签流了,若要规定一行显示几个标签,则要在自定义空间里面根据屏幕的宽度设置显示的标签数量
比如规定一行显示三个标签
则应该设置 标签的宽度 = (屏幕总宽度 - 标签总控件两边的padding值 - 三个标签之间的两个padding值) / 3
在自定义控件这个位置设置即可