如何在两个TextViews的同一行上设置图像? [英] How to set images on the same row as two TextViews?

问题描述

我正在尝试创建以下布局:

I'm trying to create the following layout:

基本上，我有两个TextViews和两个图标.图标与手机标题和手机号码位于同一行.我创建了以下XML:

Basically, I have two TextViews and two icons. The icons are on the same row as the mobile header and the the mobile number. I have created the following XML:

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

    <TextView
        android:id="@+id/phone_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/primaryDarkColor"
        android:textStyle="bold"
        android:text="Phone number"
        android:textSize="18sp"
        android:layout_marginBottom="5dp" />

    <TextView
        android:id="@+id/phone_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:textStyle="bold"
        android:layout_alignBottom="@id/phone_header" />

    <ImageView
        android:id="@+id/phone_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/phone_info"
        android:layout_alignEnd="@id/phone_info"
        app:srcCompat="@drawable/ic_call_white_24dp" />

    <ImageView
        android:id="@+id/message_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/phone_icon"
        android:layout_alignEnd="@id/phone_icon"
        app:srcCompat="@drawable/ic_meessage_white_24dp" />

</RelativeLayout>

但是它没有正确设置布局.最好的方法是将图标与两个TextViews设置在同一行?

But it didn't set the layout properly. What is the best way would be to set the icons on the same row as the two TextViews?

推荐答案

我做了这样的事情:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="mobile" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[phone]" />

    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_baseline_info_24" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_baseline_info_24" />


</LinearLayout>

它看起来像这样:

或者只是这样做:

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_toStartOf="@+id/img1"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="mobile" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="[phone]" />

    </LinearLayout>

    <ImageView
        android:layout_toStartOf="@+id/img2"
        android:id="@+id/img1"
        android:adjustViewBounds="true"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_baseline_info_24" />

    <ImageView
        android:adjustViewBounds="true"
        android:id="@+id/img2"
        android:layout_alignParentEnd="true"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_baseline_info_24" />
</RelativeLayout>

第二种方法，我认为更好，并且如果屏幕小且文本宽，也不会影响您的图标

Second way I think is better and ll not affect your icons if the screen is small and text wide

这篇关于如何在两个TextViews的同一行上设置图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！