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();
            }
        });
    }

效果如下：