iOS的图标栅格系统和andriod的一致

文章目录

• 一、案例操作 - 选择水果

• 1、创建安卓应用【SelectFruit】
• 2、将图片素材拷贝到drawable目录
• 3、主布局资源文件activity_main.xml
• 4、网格项模板fruit_grid_item.xml
• 5、字符串资源文件strings.xml
• 6、主界面类 - MainActivity

一、案例操作 - 选择水果

1、创建安卓应用【SelectFruit】

2、将图片素材拷贝到drawable目录

3、主布局资源文件activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvSwitchMode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/switch_mode"
            android:textColor="#000000"
            android:textSize="20sp" />

        <RadioGroup
            android:id="@+id/rgSwitchMode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rbFadeInOut"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="@string/fade_in_out"
                android:textColor="#0000ff"
                android:textSize="20sp" />

            <RadioButton
                android:id="@+id/rbSlideInOut"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/slide_in_out"
                android:textColor="#0000ff"
                android:textSize="20sp" />
        </RadioGroup>
    </LinearLayout>

    <!-- 图像切换器，设置淡入淡出效果 -->
    <ImageSwitcher
        android:id="@+id/isFruit"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginBottom="20dp"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out" />

    <!-- 网格视图，设置为4列 -->
    <GridView
        android:id="@+id/gvFruit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnWidth="20dp"
        android:numColumns="4">
    </GridView>
</LinearLayout>

4、网格项模板fruit_grid_item.xml

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

    <ImageView
        android:id="@+id/ivFruit"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/img1" />

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

5、字符串资源文件strings.xml

<resources>
    <string name="app_name">选择水果（网格视图 - 图像切换器）</string>
    <string name="switch_mode">图像切换模式：</string>
    <string name="fade_in_out">淡入淡出</string>
    <string name="slide_in_out">左进右出</string>
</resources>

6、主界面类 - MainActivity

• 声明变量
• 通过资源标识符获取控件实例
• 初始化图像标识符数组
• 获取水果列表作为数据源
• 创建简单适配器
• 网格控件设置适配器
• 给切换模式单选按钮组注册监听器
• 设置图像切换器的视图工厂
• 设置图像切换器的初始图像
• 网格设置项目单击事件监听器
• 网格设置项目选择事件监听器
• 查看源代码

package net.hw.select_fruit;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.FrameLayout;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.RadioGroup;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private GridView gvFruit; // 水果网格控件
    private ImageSwitcher isFruit; // 水果图像切换器
    private int[] imgIds; // 图像标识符数组
    private final int IMG_COUNT = 16; // 图像总数
    private SimpleAdapter adapter; // 简单适配器
    private List<HashMap<String, Object>> fruits; // 水果列表
    private RadioGroup rgSwitchMode; // 图像切换模式单项按钮组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 利用布局资源文件设置用户界面
        setContentView(R.layout.activity_main);

        // 通过资源标识符获取控件实例
        gvFruit = findViewById(R.id.gvFruit);
        isFruit = findViewById(R.id.isFruit);
        rgSwitchMode = findViewById(R.id.rgSwitchMode);

        // 初始化图像标识符数组
        imgIds = new int[IMG_COUNT];
        for (int i = 0; i < IMG_COUNT; i++) {
            imgIds[i] = getResources().getIdentifier("img" + (i + 1),
                    "drawable", "net.hw.select_fruit");
        }

        // 获取水果列表作为数据源
        fruits = getFruits();

        // 创建简单适配器
        adapter = new SimpleAdapter(this, // 上下文
                fruits, // 数据源（水果列表）
                R.layout.fruit_grid_item, // 网格项模板
                new String[] { "ivFruit", "tvLabel" }, // 数据源字段名数组
                new int[] { R.id.ivFruit, R.id.tvLabel} // 控件资源标识
                );

        // 网格控件设置适配器
        gvFruit.setAdapter(adapter);

        // 给切换模式单选按钮组注册监听器
        rgSwitchMode.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // 根据切换模式设置图像切换器的动画效果
                switch (checkedId) {
                    case R.id.rbFadeInOut:
                        isFruit.setInAnimation(MainActivity.this, android.R.anim.fade_in);
                        isFruit.setOutAnimation(MainActivity.this, android.R.anim.fade_out);
                        break;
                    case R.id.rbSlideInOut:
                        isFruit.setInAnimation(MainActivity.this, android.R.anim.slide_in_left);
                        isFruit.setOutAnimation(MainActivity.this, android.R.anim.slide_out_right);
                        break;
                }
            }
        });

        // 设置图像切换器的视图工厂
        isFruit.setFactory(new ViewSwitcher.ViewFactory() {

            @Override
            public View makeView() {
                ImageView image = new ImageView(MainActivity.this);
                // 设置缩放类型
                image.setScaleType(ImageView.ScaleType.FIT_CENTER);
                // 设置布局参数（注意要导入FrameLayout.LayoutParams）
                image.setLayoutParams(new FrameLayout.LayoutParams(
                        FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.WRAP_CONTENT));
                return image;
            }
        });

        // 设置图像切换器的初始图像
        isFruit.setImageResource(imgIds[0]);

        // 网格设置项目单击事件监听器
        gvFruit.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // 设置图像切换器的图像源
                isFruit.setImageResource(imgIds[position]);
            }
        });

        // 网格设置项目选择事件监听器
        gvFruit.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                // 设置图像切换器的图像源
                isFruit.setImageResource(imgIds[position]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
            }
        });
    }

    /**
     * @return 水果列表
     */
    private List<HashMap<String, Object>> getFruits() {
        List<HashMap<String, Object>> fruits = new ArrayList<HashMap<String, Object>>();

        for (int i = 0; i < IMG_COUNT; i++) {
            HashMap<String, Object> fruit = new HashMap<String, Object>();
            fruit.put("ivFruit", imgIds[i]);
            fruit.put("tvLabel", "No. " + (i + 1));
            fruits.add(fruit);
        }

        return fruits;
    }
}

7、启动应用，查看效果