文字TOP在Android上的图像右侧

时间:2016-06-03 06:15:36

标签: android textview imageview

我正在尝试在右上方的图像上插入文字。像这样:

enter image description here

所以我尝试了以下内容:custom_profile_image这里是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,我得到以下输出:

enter image description here

这里的问题是我想将橙色框移向顶部,使其触及与上面屏幕截图类似的个人资料图像的尖端。我尝试了很多东西,但却无法做到。

我不知道该怎么做。你能帮助我吗?

谢谢!

6 个答案:

答案 0 :(得分: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,输出将如下截图所示。

enter image description here

答案 1 :(得分:0)

尝试以下方法:

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

答案 2 :(得分:0)

您可以尝试这种方式:

$query = "UPDATE tarex_yhibu SET phone = '7777777777' WHERE url = 'http://protechautoglass.com/';";
  

您可以使用边距和填充来调整textview的位置

enter image description here

答案 3 :(得分:0)

您可以通过为图片视图添加边距来实现此目的 enter image description here

<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>

答案 4 :(得分:0)

  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 :(得分:0)

我稍微清理了你的布局,并在资源文件中添加了一些你使用的尺寸和颜色。

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

我使用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>