Android(安卓)实现自适应正方形GridView
16lz
2021-12-04
现在在Android应用中,GridView中每个Item都是正方形的场景越来越常见。比如 陌陌 的搜索结果界面
然后在GridItem布局文件 item.xml中使用上面的自定义layout:
最后在 MainActivity.java 中把上面的Adapter设置到GridView中即可。
Android手机和IPhone不同, IPhone硬件是苹果自己出的,屏幕尺寸基本没啥太大差别,所以很好适配。
而Android就不一样了,中高低档手机都有,屏幕尺寸严重不统一,如何做到一种实现适配各种Android手机屏幕才是关键。
今天我们就来研究下具体实现方式。
由于Android本身对设备特性支持比较有好,所以实现起来还是非常简单滴!
问题分析
要实现这种正方形布局,所以宽度不能是固定值,不然就要根据不同的屏幕尺寸分别设置了,麻烦死了。
比较好的方式就是设置一个最小宽度,然后多余的空间每个单元格平均分配,这个GridView本身就支持。
在测试的布局文件activity_main.xml 中代码如下:
@dimen/itemSize" android:gravity="center" android:horizontalSpacing="4dp" android:verticalSpacing="4dp" android:numColumns="auto_fit" android:scrollbars="vertical" android:scrollbarStyle="insideOverlay" android:stretchMode="columnWidth" />
注意上面标记为蓝色的属性取值。这样在计算GridView的列数时,先根据宽度看看能放几列,然后把多余的空间平均分配到每列中。 这样列数和宽度的问题就解决了。
在默认情况下itemSize的取值为100dp.
在每个GridItem宽度解决的情况下,只要保证高度和宽度一样就OK了。 使用一个自定义View,在onMeasure函数中设置下即可。
示例中选择一个自定义的Layout,代码如下:
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:
<?xml version="1.0" encoding="utf-8"?>
上面的测试布局中,用了两个控件,一个方形的ImageView显示图标,一个TextView在图标上显示一个半透明的文本。
然后自定义一个Adapter来使用上面的布局即可。GridAdapter.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- mItems = new ArrayList
(); 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中Collections.sort对List排序的两种方法
- python list.sort()根据多个关键字排序的方法实现
- 利用HTML5开发Android笔记
- android map (地图)
- Android之MVP模式实现登录和网络数据加载
- Android(安卓)系统log抓取,实现原理分析
- android实现蓝牙耳机的连接及列表的管理
- android 桌面程序 滑动抽屉 SlidingDraw,一个小小的demo
- Android中给View设置阴影的三种方式