Android Studio 实现注册界面选择头像功能{记录4}{使用GridView控件}

功能需求:在用户注册界面中，增加头像选择功能

使用GridView控件

1.从用户注册界面，点击选择头像，跳转到头像选择界面

2.头像选择界面中，以网格形式显示系统内置头像

3.在头像选择界面中，点击头像后，返回用户注册界面，并显示所选择的头像

   

1.创建注册界面的xml文件register.xml

增加选择头像的按钮

代码为：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".RegActivity"
    android:padding="20dp">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tvuser"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="用户名" />

                <EditText
                    android:id="@+id/user"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:ems="10"
                    android:hint="请输入用户名"
                    android:inputType="textPersonName"
                    android:minHeight="48dp" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:gravity="center"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:text="使用头像" />

                <ImageView
                    android:id="@+id/reg_img"
                    android:layout_width="0dp"
                    android:layout_height="70dp"
                    android:layout_weight="3"/>
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/btn_choose"
                    android:text="选择头像">

                </Button>


            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tvpwo"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="密码" />

                <EditText
                    android:id="@+id/pwo"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:ems="10"
                    android:hint="请输入密码"
                    android:inputType="textPassword"
                    android:minHeight="48dp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tvrepwo"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="确认密码" />

                <EditText
                    android:id="@+id/rpw"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:ems="10"
                    android:hint="请确认密码"
                    android:inputType="textPassword"
                    android:minHeight="48dp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tvname"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="姓名" />

                <EditText
                    android:id="@+id/uname"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:ems="10"
                    android:hint="请输入您的姓名"
                    android:inputType="textPersonName"
                    android:minHeight="48dp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/sex"
                    android:layout_width="145dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:text="性别"
                    tools:text="性别" />

                <RadioGroup
                    android:id="@+id/sexq"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <RadioButton
                        android:id="@+id/ButtonM"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="男"
                        tools:ignore="TouchTargetSizeCheck" />

                    <RadioButton
                        android:id="@+id/ButtonW"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="女"
                        tools:ignore="TouchTargetSizeCheck" />
                </RadioGroup>

            </LinearLayout>

            <CheckBox
                android:id="@+id/checkBox3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="已阅读会员协议" />

            <Button
                android:id="@+id/buttonR"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:text="注册" />

            <Button
                android:id="@+id/buttonB"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="返回" />

            <TextView
                android:id="@+id/tvRC"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

效果如图：

 

2.创建GridView文件activity_grid.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">

    <GridView
        android:id="@+id/gv_touxiang"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:verticalSpacing="10dp" />
</LinearLayout>

效果图：

3.创建grid_item.xml用于图片展示

代码如下：

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

    <ImageView
        android:id="@+id/iv_item"
        android:layout_width="90dp"
        android:layout_height="90dp"
        app:srcCompat="@mipmap/f1" />
</LinearLayout>

效果图：

 

4.创建RegActivity.java文件

用于跳转选择界面和获取数据

代码如下：

package com.example.gridviewtest;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.view.ActionMode;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class RegActivity extends AppCompatActivity {
ImageView iv;
Button btn_choose;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.register);
        iv=(ImageView) findViewById(R.id.reg_img);
        btn_choose=(Button)findViewById(R.id.btn_choose);
            btn_choose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent= new Intent(RegActivity.this,MainActivity.class);
                startActivityForResult(intent,12);
            }
        });
    }
    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode==12||resultCode==21)
        {
            iv.setImageResource(data.getIntExtra("img",R.mipmap.f1));
        }
    }
}

 

5.创建MainActivity.java

用于将grid_item.xml链接到activity_grid.xml以自动获取图片并显示为网格形式

并且返回数据给RegActivity

代码如下：

package com.example.gridviewtest;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {
GridView gv;
SimpleAdapter sa;
List<Map<String,Object>> list;
//创建图片数组，R.mipmap.图片名
int[] imgs={R.mipmap.f1,R.mipmap.f2,R.mipmap.f3,R.mipmap.f4,R.mipmap.j1,R.mipmap.j2,R.mipmap.nv1,R.mipmap.nv2,R.mipmap.nv3,R.mipmap.nv4,R.mipmap.nv5,R.mipmap.nv6,R.mipmap.nv7,R.mipmap.nv8};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);
        gv=(GridView) findViewById(R.id.gv_touxiang);
        list=new ArrayList<Map<String, Object>>();
        for (int i=0;i<imgs.length;i++)//遍历图片数组
        {
         Map<String,Object> map=new HashMap<String,Object>();
         map.put("img",imgs[i]);
         list.add(map);
        }
        sa=new SimpleAdapter(this,list,R.layout.grid_item,new String[]{"img"},new int[]{R.id.iv_item});
        gv.setAdapter(sa);
        gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Map<String,Object> map=(Map<String, Object>) adapterView.getItemAtPosition(i);
                int choice=(int) map.get("img");
                Intent intent=new Intent();
                intent.putExtra("img",choice);
                setResult(21,intent);
                finish();
            }
        });
    }

效果如下：