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">

    <GridView
        android: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);
    }

    @Override
    public int getCount() {
        return channelList.size();
    }

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

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

    @Override
    public 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">

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/channel_img"
        android:layout_gravity="center"/>

    <TextView
        android: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;

    @Override
    protected 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(){
            @Override
            public 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>

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