Android自繪GridView控件

Android為我們提供了一個很好用的網格控件GridVIEw，它的另外一種實現Google在提供PSDK時包含了一個簡單的例子，大家一起來看看吧: 對於還不熟悉android平台控件子類化的網友可以看看其具體實現的方法，主要是構造時提供了初始化資源、計算控件的尺寸和位置measure相關的處理，大家本次需要注意的是這個固定的Gird是從VIEwGroup派生，沒有實現onDraw，注意下面的onLayout方法，完整代碼如下

  public class FixedGridLayout extends VIEwGroup {
    int mCellWidth;
    int mCellHeight;

    public FixedGridLayout(Context context) {
        super(context);
    }

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

        TypedArray a = context.obtainStyledAttributes(
                attrs, R.styleable.FixedGridLayout);
        mCellWidth = a.getDimensionPixelSize(
                R.styleable.FixedGridLayout_cellWidth, -1);
        mCellHeight = a.getDimensionPixelSize(
                R.styleable.FixedGridLayout_cellHeight, -1);
        a.recycle();
    }

    public void setCellWidth(int px) {
        mCellWidth = px;
        requestLayout();
    }

    public void setCellHeight(int px) {
        mCellHeight = px;
        requestLayout();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int cellWidthSpec = MeasureSpec.makeMeasureSpec(mCellWidth,
                MeasureSpec.AT_MOST);
        int cellHeightSpec = MeasureSpec.makeMeasureSpec(mCellHeight,
                MeasureSpec.AT_MOST);

        int count = getChildCount();
        for (int index=0; index<count; index++) {
            final VIEw child = getChildAt(index);
            child.measure(cellWidthSpec, cellHeightSpec);
        }
        // Use the size our parents gave us
        setMeasuredDimension(resolveSize(mCellWidth*count, widthMeasureSpec),
                resolveSize(mCellHeight*count, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cellWidth = mCellWidth;
        int cellHeight = mCellHeight;
        int columns = (r - l) / cellWidth;
        if (columns < 0) {
            columns = 1;
        }
        int x = 0;
        int y = 0;
        int i = 0;
        int count = getChildCount();
        for (int index=0; index<count; index++) {
            final VIEw child = getChildAt(index);

            int w = child.getMeasuredWidth();
            int h = child.getMeasuredHeight();

            int left = x + ((cellWidth-w)/2);
            int top = y + ((cellHeight-h)/2);

            child.layout(left, top, left+w, top+h);
            if (i >= (columns-1)) {
                // advance to next row
                i = 0;
                x = 0;
                y += cellHeight;
            } else {
                i++;
                x += cellWidth;
            }
        }
    }
}

調用的方法也很簡單，我們在Activity的onCreate中這樣寫即可。

@Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentVIEw(R.layout.main);

        FixedGridLayout grid = (FixedGridLayout)findVIEwById(R.id.grid);
        grid.setCellWidth(80);
        grid.setCellHeight(80);
    }

  涉及到的資源如下:  \res\values\attrs.XML 文件內容為

  <resources>
    <declare-styleable name="FixedGridLayout">
        <attr name="cellWidth" format="dimension" />
        <attr name="cellHeight" format="dimension" />
    </declare-styleable>
</resources>

而main.XML的內容為

   <?XML version="1.0" encoding="utf-8"?>
<com.android123.myGridVIEw.FixedGridLayout
        XMLns:android="http://schemas.android.com/apk/res/android"
        XMLns:app="com.android123.myGridVIEw"
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cellWidth="80dp"
        app:cellHeight="100dp"
        >
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
    <ImageVIEw
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"
        />
</com.android123.myGridVIEw.FixedGridLayout>

 那麼很多網友要問了，這個GridVIEw的內部元素在那裡，這裡例子懶省事直接在main.XML中往ViewGroup手動加入ImageVIEw實現n宮格的方法，Android123需要提醒網友的是，默認情況下android的GridView要比這個復雜得多，因為還需要綁定Adapter以及處理很多細節，是從AbsListView派生的，而非本例的VIEwGroup，這裡僅給大家另外一種思路去實現想要的功能。