最近,公司的專案中需要展示商品的規格和屬性,但是不同的商品屬性個數也是不一樣的,

怎麼能夠讓超過一行的屬性自動換行呢?這就需要用到我們的流式佈局,下面先看看效果圖

這篇文章更改的,流式是怎麼實現的還是請先看完上邊這篇文章.

在將樓主的原始碼下載下來使用的時候遇到以下幾個問題,本文將圍繞這幾個小問題進行講解

  首先樓主的這個自定義控制元件始終預設鋪滿螢幕的,但是感覺很奇怪,因為在onMeasure這個方法中

          已經根據控制元件設定的模式測量模式進行過計算了,按道理說不應該是鋪滿螢幕的!

         而且我設定的高度是wrap_content(自適應)   打了斷點試的時候  發現測量出來的距離並不是鋪滿螢幕,

         而是真是高度  又認認真真的看了一下測量發方法  發現樓主將super.onMeasure(widthMeasureSpec, heightMeasureSpec);放在了

         方法結束的位置  是不是很扯   這句話放在最後的話,就相當於我測量了半天,測量到最後不使用這個

        測量值,而使用其父類(ViewGroup)的測量結果,也就是預設結果 

    解決方案:把這句話移到方法首句或者直接刪除這句話

接著  確實是自適應了  但是隻是單純的換行不行   我們需要點選之後知道我們選中了那個   並且選中的這個背景顏色需要變

    簡單地分析下,我們需要做以下幾件事:

        1.兩個自定義屬性  分別是選中和未選中的背景顏色

         2.獲取所有控制元件的的位置

         3.判斷點選的點是不是包含在某個子控制元件中

         4,如果是包含在某個子控制元件中,設定回撥

下面我們具體去完成我們這幾個步驟:

1.兩個自定義屬性

     先在values下建立一個attrs的xml檔案   分別代表選中和未選中的兩個狀態

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="flowlayout">
        <attr name="back_selected" format="reference" />
        <attr name="back_un_selected" format="reference" />
    </declare-styleable>
</resources>
 

       選中狀態

<?xml version="1.0" encoding="utf-8"?>    
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="1dp" />
    <stroke
        android:width="2dp"
        android:color="#ff6600" />
    <solid android:color="#ffffff" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="1dp" />
    <stroke
        android:width="2dp"
        android:color="#000000" />
    <solid android:color="#ffffff" />
</shape>

     public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		childLocationList = new HashMap<Integer, Rect>();
		// 獲取自定義屬性的值
		TypedArray typedArray = context.getTheme().obtainStyledAttributes(
				attrs, R.styleable.flowlayout, defStyle, 0);
		int  back_selected = typedArray.getResourceId(
				R.styleable.flowlayout_back_selected, 0);// 選中時的背景資源id
		int back_unselected = typedArray.getResourceId(
				R.styleable.flowlayout_back_un_selected, 0);// 未選中時的背景資源id
		typedArray.recycle();
	}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:flayout="http://schemas.android.com/apk/res/com.czm.flowlayout"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <com.czm.flowlayout.FlowLayout
        android:id="@+id/flowlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        flayout:back_selected="@drawable/shape_label_selected"
        flayout:back_un_selected="@drawable/shape_label_unselected" >
    </com.czm.flowlayout.FlowLayout>
</RelativeLayout>

    獲得子控制元件的位置    應該在我們指定了子控制元件的位置之後再去獲取  也就是說在onLayout方法的最後

      我們新增一個方法  getAllChildViewLocation

     我們先分析一下思路 :樓主當時是這樣儲存所有的子控制元件的

  <span style="font-size:14px;"> // 儲存所有子View
	private List<List<View>> mAllChildViews = new ArrayList<List<View>>();</span>

       這樣  我們就可以根據行數獲取到指定行中所有的控制元件  再獲取指定行指定第幾個的控制元件

         我們能拿到這個具體的控制元件  就能拿到控制元件所在的位置

        將拿到的位置存到一個鍵值對型別的集合中      鍵表示在這個流式佈局中第幾個   值是對應控制元件的位置  

        至於為什麼要存在一個鍵值對型別的集合中,等會再說

         接著怎麼去存  

     看了這個圖,應該知道鍵怎麼存了

      值是獲取了子控制元件所在的矩形,因為矩形有個方法contains(int x, int y)   可以判斷一個點是否包含在這個矩形中

       建立這個集合最好是在構造方法中建立

    private HashMap<Integer, Rect> childLocationList = new HashMap<Integer, Rect>();

        /**
	 * 獲取所有的子控制元件的位置並記錄
	 */
	private void getAllChildViewLocation() {
		int countBefore = 0;
		for (int i = 0; i < mAllChildViews.size(); i++) {
			if (i > 0) {
				countBefore += mAllChildViews.get(i - 1).size();
			}
			for (int j = 0; j < mAllChildViews.get(i).size(); j++) {
				View view = mAllChildViews.get(i).get(j);
				Rect rect = new Rect(view.getLeft(), view.getTop(),
						view.getRight(), view.getBottom());
				childLocationList.put(countBefore + j, rect);
			}
		}

	}

      現在有控制元件的位置了  我們只要能知道點的位置就夠了  下面重寫onTouchEvent方法

       /**
	 * 這裡我們需要判斷子控制元件是否被點選 點選的是哪個子控制元件
	 */
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			downX = (int) event.getX();
			downY = (int) event.getY();
			downTime = SystemClock.currentThreadTimeMillis();
			break;
		case MotionEvent.ACTION_UP:
			long upTime = SystemClock.currentThreadTimeMillis();
			if (upTime - downTime <= 50) {// 如果手指按下和手指離開鍵盤的時間小於50毫秒有效
				for (int i = 0; i < childLocationList.size(); i++) {
					if (childLocationList.get(i).contains(downX, downY)) {// 如果子控制元件所在位置(矩形)包括這個點
						if (onLabelSelectedListener != null) {
							onLabelSelectedListener.onSelected(i);//這個i是什麼   就是子控制元件是第幾個 直接把這個傳過去   現在知<span style="white-space:pre">												</span>//道這個集合的鍵做什麼用了吧
						}
						// 將記錄的上一個控制元件顏色改成未選中狀態
						if (lastSelectedPosition != -1) {
							TextView lastSelectedView = (TextView) getChildAt(lastSelectedPosition);
							lastSelectedView
									.setBackgroundResource(back_unselected);
						}
						// 將當前選中的控制元件背景改成選中狀態 並記錄
						TextView childAt = (TextView) getChildAt(i);
						childAt.setBackgroundResource(back_selected);
						lastSelectedPosition = i;
						break;
					}
				}
			}
			break;

		default:
			break;
		}
		return true;
	}

<span style="white-space:pre">	</span>/**
	 * 子控制元件(標籤)選中監聽
	 * 
	 * @author HaiPeng
	 * 
	 */
	public interface OnLabelSelectedListener {
		void onSelected(int position);
	}

	/**
	 * 設定子控制元件選中時的監聽
	 * 
	 * @param onLabelSelectedListener
	 */
	public void setOnLabelSelectedListener(
			OnLabelSelectedListener onLabelSelectedListener) {
		this.onLabelSelectedListener = onLabelSelectedListener;
	}

	/**
	 * 記錄上一次點選的是哪個子控制元件
	 */
	private int lastSelectedPosition = -1;
        private OnLabelSelectedListener onLabelSelectedListener;

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		// 父控制元件傳進來的寬度和高度以及對應的測量模式
		int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
		int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
		int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
		int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

		// 如果當前ViewGroup的寬高為wrap_content的情況
		int width = 0;// 自己測量的 寬度
		int height = 0;// 自己測量的高度
		// 記錄每一行的寬度和高度
		int lineWidth = 0;
		int lineHeight = 0;

		// 獲取子view的個數
		int childCount = getChildCount();
		for (int i = 0; i < childCount; i++) {
			View child = getChildAt(i);
			<span style="color:#FF6666;">child.setBackgroundResource(back_unselected);</span>
			// 測量子View的寬和高
			measureChild(child, widthMeasureSpec, heightMeasureSpec);
			// 得到LayoutParams
			MarginLayoutParams lp = (MarginLayoutParams) child
					.getLayoutParams();
			// 子View佔據的寬度
			int childWidth = child.getMeasuredWidth() + lp.leftMargin
					+ lp.rightMargin;
			// 子View佔據的高度
			int childHeight = child.getMeasuredHeight() + lp.topMargin
					+ lp.bottomMargin;
			// 換行時候
			if (lineWidth + childWidth > sizeWidth) {
				// 對比得到最大的寬度
				width = Math.max(width, lineWidth);
				// 重置lineWidth
				lineWidth = childWidth;
				// 記錄行高
				height += lineHeight;
				lineHeight = childHeight;
			} else {// 不換行情況
					// 疊加行寬
				lineWidth += childWidth;
				// 得到最大行高
				lineHeight = Math.max(lineHeight, childHeight);
			}
			// 處理最後一個子View的情況
			if (i == childCount - 1) {
				width = Math.max(width, lineWidth);
				height += lineHeight;
			}
		}
		// wrap_content
		setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth
				: width, modeHeight == MeasureSpec.EXACTLY ? sizeHeight
				: height);
	}

<span style="white-space:pre">	</span>private void initChildViews() {
		// TODO Auto-generated method stub
		mFlowLayout = (FlowLayout) findViewById(R.id.flowlayout);
		MarginLayoutParams lp = new MarginLayoutParams(
				LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		lp.leftMargin = 5;
		lp.rightMargin = 5;
		lp.topMargin = 5;
		lp.bottomMargin = 5;
		for (int i = 0; i < mNames.length; i++) {
			TextView view = new TextView(this);
			view.setText(mNames[i]);
			view.setTextColor(Color.BLACK);
			view.setPadding(5, 5, 5, 5);
			// view.setBackgroundDrawable(getResources().getDrawable(R.drawable.textview_bg));
			mFlowLayout.addView(view, lp);
		}
		mFlowLayout.setOnLabelSelectedListener(new OnLabelSelectedListener() {

			@Override
			public void onSelected(int position) {
				Toast.makeText(MainActivity.this, "第" + position + "個被點選了",
						Toast.LENGTH_SHORT).show();
			}
		});
	}

點選這裡下載原始碼