现在在Android应用中,GridView中每个Item都是正方形的场景越来越常见。比如 陌陌 的搜索结果界面
陌陌的搜索界面显示
Android手机和IPhone不同, IPhone硬件是苹果自己出的,屏幕尺寸基本没啥太大差别,所以很好适配。
而Android就不一样了,中高低档手机都有,屏幕尺寸严重不统一,如何做到一种实现适配各种Android手机屏幕才是关键。
今天我们就来研究下具体实现方式。
由于Android本身对设备特性支持比较有好,所以实现起来还是非常简单滴!
问题分析
要实现这种正方形布局,所以宽度不能是固定值,不然就要根据不同的屏幕尺寸分别设置了,麻烦死了。
比较好的方式就是设置一个最小宽度,然后多余的空间每个单元格平均分配,这个GridView本身就支持。
在测试的布局文件activity_main.xml 中代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<
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
=
"<span style="
color
:
#
0000ff
;
">@dimen/itemSize</span>"
android
:
gravity
=
"center"
android
:
horizontalSpacing
=
"4dp"
android
:
verticalSpacing
=
"4dp"
android
:
numColumns
=
"<span style="
color
:
#
0000ff
;
">auto_fit</span>"
android
:
scrollbars
=
"vertical"
android
:
scrollbarStyle
=
"insideOverlay"
android
:
stretchMode
=
"<span style="
color
:
#
0000ff
;
">columnWidth</span>"
/
>
<
/
RelativeLayout
>
|
注意上面标记为蓝色的属性取值。这样在计算GridView的列数时,先根据宽度看看能放几列,然后把多余的空间平均分配到每列中。 这样列数和宽度的问题就解决了。
在默认情况下itemSize的取值为100dp.
在每个GridItem宽度解决的情况下,只要保证高度和宽度一样就OK了。 使用一个自定义View,在onMeasure函数中设置下即可。
示例中选择一个自定义的Layout,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?
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 代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
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中即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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
(
)
)
)
;
}
}
|
下面是在手机上运行的截图
下面是在Nexus 7平板上的截图:
可以看到上面的效果虽然也是正方形,但是在大屏幕下显示100dp的方块是否看起来太小了。 把该尺寸在平板上修改大点是非常容易的。只需要在 values-sw600dp 目录中(Nexus 7 的最小屏幕宽度为600dp)创建一个文件
dimens.xml 内容如下:
1
2
3
4
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<resources>
<
dimen
name
=
"itemSize"
>
140dp
<
/
dimen
>
<
/
resources
>
|
这样当程序在Nexus 7上运行的时候,会根据140dp来计算列数。最终效果如下:
同样的,如果想在手机横屏(比如Galaxy Nexus手机)下也显示大一点的图,则可以根据手机的长度的dp值分别设置一个区间
比如Galaxy Nexus手机屏幕高度为640dp,但是在横屏情况下应用能用的宽度只有570dp,另外的70dp位于右侧的系统功能键(返回键、Home键、最近任务键)占用了。所以创建个目录
values-w570dp-land,在里面设置ItemWidth即可, dimens.xml 内容:
1
2
3
4
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<resources>
<
dimen
name
=
"itemSize"
>
140dp
<
/
dimen
>
<
/
resources
>
|
下面两个图是横屏的对比
Galaxy Nexus 横屏显示修改后的图标
现在效果已经完成了,只差没有选中按下状态的标示了。 要实现这个Press状态,可在item.xml中添加一个View,当Press的时候 显示一个半透明的图层来标示。
修改后的item.xml 代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?
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"
/
>
<
span
style
=
"color: #ff0000;"
>
<
View
<
/
span
>
<
span
style
=
"color: #ff0000;"
>
android
:
id
=
"@+id/press"
<
/
span
>
<
span
style
=
"color: #ff0000;"
>
android
:
layout_width
=
"match_parent"
<
/
span
>
<
span
style
=
"color: #ff0000;"
>
android
:
layout_height
=
"match_parent"
<
/
span
>
<
span
style
=
"color: #ff0000;"
>
android
:
background
=
"@drawable/item_press_bg"
<
/
span
>
<
span
style
=
"color: #ff0000;"
>
/
>
<
/
span
>
<
/
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