带有重叠文本的圆形图像视图（可点击）答案

【问题标题】：Circular Image View with overlapping text ( Click able )带有重叠文本的圆形图像视图（可点击）
【发布时间】：2018-09-26 06:39:43
【问题描述】：

我想创建一个应该像示例图像一样的按钮。带有重叠文本（ Clickable ）的圆形图像视图。我尝试了一些库，但没有一个库提供 android:text="something" 功能。

有没有同时提供它们的库？

  <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="3dp"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">
  <LinearLayout
                    android:id="@+id/layout2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/layout1"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:padding="2dp"
                    android:paddingLeft="10dp">
  <de.hdodenhof.circleimageview.CircleImageView
                        xmlns:app="http://schemas.android.com/apk/res-auto"
                        android:id="@+id/profile_image"
                        android:layout_width="96dp"
                        android:layout_height="96dp"
                        android:src="@drawable/tem_hashtag_bn_04"
                        app:civ_border_width="1dp"
                        app:civ_border_color="#FF000000"/>
</LinearLayout>
  </RelativeLayout>

可点击的圆形图片视图

【问题讨论】：

@NileshRathod，做错了。顺便说一句，请帮我解决另一个问题stackoverflow.com/q/52534880/10323427?sem=2

标签： android android-layout android-imageview textview

【解决方案1】：

试试这个

<FrameLayout
        android:id="@+id/speaker_avatar_container"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical">

        <TextView
            android:id="@+id/placeholder"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:gravity="center"
            android:background="@drawable/circle"
            android:textColor="@color/white"/>

        <CircleImageView
            android:id="@+id/avatar"
            android:layout_width="40dp"
            android:layout_height="40dp" />
    </FrameLayout>

并创建一个 circle.xml 并粘贴

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="@color/grey" />
    <size
        android:width="40dp"
        android:height="40dp" />
</shape>

我从enter link description here得到这个答案

【讨论】：

【解决方案2】：

试试这个

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/myCircleImageView"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:src="@color/colorPrimary"
        app:civ_border_width="2dp"
        app:civ_border_color="#FF000000"/>


    <TextView
        android:id="@+id/cmll_completed_per"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/myCircleImageView"
        android:layout_alignLeft="@id/myCircleImageView"
        android:layout_alignRight="@id/myCircleImageView"
        android:layout_alignTop="@id/myCircleImageView"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="10dp"
        android:textStyle="bold"
        android:textColor="@android:color/white"
        android:text="100%" />

</RelativeLayout>

输出

【讨论】：

FrameLayout 不是更高效、更容易使用吗？

【解决方案3】：

Nilesh Rathod 的解决方案效果很好，只是根据我的要求进行了一些修改。

代码：

<RelativeLayout

                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/layout1"
                        android:gravity="center"
                        android:orientation="horizontal"
                        android:padding="2dp"

                        android:paddingLeft="10dp">

                        <de.hdodenhof.circleimageview.CircleImageView
                            xmlns:app="http://schemas.android.com/apk/res-auto"
                            android:id="@+id/profile_image1"
                            android:layout_width="96dp"
                            android:layout_height="96dp"
                            android:src="@drawable/tem_hashtag_bn_04"
                            app:civ_border_width="1dp"
                            app:civ_border_color="#FF000000"/>
                        <TextView

                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignBottom="@id/profile_image1"
                            android:layout_alignLeft="@id/profile_image1"
                            android:layout_alignRight="@id/profile_image1"
                            android:layout_alignTop="@id/profile_image1"
                            android:layout_gravity="center"
                            android:gravity="center"
                            android:padding="10dp"
                            android:textStyle="bold"
                            android:textColor="@color/colorWhite"
                            android:text="100%" />
                    </RelativeLayout>**strong text**

【讨论】：