【Android进阶】Android自定义组件之自动换行View，以TextView为例

原文地址：http://www.tuicool.com/articles/u2eEbe

原文效果图：

组件是继承的ViewGroup,在用的时候调用addView方法把TextView加进去，然后该组件会把textview放到合适的位置。

WordWrapView.java

package com.example.views;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class WordWrapView extends ViewGroup {

	private static final int PADDING_HOR = 10;// 水平方向padding
	private static final int PADDING_VERTICAL = 5;// 垂直方向padding
	private static final int SIDE_MARGIN = 10;// 左右间距
	private static final int TEXT_MARGIN = 10;

	/**
	 * @param context
	 */
	public WordWrapView(Context context) {
		super(context);
	}

	/**
	 * @param context
	 * @param attrs
	 * @param defStyle
	 */
	public WordWrapView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	/**
	 * @param context
	 * @param attrs
	 */
	public WordWrapView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		int childCount = getChildCount();
		int autualWidth = r - l;
		int x = SIDE_MARGIN;// 横坐标开始
		int y = 0;// 纵坐标开始
		int rows = 1;
		for (int i = 0; i < childCount; i++) {
			View view = getChildAt(i);
			view.setBackgroundColor(Color.GREEN);
			int width = view.getMeasuredWidth();
			int height = view.getMeasuredHeight();
			x += width + TEXT_MARGIN;
			if (x > autualWidth) {
				x = width + SIDE_MARGIN;
				rows++;
			}
			y = rows * (height + TEXT_MARGIN);
			if (i == 0) {
				view.layout(x - width - TEXT_MARGIN, y - height, x
						- TEXT_MARGIN, y);
			} else {
				view.layout(x - width, y - height, x, y);
			}
		}
	};

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int x = 0;// 横坐标
		int y = 0;// 纵坐标
		int rows = 1;// 总行数
		int specWidth = MeasureSpec.getSize(widthMeasureSpec);
		int actualWidth = specWidth - SIDE_MARGIN * 2;// 实际宽度
		int childCount = getChildCount();
		for (int index = 0; index < childCount; index++) {
			View child = getChildAt(index);
			child.setPadding(PADDING_HOR, PADDING_VERTICAL, PADDING_HOR,
					PADDING_VERTICAL);
			child.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
			int width = child.getMeasuredWidth();
			int height = child.getMeasuredHeight();
			x += width + TEXT_MARGIN;
			if (x > actualWidth) {// 换行
				x = width;
				rows++;
			}
			y = rows * (height + TEXT_MARGIN);
		}
		setMeasuredDimension(actualWidth, y);
	}

}

MainActivity.java

public class MainActivity extends Activity {

  private WordWrapView wordWrapView;
  private String[] strs = new String[] { "哲学系", "新疆维吾尔族自治区", "新闻学", "心理学",
      "犯罪心理学", "明明白白", "西方文学史", "计算机", "掌声", "心太软", "生命",
      "程序开发" };

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    wordWrapView = (WordWrapView) this.findViewById(R.id.view_wordwrap);
    for (int i = 0; i < 12; i++) {
      TextView textview = new TextView(this);
      textview.setText(strs[i]);
      wordWrapView.addView(textview);
    }
  }

}

当然我们在自己使用的时候 ，可以在添加TextView的时候设置文字的颜色和背景，此时必须注释掉 这句

//  view.setBackgroundColor(Color.GREEN);

效果如下：

position = "营销,行政";

if(position != null && position.length() > 0){
	String[] strArray = null;
	strArray = position.split(",");
	if(strArray != null && strArray.length > 0){
		for(int i = 0; i < strArray.length; i++){
			TextView textview = new TextView(ProjectDetailActivity.this);
		    textview.setText(strArray[i]);
		    textview.setTextColor(Color.WHITE);
		    textview.setBackgroundResource(R.drawable.blue_fillet_bg);
		    wordwrapview_recruitment_position.addView(textview);
		}
	}
}

String treatment = "股权,薪酬,分红";
if(treatment != null && treatment.length() > 0){
	String[] strArray = null;
	strArray = treatment.split(",");
	if(strArray != null && strArray.length > 0){
		for(int i = 0; i < strArray.length; i++){
			TextView textview = new TextView(ProjectDetailActivity.this);
		    textview.setText(strArray[i]);
		    textview.setTextColor(Color.WHITE);
		    textview.setBackgroundColor(getResources().getColor(R.color.project_green));
		    wordwrapview_recruitment_treatment.addView(textview);
		}
	}
}

上文之所以解析字符串，是因为服务器发过来的是json格式的字符串，每一项以“，”分割

blue_fillet_bg.xml

<span style="font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif; line-height: 27.2px;"><?xml version="1.0" encoding="utf-8"?></span>

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid android:color="#44B3F8" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners android:radius="5dip" />
    

</shape>

R.color.project_green

<color name="project_green">#88A637</color>