Question

如何在xml中的ImageView旁边创建一些TextView？我已经尽力了，但仍然做不到。

我需要4个包含标题和描述的文本。这些文字是用来描述图片的，希望对您有所帮助或指示

这是我的xml代码（最终导致布局混乱）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:padding="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:src="@drawable/oneplus_7_pro_r1" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/img_item_photo"
    android:layout_toRightOf="@id/img_item_photo"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_item_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="165dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:text="@string/Hape_name"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin" />

 </LinearLayout>
</RelativeLayout>

Answer 1

只需从文本视图中删除 android:layout_marginBottom="165dp"

尝试一下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_search_black" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/img_item_photo"
        android:layout_toRightOf="@id/img_item_photo"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:text="@string/load_available"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</RelativeLayout>

另外，请尝试使用LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_search_black" />

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:text="@string/load_available"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

Answer 2

您可以简单地使用 ConstraintLayout 进行此视图，它看起来就像下面的图片，我发布的XML也使用此视图：

小注释： AndroidX 用于此处。如果您不熟悉 androidX ，请稍作休息以了解 androidX ，然后尝试一下。

如果您使用的是支持库（而非androidX），请在下面的代码中将 androidx.constraintlayout.widget.ConstraintLayout替换为android.support.constraint.ConstraintLayout

<?xml version="1.0" encoding="utf-8"?>
       <androidx.constraintlayout.widget.ConstraintLayout      
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@tools:sample/avatars" />

        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 1"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_2"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toTopOf="@id/imageView1" />

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 2"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_3"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_1" />

        <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 3"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_4"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_2" />

        <TextView
            android:id="@+id/tv_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 4"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="@id/imageView1"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_3" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

可以在每种情况下使用布局权重以获得更好的结果，如下所示，...

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:TextViewandroid="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/icons"
android:orientation="horizontal"
android:weightSum="2">

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/margin_10dp"
    android:layout_weight="1"
    android:background="@color/icons"
    android:gravity="center">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_img" />

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:background="@color/icons">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here. Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:layout_marginTop="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here.Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here.Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Description is here. Description is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

希望这对您有帮助！谢谢！

Answer 4

尽管您的代码经过细微的改进似乎还不错。

这是一些备用代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@android:color/white"
android:padding="@dimen/activity_vertical_margin"
android:orientation="horizontal"
android:layout_height="match_parent">

<ImageView
    android:padding="10dp"
    android:layout_weight="1"
    android:id="@+id/img_item_photo"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:src="@drawable/side_nav_bar" />

<LinearLayout
    android:padding="10dp"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_item_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test 1"
        />

    <TextView
        android:id="@+id/tv_item_name1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:layout_marginTop="5dp"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test 2"
        />

</LinearLayout>

Answer 5

这是解决方案，

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin" />

    <LinearLayout
        android:id="+@id/layout_field"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:text="Hape_name"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin" />

    </LinearLayout>

</LinearLayout>

在layout_field内添加更多textView。

如何在XML中的ImageView旁边制作一些TextView

5 个答案: