码迷,mamicode.com
首页 > 其他好文 > 详细

GridView(网格视图)的使用

时间:2016-02-26 23:33:05      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

一、GridView概述

GridView是一个以表格形式显示多张图片等组件。它是按照行列的方式来显示内容的,比如实现九宫格图,用GridView是首选。

技术分享

二、GridView常用属性

属性名称

描述

android:columnWidth

设置列的宽度。

android:gravity

设置此组件中的内容在组件中的位置。可选的值有:top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选,用“|”分开。

android:horizontalSpacing

两列之间的间距。

android:numColumns

设置列数。

android:stretchMode

缩放模式。

android:verticalSpacing

两行之间的间距。

 

三、GridView的使用

1.准备数据源(图片和文字)

2.新建适配器(设置自定义的单元格布局和数据源)

3.GridView加载适配器

4.GridView配置事件监听

Activity代码

public class GridActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);
        GridView gridView = (GridView) findViewById(R.id.app_gv);
        //加载适配器
        gridView.setAdapter(new GridAdapter(GridActivity.this,initData()));
    }
    //数据源准备
    private List<AppInfo> initData(){
        List<AppInfo> appList = new ArrayList<>();
        appList.add(new AppInfo(R.drawable.wx_01,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_02,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_03,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_04,"wx01"));
        appList.add(new AppInfo(R.drawable.wx_05,"wx01"));
        return appList;
    }
}

 

GridView布局代码

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

 

 

适配器代码

public class GridAdapter extends BaseAdapter {

    private Context context;
    private List<AppInfo> appList;
    private ImageView imageView;
    private TextView textView;

    public GridAdapter(Context context,List<AppInfo> appList){
        this.context = context;
        this.appList = appList;
    }
    @Override
    public int getCount() {
        return appList.size();
    }

    @Override
    public Object getItem(int position) {
        return appList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        AppInfo app = appList.get(position);
        convertView = View.inflate(context, R.layout.item_grid,null);
        imageView = (ImageView) convertView.findViewById(R.id.appImg);
        textView = (TextView) convertView.findViewById(R.id.appName);
        imageView.setImageResource(app.getAppImg());
        textView.setText(app.getAppName());
        return convertView;
    }
}

单元格布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/appImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/appName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="ItemName"/>

</LinearLayout>

 

GridView(网格视图)的使用

标签:

原文地址:http://www.cnblogs.com/ccshxt/p/5222064.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!