res-drawable: flag_01.xml和flag_02.xml
#FFFFFF
和flag_03
#00FFFF
里面内容一样
颜色不一样
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#C0C0C0"></solid> <padding android:bottom="2dp" android:left="10dp" android:right="10dp" android:top="2dp" /> </shape>
values-styles.xml:
<style name="text_flag_01"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">4dp</item> <item name="android:background">@drawable/flag_01</item> <item name="android:textColor">#ffffff</item> </style>
activity_main.xml布局:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="baway.com.viewgroup_zidingyiview.MainActivity"> <baway.com.viewgroup_zidingyiview.MyView android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView style="@style/text_flag_01" android:text="Holle " /> <TextView style="@style/text_flag_01" android:text="1503A" /> <TextView style="@style/text_flag_01" android:text="王子" /> <TextView style="@style/text_flag_01" android:text="诗淼519" /> <TextView style="@style/text_flag_01" android:text="我是移动通信1503A : 王潇潇" /> <TextView style="@style/text_flag_01" android:text="编程之久除了算法和数据结构,什么也不属于我们" />> </baway.com.viewgroup_zidingyiview.MyView> <baway.com.viewgroup_zidingyiview.MyView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp"> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="Holle " android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="1503A" android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="王子" android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="诗淼519" android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="哎" android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="我是移动通信1503A : 王潇潇" android:textColor="#FF8000" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_02" android:text="算法和数据结构就是编程的一个重要部分,你若失掉了算法和数据结构,你就把一切都失掉了" android:textColor="#FF8000" /> </baway.com.viewgroup_zidingyiview.MyView> <baway.com.viewgroup_zidingyiview.MyView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp"> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="Holle " android:textColor="#FF8080" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="每一个错误标志着前进的一步" android:textColor="#FF8080" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="我是移动通信1503A : 王潇潇" android:textColor="#FF8080" /> <TextView style="@style/text_flag_01" android:background="@drawable/flag_03" android:text="程序员的时间90%是用在编程上,而剩余的10%是活在世界上" android:textColor="#FF8080" /> </baway.com.viewgroup_zidingyiview.MyView> </LinearLayout>
新建一个MyView类,继承ViewGroup:
public class MyView extends ViewGroup { private static final String TAG = "FlowLayout"; /** * 存储所有的View,按行记录 */ private List<List<View>> mAllViews = new ArrayList<List<View>>(); /** * 记录每一行的最大高度 */ private List<Integer> mLineHeight = new ArrayList<Integer>(); public MyView(Context context) { super(context); } public MyView(Context context, AttributeSet attrs) { super(context, attrs); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 获得它的父容器为它设置的测量模式和大小 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); int modeWidth = MeasureSpec.getMode(widthMeasureSpec); int modeHeight = 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 = (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 == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == 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<View> lineViews = new ArrayList<View>(); int cCount = getChildCount(); // 遍历所有的孩子 for (int i = 0; i < cCount; i++) { View child = getChildAt(i); MarginLayoutParams lp = (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<View>(); } /** * 如果不需要换行,则累加 */ 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; } MarginLayoutParams lp = (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; } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } @Override public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs); } }