Android根據標籤長度自動換行

Android根據標籤長度自動換行

Android 實際開發中，我們會經常會用到像標籤那種不固定長度，而且能換行展示的效果，這裏只能採取自定義控件去解決標籤長度和自動換行的問題。

原理介紹：其實每個標籤都是一個View，所以這個自定義控件是一個ViewGroup，用來管理這裏所有的子View。自定義ViewGroup最重要的就是onMeasure和onLayout方法，前者用來測量自定義控件本身的大小，後者用來確定自定義控件中的每個子控件的位置。

主要介紹兩個重頭戲的方法，一個onMeasure方法，一個onLayout方法。

1.實現onMeasure方法

@Override  
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

        measureChildren(widthMeasureSpec, heightMeasureSpec);  

        final int count = getChildCount(); // tag的數量  
        int left = 0; // 當前的左邊距離  
        int top = 0; // 當前的上邊距離  
        int totalHeight = 0; // WRAP_CONTENT時控件總高度  
        int totalWidth = 0; // WRAP_CONTENT時控件總寬度  

        for (int i = 0; i < count; i++) {  
            View child = getChildAt(i);  

            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) child.getLayoutParams();  

            if (i == 0) { // 第一行的高度  
                totalHeight = params.topMargin + child.getMeasuredHeight() + params.bottomMargin;  
            }  

            if (left + params.leftMargin + child.getMeasuredWidth() + params.rightMargin > getMeasuredWidth()) { // 換行  
                left = 0;  
                top += params.topMargin + child.getMeasuredHeight() + params.bottomMargin; // 每個TextView的高度都一樣，隨便取一個都行  
                totalHeight += params.topMargin + child.getMeasuredHeight() + params.bottomMargin;  
            }  

            children.add(new int[]{left + params.leftMargin, top + params.topMargin, left + params.leftMargin + child.getMeasuredWidth(), top + params.topMargin + child.getMeasuredHeight()});  

            left += params.leftMargin + child.getMeasuredWidth() + params.rightMargin;  

            if (left > totalWidth) { // 當寬度爲WRAP_CONTENT時，取寬度最大的一行  
                totalWidth = left;  
            }  
        }  

        int height = 0;  
        if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) {  
            height = MeasureSpec.getSize(heightMeasureSpec);  
        } else {  
            height = totalHeight;  
        }  

        int width = 0;  
        if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY) {  
            width = MeasureSpec.getSize(widthMeasureSpec);  
        } else {  
            width = totalWidth;  
        }  

        setMeasuredDimension(width, height);  
    }  

上面重寫onMeasure方法，調用measureChildren(widthMeasureSpec, heightMeasureSpec);方法，這個方法的作用在於測量每個子控件的大小和模式，因爲下面我們需要獲取每個子控件的寬高和margin等參數的值。

2.實現OnLayout方法

@Override  
    protected void onLayout(boolean changed, int l, int t, int r, int b) {  
        final int count = getChildCount();  

        for (int i = 0; i < count; i++) {  
            View child = getChildAt(i);  

            int[] position = children.get(i);  
            child.layout(position[0], position[1], position[2], position[3]);  
        }  
    }  

在onMeasure方法中，我們已經得到了每個子控件的left, top, right,bottom，所以這裏就很簡單了，直接調用layout方法確定每個子控件的位置即可。

完整代碼如下：

/**
 * Created by Administrator on 2016/7/19.
 * Android根據標籤長度自動換行
 * @auther madreain
 */

public class LabelLayout extends ViewGroup {
    private List<int[]> children;

    public LabelLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        children = new ArrayList<int[]>();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        measureChildren(widthMeasureSpec, heightMeasureSpec);

        final int count = getChildCount(); // tag的數量
        int left = 0; // 當前的左邊距離
        int top = 0; // 當前的上邊距離
        int totalHeight = 0; // WRAP_CONTENT時控件總高度
        int totalWidth = 0; // WRAP_CONTENT時控件總寬度

        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);

            LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) child.getLayoutParams();

            if (i == 0) { // 第一行的高度
                totalHeight = params.topMargin + child.getMeasuredHeight() + params.bottomMargin;
            }

            if (left + params.leftMargin + child.getMeasuredWidth() + params.rightMargin > getMeasuredWidth()) { // 換行
                left = 0;
                top += params.topMargin + child.getMeasuredHeight() + params.bottomMargin; // 每個TextView的高度都一樣，隨便取一個都行
                totalHeight += params.topMargin + child.getMeasuredHeight() + params.bottomMargin;
            }

            children.add(new int[]{left + params.leftMargin, top + params.topMargin, left + params.leftMargin + child.getMeasuredWidth(), top + params.topMargin + child.getMeasuredHeight()});

            left += params.leftMargin + child.getMeasuredWidth() + params.rightMargin;

            if (left > totalWidth) { // 當寬度爲WRAP_CONTENT時，取寬度最大的一行
                totalWidth = left;
            }
        }

        int height = 0;
        if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) {
            height = MeasureSpec.getSize(heightMeasureSpec);
        } else {
            height = totalHeight;
        }

        int width = 0;
        if (MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY) {
            width = MeasureSpec.getSize(widthMeasureSpec);
        } else {
            width = totalWidth;
        }

        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        final int count = getChildCount();

        for (int i = 0; i < count; i++) {
            View child = getChildAt(i);

            int[] position = children.get(i);
            child.layout(position[0], position[1], position[2], position[3]);
        }
    }
}

具體使用：
xml:

   <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        >

                        <com.motoband.ui.view.LabelLayout
                            android:id="@+id/taglayout_show_label"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginTop="@dimen/dp12"
                            android:layout_marginBottom="@dimen/dp12"
                            />

                    </LinearLayout>

代碼中的使用：

        for(int i=0;i<6;i++){
            TextView textView=new TextView(this);
            if(i/2==0){
                textView.setText("這是加油加油加油加油第"+i+"個");
            }else {
                textView.setText("這是第"+i+"個");
            }

            textView.setTextColor(getResources().getColor(R.color.M4A4D4F));
            textView.setGravity(Gravity.CENTER);
            textView.setTextSize(10);
            textView.setBackgroundResource(R.drawable.add_success_label);

            LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.width=ViewGroup.LayoutParams.WRAP_CONTENT;
            layoutParams.height=PixelOrdpManager.dip2px(getBaseContext(),25);
            layoutParams.setMargins(PixelOrdpManager.dip2px(getBaseContext(),13),PixelOrdpManager.dip2px(getBaseContext(),12),0,PixelOrdpManager.dip2px(getBaseContext(),12));
            textView.setLayoutParams(layoutParams);

            taglayout_show_label.addView(textView);

        }