Android中图像上的文本右上角答案

【问题标题】：Text TOP Right on Image in AndroidAndroid中图像上的文本右上角
【发布时间】：2016-06-10 19:33:14
【问题描述】：

我正在尝试在图像右上角插入文本。像这样的：

所以我尝试了以下方法：custom_profile_image here is 50dp

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="@dimen/custom_profile_image"
    android:layout_height="@dimen/custom_profile_image">

    <ImageView
        android:id="@+id/image"
        android:layout_width="@dimen/custom_profile_image"
        android:padding="2dp"
        android:src="@drawable/profilepic"
        android:layout_height="@dimen/custom_profile_image" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/image"
        android:layout_alignTop="@id/image"
        android:scaleType="fitStart"
        android:layout_marginRight="0dp"
        android:padding="2dp"
        android:background="@drawable/number_round"
        android:gravity="center"
        android:minWidth="17sp"
        android:adjustViewBounds="true"
        android:minHeight="17sp"
        android:paddingBottom="1dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="0"
        android:textColor="#ffffffff"
        android:textSize="12sp"
        android:visibility="visible"
        tools:ignore="RtlHardcoded" />

</RelativeLayout>

对于上述 XML，我得到以下输出：

这里的问题是我想将橙色框移到顶部，使其接触到类似于上面屏幕截图的个人资料图像的尖端。我尝试了很多东西，但都做不到。

我不知道该怎么做。有人可以帮我解决这个问题吗？

谢谢！

【问题讨论】：

将 imagview 内边距更改为 marginTop = "8dp" 和 marginRight = "8dp"
我做了那个顶部的图像视图有 8dp 的内边距，但是 orage 框也随之下降了。
framelayout with top padding for imageview 可能会做
给你的 ImageView 赋予 marginTop 和 marginRight 属性
使用具有指定宽度和高度的 FrameLayout 并为图像视图提供较小的宽度和高度，最后将 textview 对齐到右侧

标签： android textview imageview

【解决方案1】：

给imageview一个marginTop，然后给它的一半作为textview的marginTop。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/image"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="20dp"
    android:padding="2dp"
    android:src="@drawable/user" />

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/image"
    android:layout_marginRight="0dp"
    android:layout_marginTop="10dp"
    android:adjustViewBounds="true"
    android:background="@drawable/tv_circle"
    android:gravity="center"
    android:minHeight="20sp"
    android:minWidth="20sp"
    android:padding="2dp"
    android:paddingBottom="1dp"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:scaleType="fitStart"
    android:text="0"
    android:textColor="#ffffffff"
    android:textSize="12sp"
    android:visibility="visible"
    tools:ignore="RtlHardcoded" />

tv_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="#F08600" />

<padding
    android:left="1dp"
    android:right="1dp"
    android:top="1dp" />

</shape>

对于上述 XML，输出将如下图所示。

【讨论】：

【解决方案2】：

尝试以下方法：

为RelativeLayout 设置以下属性
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
将ImageView 的填充设置为20dp
删除TextView 的以下属性
- android:layout_alignRight="@id/image"
- android:layout_alignTop="@id/image"
为TextView 设置以下属性
- android:layout_alignParentRight="true"
- android:layout_alignParentTop="true"

【讨论】：

【解决方案3】：

你可以试试这个方法：

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="300dip"
    android:layout_height="300dip">

    <ImageView
        android:id="@+id/image"
        android:layout_width="260dip"
        android:layout_height="260dip"
        android:layout_gravity="center"
        android:padding="2dp"
        android:scaleType="fitXY"
        android:src="@android:drawable/picture_frame" />

    <TextView
        android:id="@+id/text"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:layout_gravity="right"
        android:background="@drawable/bg_button_round_center_green"
        android:padding="2dp"
        android:text="0"
        android:gravity="center"
        android:textColor="@color/black"
        android:scaleType="fitStart" />

</FrameLayout>

可以使用margin和padding来调整textview的位置

【讨论】：

【解决方案4】：

  try this
        <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

 <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:src="@drawable/bookcover"
    android:layout_marginRight="50dp"
    android:layout_marginTop="50dp"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/text"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="7dp"
    android:scaleType="fitStart"
    android:background="@drawable/notification_small"
    android:gravity="center"
    android:adjustViewBounds="true"
    android:minHeight="17sp"
    android:text="100"
    android:textColor="#000000"
    android:textSize="25sp"
    android:visibility="visible"
    />

【讨论】：

【解决方案5】：

我稍微清理了您的布局，并将您使用的一些尺寸和颜色添加到资源文件中。

以下内容将为您提供所需的内容。您可以修改布局以更好地满足您的需求。

我在 Android Studio 2.2 中使用了新的预览视图，发现布局看起来不错。我建议您使用新的约束布局来帮助您对应用进行更多更改，然后查看 xml 以获得最佳实践。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="@dimen/profileImageLayoutSize"
    android:layout_height="@dimen/profileImageLayoutSize">

    <ImageView
        android:id="@+id/image"
        android:layout_width="@dimen/custom_profile_image"
        android:layout_height="@dimen/custom_profile_image"
        android:layout_marginTop="@dimen/profileImageSpacingForLabel"
        android:layout_marginRight="@dimen/profileImageSpacingForLabel"
        android:layout_marginEnd="@dimen/profileImageSpacingForLabel"
        android:padding="@dimen/profileImagePadding"
        android:background="#00ffff"/>  <!-- Added this background for visual debugging -->

    <TextView
        android:id="@+id/text"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:gravity="center"
        android:text="@string/profileDefaultText"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:background="#ffff00" /> <!-- Added this background for visual debugging -->

</RelativeLayout>

将此添加到您的维度文件 dimens.xml

<dimen name="custom_profile_image">50dp</dimen>
<dimen name="profileImagePadding">2dp</dimen>
<dimen name="profileImageSpacingForLabel">10dp</dimen>
<dimen name="profileImageLayoutSize">60dp</dimen>

将此添加到您的字符串文件 strings.xml

<string name="profileDefaultText">0</string>

将此添加到您的颜色文件 colors.xml

<color name="white">#ffffff</color>

【讨论】：

【解决方案6】：

您可以通过为图像视图添加边距来做到这一点

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="100dp"
    android:layout_height="100dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:padding="2dp"
        android:src="@drawable/image"
        android:layout_height="100dp"
        android:layout_margin="6dp"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:layout_marginRight="0dp"
        android:padding="2dp"
        android:background="@drawable/button_pressed"
        android:gravity="center"
        android:minWidth="17sp"
        android:adjustViewBounds="true"
        android:minHeight="17sp"
        android:paddingBottom="1dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="0"
        android:textColor="#ffffffff"
        android:textSize="12sp"
        android:visibility="visible"
        tools:ignore="RtlHardcoded"
        android:layout_gravity="center_horizontal"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        />

</RelativeLayout>

【讨论】：