Android流式佈局控件

時間 2019-12-09

原文原文鏈接

1，自定義flowlayout代碼java

package com.hyang.administrator.studentproject.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2017/6/20.
 */
public class FlowGroupView extends ViewGroup {
    /**
     * 儲存全部的view 按行記錄
     */
    private List<List<View>> mAllViews = new ArrayList<List<View>>();
    /**
     * 記錄每一行的高度
     */
    private List<Integer> mLineHeight = new ArrayList<Integer>();
    private String TAG = "TAG";

    public FlowGroupView(Context context, AttributeSet attrs,
                         int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public FlowGroupView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowGroupView(Context context) {
        super(context);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 置空 view 容器 和 lineHeight 容器  從新賦值
        //由於OnMeasure方法會走兩次，第一次是實例化這個對象的時候高度和寬度都是0
        //以後走了OnSizeChange()方法後 又走了一次OnMeasure，因此要把第一次加進去的數據清空。
        mAllViews.clear();
        mLineHeight.clear();
        //獲得上級容器爲其推薦的寬高和計算模式
        int specWidthMode = MeasureSpec.getMode(widthMeasureSpec);
        int specHeighMode = MeasureSpec.getMode(heightMeasureSpec);
        int specWidthSize = MeasureSpec.getSize(widthMeasureSpec);
        int specHeighSize = MeasureSpec.getSize(heightMeasureSpec);
        // 計算出全部的 child 的 寬和高
//      measureChildren(specWidthSize, specHeighSize);
        // 記錄若是是 warp_content 是設置的寬和高
        int width = 0;
        int height = 0;
        // 獲得子view的個數
        int cCount = getChildCount();
        /**
         * 記錄每一行的寬度，width不斷取最大寬度
         */
        int lineWidth = 0;
        /**
         * 每一行的高度，累加至height
         */
        int lineHeight = 0;

        // 存儲每一行全部的childView
        List<View> lineViews = new ArrayList<View>();

        for (int i = 0; i < cCount; i++) {
            // 獲得每一個子View
            View child = getChildAt(i);
            // 測量每一個子View的寬高
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            // 當前子view的lp
            MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
            // 子view的寬和高
            int cWidth = 0;
            int cheight = 0;
            // 當前子 view 實際佔的寬
            cWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
            // 當前子View 實際佔的高
            cheight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
            lineHeight=cheight;
            // 須要換行
            if(lineWidth + cWidth > specWidthSize){
                width = Math.max(lineWidth, cWidth);// 取最大值
                lineWidth = cWidth; // 開啓新行的時候從新累加width
                // 開啓新行時累加 height
//              lineHeight = cheight; // 記錄下一行的高度
                mAllViews.add(lineViews);
                mLineHeight.add(cheight);
                lineViews = new ArrayList<>();
                // 換行的時候把該 view 放進 集合裏
                lineViews.add(child);// 這個  view(child) 是下一行的第一個view
                height += cheight; //每一個View高度是同樣的，直接累加
                Log.e("須要換行", "hight--" + height);
                Log.e("onMeasure", "AllViews.size()  --  > " + mAllViews.size());
            }else {
                // 不須要換行
                lineWidth += cWidth;//
                Log.e("不須要換行","hight--"+height);
                // 不須要換行時 把子View add 進集合
                lineViews.add(child);
            }

            if(i == cCount-1){
                // 若是是最後一個view
                width = Math.max(lineWidth, cWidth);
                height += cheight;
                Log.e("最後一個view","hight--"+height);
            }
        }
        // 循環結束後 把最後一行內容add進集合中
        mLineHeight.add(lineHeight); // 記錄最後一行
        mAllViews.add(lineViews);
        // MeasureSpec.EXACTLY 表示設置了精確的值
        // 若是 mode 是 MeasureSpec.EXACTLY 時候，則不是 warp_content 用計算來的值，不然則用上級佈局分給它的值
        setMeasuredDimension(
                specWidthMode == MeasureSpec.EXACTLY ? specWidthSize : width,
                specHeighMode == MeasureSpec.EXACTLY ? specHeighSize : height
        );
        Log.e("onMeasure", "mAllViews.size() -- > " + mAllViews.size() + "   mLineHeight.size() -- > " + mLineHeight.size() + "Height -- > "+height);
    }

    /**
     * 全部childView的位置的佈局
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // 當前行的最大高度
        int lineHeight = 0;
        // 存儲每一行全部的childView
        List<View> lineViews = new ArrayList<View>();
        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("onLayout" , "第" + i + "行 ：" + lineViews.size()+"-------lineHeight"+ 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();

                child.layout(lc, tc, rc, bc);

                left += child.getMeasuredWidth() + lp.rightMargin + lp.leftMargin;
            }
            left = 0;
            top += lineHeight;
        }
        Log.v("onLayout", "onLayout   mAllViews.size() -- > " + mAllViews.size() + "   mLineHeight.size() -- > "+ mLineHeight.size());
    }


    /**
     * 這個必定要設置，不然會包強轉錯誤
     * 設置它支持 marginLayoutParams
     */
    @Override
    public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {

        return new MarginLayoutParams(getContext(),attrs);
    }
}

2.在佈局文件中使用android

1 <com.hyang.administrator.studentproject.widget.FlowGroupView
2     android:id="@+id/flow_view_group"
3     android:layout_width="match_parent"
4     android:layout_height="wrap_content">
5 </com.hyang.administrator.studentproject.widget.FlowGroupView>

3.TextView的樣式文件app

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#E7E7E7" >
    </solid>
    <corners
        android:radius="30dp"
        />

    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp" />
</shape>

4.在Activity中使用ide

 1 package com.hyang.administrator.studentproject.activity;
 2 
 3 import android.graphics.Color;
 4 import android.os.Bundle;
 5 import android.support.v7.app.AppCompatActivity;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 import android.widget.Button;
 9 import android.widget.TextView;
10 import android.widget.Toast;
11 
12 import com.hyang.administrator.studentproject.R;
13 import com.hyang.administrator.studentproject.widget.FlowGroupView;
14 
15 import org.xutils.view.annotation.ViewInject;
16 import org.xutils.x;
17 
18 import java.util.ArrayList;
19 
20 public class FlowLayoutActivity extends AppCompatActivity {
21 
22     @ViewInject(R.id.flow_button)
23     private Button addTextButton;
24     @ViewInject(R.id.flow_view_group)
25     private FlowGroupView flowView;
26 
27     private ArrayList<String> names;
28 
29 
30     @Override
31     protected void onCreate(Bundle savedInstanceState) {
32         super.onCreate(savedInstanceState);
33         setContentView(R.layout.activity_flow_layout);
34         x.view().inject(this);
35 
36         setTwoFlowLayout();
37 
38         addTextButton.setOnClickListener(new View.OnClickListener() {
39             @Override
40             public void onClick(View v) {
41                 addTextView("添加1");
42             }
43         });
44     }
45 
46     private void setTwoFlowLayout() {
47         //添加數據
48         names = new ArrayList<String>();
49         names.add("降龍十八掌");
50         names.add("黯然銷魂掌");
51         names.add("左右互搏術");
52         names.add("七十二路空明拳");
53         names.add("小無相功");
54         names.add("拈花指");
55         names.add("打狗棍法");
56         names.add("蛤蟆功");
57         names.add("九陰白骨爪");
58         names.add("一招半式闖江湖");
59         names.add("醉拳");
60         names.add("龍蛇虎豹");
61         names.add("葵花寶典");
62         names.add("吸星大法");
63         names.add("如來神掌警示牌");
64         //爲佈局添加內容
65         for (int i = 0; i < names.size(); i++) {
66             addTextView(names.get(i));
67         }
68     }
69 
70     /**
71      * 動態添加布局
72      * @param str
73      */
74     private void addTextView(String str) {
75         TextView child = new TextView(this);
76         ViewGroup.MarginLayoutParams params = new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.WRAP_CONTENT, ViewGroup.MarginLayoutParams.WRAP_CONTENT);
77         params.setMargins(5, 5, 5, 5);
78         child.setLayoutParams(params);
79         child.setBackgroundResource(R.drawable.flag);
80         child.setText(str);
81         child.setTextColor(Color.WHITE);
82         initEvents(child);//監聽
83         flowView.addView(child);
84     }
85 
86     /**
87      * 爲每一個view 添加點擊事件
88      */
89     private void initEvents(final TextView tv){
90         tv.setOnClickListener(new View.OnClickListener() {
91 
92             @Override
93             public void onClick(View v) {
94                 Toast.makeText(FlowLayoutActivity.this, tv.getText().toString(), Toast.LENGTH_SHORT).show();
95             }
96         });
97     }
98 }