java - ImageButton 位于另一张图像上

Question

嗯，我最近看到了 Whatsapp 和 Tinder 应用程序。除了按钮之外，“更改个人资料图片”选项是相同的。我们怎样才能做到这一点？有lib吗？或形状来做到这一点？

Answer 1

使用此代码:

<FrameLayout
    android:gravity="center"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:paddingBottom="24.0dip"
    android:paddingLeft="0.5dip"
    android:paddingRight="0.5dip"
    android:paddingTop="35.0dip"
    android:background="#ff26a69a"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="178.0dip"
        android:layout_height="178.0dip"
        android:src="@drawable/ic_settings_profile"
        app:civ_border_width="2dp"
        app:civ_border_color="#FF000000"/>


    <ProgressBar
        style="?android:attr/progressBarStyleInverse"
        android:id="@+id/change_photo_progress"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:visibility="gone" />

    <ImageButton
        style="@style/ActionBarButtonStyle"
        android:background="@drawable/input_circle"
        android:elevation="2.0dip"
        android:id="@+id/change_photo_btn"
        android:layout_gravity="bottom|center|right"
        android:layout_height="52.0dip"
        android:layout_marginBottom="2.0dip"
        android:layout_width="52.0dip"
        android:src="@drawable/ic_cam_white" />
</FrameLayout>

在可绘制文件夹中

input_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/input_circle_pressed" />
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/input_circle_pressed" />
    <item android:drawable="@drawable/input_circle_normal" />
</selector>

输出: