Gridview图片正方形

现在在Android应用中，GridView中每个Item都是正方形的场景越来越常见。比如陌陌的搜索结果界面

陌陌的搜索界面显示

Android手机和IPhone不同， IPhone硬件是苹果自己出的，屏幕尺寸基本没啥太大差别，所以很好适配。

而Android就不一样了，中高低档手机都有，屏幕尺寸严重不统一，如何做到一种实现适配各种Android手机屏幕才是关键。

今天我们就来研究下具体实现方式。

由于Android本身对设备特性支持比较有好，所以实现起来还是非常简单滴！

问题分析

要实现这种正方形布局，所以宽度不能是固定值，不然就要根据不同的屏幕尺寸分别设置了，麻烦死了。

比较好的方式就是设置一个最小宽度，然后多余的空间每个单元格平均分配，这个GridView本身就支持。

在测试的布局文件activity_main.xml 中代码如下：

Java

< RelativeLayout xmlns : android = "http://schemas.android.com/apk/res/android"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

< GridView

android : id = "@+id/grid"

android : background = "@color/grid_bg_color"

android : layout_width = "fill_parent"

android : layout_height = "fill_parent"

android : columnWidth = "@dimen/itemSize"

android : gravity = "center"

android : horizontalSpacing = "4dp"

android : verticalSpacing = "4dp"

android : numColumns = "auto_fit"

android : scrollbars = "vertical"

android : scrollbarStyle = "insideOverlay"

android : stretchMode = "columnWidth"

/ >

< / RelativeLayout >

注意上面标记为蓝色的属性取值。这样在计算GridView的列数时，先根据宽度看看能放几列，然后把多余的空间平均分配到每列中。这样列数和宽度的问题就解决了。

在默认情况下itemSize的取值为100dp.

在每个GridItem宽度解决的情况下，只要保证高度和宽度一样就OK了。使用一个自定义View，在onMeasure函数中设置下即可。

示例中选择一个自定义的Layout，代码如下：

Java

package org . goodev . squaregrid ;

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 ) ;

}

然后在GridItem布局文件 item.xml中使用上面的自定义layout:

Java

<? xml version = "1.0" encoding = "utf-8" ?>

< org . goodev . squaregrid . SquareLayout xmlns : android = "http://schemas.android.com/apk/res/android"

android : layout_width = "match_parent"

android : layout_height = "wrap_content"

< ImageView

android : id = "@+id/icon"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : scaleType = "fitXY"

android : src = "@drawable/ic_launcher" / >

< TextView

android : id = "@+id/text"

android : layout_width = "match_parent"

android : layout_height = "wrap_content"

android : background = "#88000000"

android : textColor = "#FFFFFF"

android : layout_alignParentBottom = "true"

android : gravity = "center_horizontal"

/ >

< / org . goodev . squaregrid . SquareLayout >

上面的测试布局中，用了两个控件，一个方形的ImageView显示图标，一个TextView在图标上显示一个半透明的文本。

然后自定义一个Adapter来使用上面的布局即可。GridAdapter.java 代码如下

Java

package org . goodev . squaregrid ;

import java . util . ArrayList ;

import java . util . List ;

import android . content . Context ;

import android . view . LayoutInflater ;

import android . view . View ;

import android . view . ViewGroup ;

import android . widget . BaseAdapter ;

import android . widget . ImageView ;

import android . widget . TextView ;

public class GridAdapter extends BaseAdapter {

public static class Item {

public String text ;

public int resId ;

}

private List <Item> mItems = new ArrayList < GridAdapter . Item > ( ) ;

private Context mContext ;

public GridAdapter ( Context context ) {

//测试数据

for ( int i = 0 ; i < 50 ; i ++ ) {

Item object = new Item ( ) ;

object . text = "Text " + i ;

object . resId = R . drawable . icon ;

mItems . add ( object ) ;

}

mContext = context ;

}

@Override

public int getCount ( ) {

return mItems . size ( ) ;

}

@Override

public Object getItem ( int position ) {

return mItems . get ( position ) ;

}

@Override

public long getItemId ( int position ) {

return position ;

}

@Override

public View getView ( int position , View convertView , ViewGroup parent ) {

if ( convertView == null ) {

convertView = LayoutInflater . from ( mContext ) . inflate ( R . layout . item , null ) ;

}

ImageView image = ( ImageView ) convertView . findViewById ( R . id . icon ) ;

TextView text = ( TextView ) convertView . findViewById ( R . id . text ) ;

Item item = ( Item ) getItem ( position ) ;

image . setImageResource ( item . resId ) ;

text . setText ( item . text ) ;

return convertView ;

}

最后在 MainActivity.java 中把上面的Adapter设置到GridView中即可。

Java

package org . goodev . squaregrid ;

import android . os . Bundle ;

import android . app . Activity ;

import android . widget . GridView ;

public class MainActivity extends Activity {

@Override

protected void onCreate ( Bundle savedInstanceState ) {

super . onCreate ( savedInstanceState ) ;

setContentView ( R . layout . activity_main ) ;

GridView view = ( GridView ) findViewById ( R . id . grid ) ;

view . setAdapter ( new GridAdapter ( getBaseContext ( ) ) ) ;

}

下面是在手机上运行的截图

SquareGridView测试截图

下面是在Nexus 7平板上的截图：

测试程序在Nexus 7上的截图

可以看到上面的效果虽然也是正方形，但是在大屏幕下显示100dp的方块是否看起来太小了。把该尺寸在平板上修改大点是非常容易的。只需要在 values-sw600dp 目录中(Nexus 7 的最小屏幕宽度为600dp)创建一个文件

dimens.xml 内容如下：

Java

<? xml version = "1.0" encoding = "utf-8" ?>

< dimen name = "itemSize" > 140dp < / dimen >

< / resources >

这样当程序在Nexus 7上运行的时候，会根据140dp来计算列数。最终效果如下：

在Nexus 7上改进后的布局

同样的，如果想在手机横屏(比如Galaxy Nexus手机)下也显示大一点的图，则可以根据手机的长度的dp值分别设置一个区间

比如Galaxy Nexus手机屏幕高度为640dp，但是在横屏情况下应用能用的宽度只有570dp，另外的70dp位于右侧的系统功能键（返回键、Home键、最近任务键）占用了。所以创建个目录

values-w570dp-land，在里面设置ItemWidth即可， dimens.xml 内容：

Java

<? xml version = "1.0" encoding = "utf-8" ?>

< dimen name = "itemSize" > 140dp < / dimen >

< / resources >

下面两个图是横屏的对比

Galaxy Nexus 横屏显示小图标

Galaxy Nexus 横屏显示修改后的图标

现在效果已经完成了，只差没有选中按下状态的标示了。要实现这个Press状态，可在item.xml中添加一个View，当Press的时候显示一个半透明的图层来标示。

修改后的item.xml 代码如下

Java

<? xml version = "1.0" encoding = "utf-8" ?>

< org . goodev . squaregrid . SquareLayout xmlns : android = "http://schemas.android.com/apk/res/android"

android : layout_width = "match_parent"

android : layout_height = "wrap_content"

< ImageView

android : id = "@+id/icon"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : scaleType = "fitXY"

android : src = "@drawable/ic_launcher" / >

< TextView

android : id = "@+id/text"

android : layout_width = "match_parent"

android : layout_height = "wrap_content"

android : background = "#88000000"

android : textColor = "#FFFFFF"

android : layout_alignParentBottom = "true"

android : gravity = "center_horizontal"

/ >

< View

android : id = "@+id/press"

android : layout_width = "match_parent"

android : layout_height = "match_parent"

android : background = "@drawable/item_press_bg"

/ >

< / org . goodev . squaregrid . SquareLayout >

上面红色部分的View只设置的一个背景，在选中或者按下的状态下显示一个半透明度颜色。

效果如下：

第二行中间那个按下效果

代码：https://github.com/goodev/SquareGridView/tree/master/SquareGrid

本文出自云在千峰，转载时请注明出处及相应链接。

本文永久链接: http://blog.chengyunfeng.com/?p=465

Read more: http://blog.chengyunfeng.com/?p=465#ixzz4CMain8h1

转自：http://blog.chengyunfeng.com/?p=465

Android学习交流群：523487222

（如果您觉得有用，欢迎加入，一起学习进步）
点击链接加入群【Android学习群】