Android教程網 >> Android技術 >> 關於Android編程 >> Android 正方形顯示圖片並適配手機的方法介紹

Android 正方形顯示圖片並適配手機的方法介紹

編輯：關於Android編程

剛剛做了一個項目，是做應用牆相關的，就是把一個個應用的圖標和名稱顯示到GridView中。本來想著，像GridView這樣常用成熟的控件，使用應該非常的簡單，但真正在項目中實現起來，就有各種各樣的小問題，其中一個就是不能適配所有的手機型號。

下面就講解我項目中使用的適配方法，或許不是最好的，如果那位大神有更好的方法，望指點~~

一、GridView簡單使用

一開始，只是簡單的布局GridView，把GridView的列數指定為4列。GridView布局如下：

而Item的布局也很簡單直接：

顯示的結果如下：

看上面效果圖，在不同分辨率的手機顯示，同樣是四列，但效果差別非常大。

這是為什麼？？

這個不難解釋，獲取的圖片資源是一樣的，但手機的分辨率不一樣，顯示是按圖片大小進行自適應的（即ImageView設置wrap_content），所以就出現了上面的現象，那怎麼辦呢？？

二、設定GridView的列寬

上面是因為圖片顯示小效果差，那就會想到把ImageView的大小（即GridView列的大小）設置為固定值，然後把圖片資源填滿，這樣不就好OK了麼？

但深究，就會發現，固定大小真的可以嗎？比如手機的屏幕大小為480dp，而設置ImageView的寬度為100dp, 那麼480/100=4 余80，那剩下的80dp怎麼辦？

其實Android早想到了，而且提供了很好的解決辦法：不設置GridView列的固定值，而是設置列的最小值，然後根據最小值決定分成列數，最後把剩余的平均分配給列或者列之間的間隙。如，上面把列的最小值設為100dp，那麼480/100=4即可以分成4列，最後剩余的80dp可以平均分配給4列，那麼最終為4列，每列120dp。

下面為上面說明的布局：

android:columnWidth="100dp" 設置每列最小寬度

android:numColumns="auto_fit" 列數自適配，系統會根據上面的列寬計算列數

android:stretchMode="columnWidth" 剩余的平均分配給列，當然也可以平均分配給列之間的間隙。

於是，我的GridView的布局如下：

Item的布局如下：

再來看效果圖：

效果圖看出，圖片的寬度是合理了，但是高度不合適，高度還是圖片實際高度，所以出現拉伸。

回看上面的GridView 的布局，可以看出我們只是規定了寬度的大小，而沒有對高度進行設置，當然就是這樣的效果了。

那應該怎樣設置Item中ImageView的高度？我沒有找到Android提供的直接的方法，那就只能自己來了。

三、設置GridView Item的高度

給控件設定大小，想到的自然是自定義控件裡面的onMeasure()方法了，也很簡單，在onMeasure裡面把寬高設置相等即可，直接上代碼：

package com.mobisummer.ads.wall;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;

public class SquareLayout extends RelativeLayout {
    public SquareLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

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

    @SuppressWarnings("unused")
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // For simple implementation, or internal size is always 0.
        // We depend on the container to specify the layout size of
        // our view. We can't really know what it is since we will be
        // adding and removing different arbitrary views and do not
        // want the layout to change as this happens.
        setMeasuredDimension(getDefaultSize(0, widthMeasureSpec), getDefaultSize(0, heightMeasureSpec));

        // Children are just made to fill our space.
        int childWidthSize = getMeasuredWidth();
        int childHeightSize = getMeasuredHeight();
        //高度和寬度一樣
        heightMeasureSpec = widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidthSize, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

當然，我其中的需求是圖片正方形顯示，而不是GridView中的整個Item，因為Item中還包含文本，所以只需要把上面自定義的布局應用於ImageView即可。Item的代碼如下：

看效果圖：