【Interface&navigation】网格视图(14)


GridView是一个ViewGroup在二维,可滚动的网格中显示项目。网格项目使用a自动插入到布局中ListAdapter。

注意: 为了获得更好的性能和工具支持,您应该使用ConstraintLayout构建布局。

有关如何使用适配器动态插入视图的介绍,请阅读使用适配器 构建布局。

【Interface&navigation】网格视图(14)


在本教程中,您将创建一个图像缩略图网格。当一个项目被选中时,一个吐司消息将显示图像的位置。

开始一个名为HelloGridView的新项目。
查找一些您想要使用的照片,或下载这些示例图片。将图像文件保存到项目的 res/drawable/目录中。
打开res/layout/main.xml文件并插入以下内容:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

这GridView将填满整个屏幕。这些属性相当自我解释。有关有效属性的更多信息,请参阅GridView参考。

打开HelloGridView.java并为该onCreate()方法插入以下代码 :

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));

    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {
            Toast.makeText(HelloGridView.this, "" + position,
                    Toast.LENGTH_SHORT).show();
        }
    });
}

在main.xml为内容视图设置布局之后,将使用布局 GridView从布局捕获该布局findViewById(int)。setAdapter()然后该方法将自定义适配器(ImageAdapter)设置为网格中要显示的所有项目的源。这ImageAdapter是在下一步中创建的。

点击网格中的某个项目时,要执行某些操作,该setOnItemClickListener() 方法会传递一个新的AdapterView.OnItemClickListener。这个匿名实例定义onItemClick()回调方法来显示一个Toast显示所选项目的索引位置(从零开始)(在真实世界的场景中,该位置可用于获取完整大小的图像以执行其他任务)。

创建一个叫做ImageAdapter扩展的新类BaseAdapter:

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };
}

首先,这实现了一些继承的必需方法BaseAdapter。构造函数getCount()是不言自明的。通常情况下,getItem(int)应该返回适​​配器中指定位置的实际对象,但在此示例中忽略它。同样,getItemId(int)应该返回该项目的行ID,但这里不需要。

第一种必要的方法是getView()。此方法View为添加到每个图像的每个图像创建一个新的ImageAdapter。当这个被调用时,View传入一个a ,通常是一个循环对象(至少在这个被调用一次之后),所以有一个检查是否该对象为空。如果它为空,则将ImageView实例化并为图像显示配置所需的属性:

setLayoutParams(ViewGroup.LayoutParams) 设置视图的高度和宽度 - 这可确保无论可绘制的大小如何,每个图像都会根据需要调整大小并裁剪以适合这些尺寸。
setScaleType(ImageView.ScaleType) 声明应该将图像裁剪到中心(如有必要)。
setPadding(int, int, int, int)定义所有面的填充。(请注意,如果图像具有不同的纵横比,那么如果图像与给定的ImageView尺寸不匹配,则较少的填充会导致图像裁剪更多。)
如果View传递给getView()的不是 null,那么本地 ImageView将使用回收的View 对象进行初始化。

在该getView()方法结束时,position传入该方法的整数用于从mThumbIds 数组中选择一个图像,该数组被设置为该图像的图像资源ImageView。

剩下的就是定义mThumbIds可绘制资源的数组。

运行应用程序。
尝试使用的行为实验GridView,并ImageView通过调整它们的属性的元素。例如,而不是使用 setLayoutParams(ViewGroup.LayoutParams),尝试使用 setAdjustViewBounds(boolean)。

联系我

QQ:94297366
微信打赏:https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公众号推荐:

【Interface&navigation】网格视图(14)

猜你喜欢

转载自blog.51cto.com/4789781/2135003