Android笔记-GridView实现九宫格布局

类似手机系统桌面的九宫格布局，以图片和文字进行搭配，可以使用GridView来实现。类似效果如下：

使用GridView实现过程：

1.在activity_main.xml中修改代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><GridViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/channel"android:numColumns="3"android:verticalSpacing="24dp"android:layout_marginTop="40dp"></GridView></LinearLayout>

关于GridView的详细属性：https://blog.csdn.net/lyy666888/article/details/79163632

2.创建Channel类用来表示每个单元格的内容

public class Channel  {private int imgId;private String dec;public int getImgId() {return imgId;}public void setImgId(int imgId) {this.imgId = imgId;}public String getDec() {return dec;}public void setDec(String dec) {this.dec = dec;}
}

3.创建ChannelAdapter类继承BaseAdapter来作为GridView的适配器

public class ChannelAdapter extends BaseAdapter {private ArrayList<Channel> channelList;private LayoutInflater layoutInflater;public ChannelAdapter(ArrayList<Channel> list, Context context){channelList = list;layoutInflater = LayoutInflater.from(context);}@Overridepublic int getCount() {return channelList.size();}@Overridepublic Object getItem(int position) {return channelList.get(position);}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ViewHolder holder = null;if(convertView == null){//加载布局convertView =layoutInflater.inflate(R.layout.grid_item,null);holder = new ViewHolder();holder.imgChannel = (ImageView)convertView.findViewById(R.id.channel_img);holder.decChannel = (TextView)convertView.findViewById(R.id.channel_dec);convertView.setTag(holder);}else{holder = (ViewHolder)convertView.getTag();}//设置图标和文字Channel channel = channelList.get(position);if(channel != null){holder.decChannel.setText(channel.getDec());switch (channel.getDec()){case "Test1":holder.imgChannel.setImageResource(R.drawable.test);break;case "Test2":holder.imgChannel.setImageResource(R.drawable.test);break;case "Test.":holder.imgChannel.setImageResource(R.drawable.test);break;}}return convertView;}class ViewHolder{ImageView imgChannel;TextView decChannel;}
}

其中在getView方法中用到的资源文件有grid_item布局和一张用来显示的测试图标，图标文件大家可以找一个小一点的测试图标，grid_item.xml代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:layout_width="60dp"android:layout_height="60dp"android:id="@+id/channel_img"android:layout_gravity="center"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:id="@+id/channel_dec"android:textSize="20sp"/></LinearLayout>

4.修改MainActivity中的代码

public class MainActivity extends AppCompatActivity {private GridView mGridView;  //九宫格private String[] channelDec;private int[] channelImg;private ArrayList<Channel> channelList;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initChannelView(); //实现九宫格}private void initChannelView(){mGridView = (GridView)findViewById(R.id.channel);channelImg = new int[]{R.id.grid_img1,R.id.grid_img2,R.id.grid_img3,R.id.grid_img4,R.id.grid_img5,R.id.grid_img6,R.id.grid_img7,R.id.grid_img8,R.id.grid_img9};channelDec = new String[]{"Test1","Test2","Test.","Test.","Test.","Test.","Test.","Test.","Test."};channelList = new ArrayList<>();for(int i=0;i<channelDec.length;i++){Channel channel = new Channel();channel.setImgId(channelImg[i]);channel.setDec(channelDec[i]);channelList.add(channel);}mGridView.setAdapter(new ChannelAdapter(channelList,this));//给九宫格设置监听器mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener(){@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {switch (position){case 0:Toast.makeText(MainActivity.this,"TEST1",Toast.LENGTH_SHORT).show();break;case 1:Toast.makeText(MainActivity.this,"TEST2",Toast.LENGTH_SHORT).show();                       break;default:Toast.makeText(MainActivity.this,"TEST...",Toast.LENGTH_SHORT).show();break;}}});}
}

其中用到要给每个图标文件设置id的一个过程，所以在values文件夹下新建一个grid_img.xml文件

<resources><item name="grid_img1" type="id"></item><item name="grid_img2" type="id"></item><item name="grid_img3" type="id"></item><item name="grid_img4" type="id"></item><item name="grid_img5" type="id"></item><item name="grid_img6" type="id"></item><item name="grid_img7" type="id"></item><item name="grid_img8" type="id"></item><item name="grid_img9" type="id"></item>
</resources>

至此一个简单的九宫格的功能就完成了，至于更多功能大家可以自行研究

Android笔记-GridView实现九宫格布局相关推荐

Android中用GridView实现九宫格的两种方法(转)
Android中用GridView实现九宫格的两种方法 http://blog.csdn.net/shakespeare001/article/details/7768455 1.传统办法:实现一个继 ...
Android中用GridView实现九宫格的两种方法
1.传统办法:实现一个继承BaseAdapter的 ImageAdapter java代码如下: [java] view plaincopy package com.test; import andr ...
Android笔记之Android基本控件布局与Activity的生命周期
前言喜欢安卓里千奇百怪的app,酷炫的UI或者好玩的游戏.想知道那些软件是如何做的,为什么我在微博里发一条消息,就能一直存在网上,让别人看到?为什么我点击一个按钮就出现了一个效果,某个功能?为什么滑 ...
iOS回顾笔记（ 02 ） -- 由九宫格布局引发的一系列“惨案”
iOS回顾笔记( 02 ) -- 由九宫格布局引发的一系列"惨案" 前言(扯几句淡先) 回顾到学习UI过程中的九宫格布局时,发现当时学的东西真是不少. 这个阶段最大的特点就是:知识 ...
Android Studio 笔记3.3 相对布局
文章目录一.前言二.笔记3.3 相对布局 (一)相对布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)相对于父容器居中 (2)相对于父容器对齐 (3)相对于其它控件位置 (4)相对于其它 ...
android 长方形九宫格布局,房子九宫格布局，长方形房屋九宫格怎么画
1,长方形房屋九宫格怎么画也可直接点"搜索资料"搜索整个问题. 长方形九宫格房屋搜索资料本地图片图片链接提交回答匿名回答自动保存中为你推荐:特别推荐... 2,什 ...
Android利用GridView加载九宫格菜单
效果图如下: 第一步:布局main.xml文件,这里使用了一个GridView和一个滚动文本控件 <?xml version="1.0" encoding="utf ...
android gridview居中,Android中GridView布局实现整体居中方法示例
前言本文主要给大家介绍了关于Android中GridView布局整体居中的相关内容,是对于自己在项目中遇到问题的一个记录,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 效果图: ...
android listview替代,Android笔记——RecyclerView替代ListView
ListView是常用列表控件,但设置Adapter时自定义代码较为复杂,因此Android3.0后,增加RecyclerView替代ListView RecyclerView没有提供OnItemCl ...