Android UI组件学习——带预览的图片浏览器

Android UI组件学习

实例：带预览的图片浏览器

采用一个GridView以行、列的形式来组织所有图片的预览视图，然后程序用一个ImageView来显示图片
程序清单：\layout\main.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:orientation="vertical"
    android:layout_gravity="center_horizontal">
    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/grid01"
        android:horizontalSpacing="1pt"
        android:verticalSpacing="1pt"
        android:numColumns="4"
        android:gravity="center"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:layout_gravity="center_horizontal"/>
</LinearLayout>

\layout\cell.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">
    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:scaleType="fitCenter"
        android:id="@+id/image3">
    </ImageView>
</LinearLayout>

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

import androidx.annotation.Nullable;

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

public class MainActivity extends Activity {
    GridView gridView;
    ImageView imageView;
    int[] imageIds=new int[]{R.drawable.a,R.drawable.biao,R.drawable.q, R.drawable.w,
            R.drawable.e,R.drawable.t,R.drawable.y,R.drawable.u,
            R.drawable.i,R.drawable.hutou,R.drawable.nongyu,R.drawable.libai,
            R.drawable.liqingz,R.drawable.blow,R.drawable.o,R.drawable.p};

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        List<Map<String,Object>> listItems=new ArrayList<Map<String,Object>>();
        for(int i=0;i<imageIds.length;i++){
            Map<String,Object> item=new HashMap<>();
            item.put("image",imageIds[i]);
            listItems.add(item);
        }
        //获取显示图片的ImageView
        imageView=findViewById(R.id.imageView);
        SimpleAdapter simpleAdapter=new SimpleAdapter(this,listItems,R.layout.cell,new String[]{"image"},new int[]{R.id.image3});
        gridView=findViewById(R.id.grid01);
        gridView.setAdapter(simpleAdapter);
        //添加列表项被选中的监听器
        gridView.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                imageView.setImageResource(imageIds[position]);
            }

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

            }
        });
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                imageView.setImageResource(imageIds[position]);
            }
        });
    }
}