如何在 Android Studio 中为头像添加功能性编辑图标？

Question

所以我有一个片段，它给出了 个人资料编辑 部分的布局，我有一个代表特定用户个人资料图片的图像，我想有效地添加一个图片右下角的编辑图标 供用户select，这允许他们更改新图片。

我需要一些帮助。

fragment_profile_setting.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=".ProfileSettingFragment">

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_picture_edit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/profilepic"
    app:civ_border_color="@color/greyblack"
    app:civ_border_width="4dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

至于 java 代码，它仅包含扩充片段的方法。

ProfileSettingFragment.java :

package com.teamrocket.blooddonationcommunity;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ProfileSettingFragment extends Fragment {

    public ProfileSettingFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_profile_setting, container, false);
    }
}

如果重复请标记并删除 link。

Answer 1

基本上可以再添加一个ImageView。向 ImageView 添加一个点击监听器。因此，用户将能够编辑头像或添加新头像。

您可以按如下方式更新布局文件：

<?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=".ProfileSettingFragment" >

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/profile_picture"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ImageView.Circle"
        app:srcCompat="@drawable/profile_picture" />

    <ImageView
        android:id="@+id/edit_profile_picture_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginEnd="4dp"
        android:layout_marginBottom="4dp"
        android:background="@drawable/bg_circle"
        android:padding="8dp"
        android:src="@drawable/ic_edit_24"
        app:layout_constraintBottom_toBottomOf="@id/profile_picture"
        app:layout_constraintEnd_toEndOf="@id/profile_picture"
        app:tint="@color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

使用ShapeableImageView，您基本上也可以在没有任何第三方的情况下构建圆形图像视图。您可以将以下样式添加到您的 styles.xml。因此，您的 ShapeableImageView 将是圆形。

<style name="ImageView.Circle" parent="">
    <item name="cornerSize">50%</item>
</style>

我还添加了 bg_circle 可绘制对象以制作 edit_profile_picture_button 圆圈。因为 ShapeableImageView 不支持填充，如果你想在 edit_profile_picture_button 中添加填充以获得更好的 UI。这是 drawable 文件的简单代码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/holo_red_dark" />
</shape>

使用 ViewBinding 或 DataBinding，您可以更轻松地与您的视图进行交互。我举了一个 ViewBinding 的例子，你可以在这里找到更多关于它们的信息：

视图绑定： https://developer.android.com/topic/libraries/view-binding

数据绑定： https://developer.android.com/topic/libraries/data-binding

基本上将其添加到您的应用程序（模块）级别 gradle，如开发者网站所示。

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

并更新您的 ProfileSettingFragment：

public class ProfileSettingFragment extends Fragment {

    private FragmentProfileSettingBinding binding;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        binding = FragmentProfileSettingBinding.inflate(inflater);
        return binding.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        binding.editProfilePictureButton.setOnClickListener(editProfilePictureButton -> {
            // Update the profile picture or add new one
        });
    }
}

如何在 Android Studio 中为头像添加功能性编辑图标？

How do I add a functional edit icon for a profile picture in Android Studio?

xml

android

android-studio