想要在android中并排显示图像和文本答案

【问题标题】：Want to Show Image and Text side by side in android想要在android中并排显示图像和文本
【发布时间】：2017-08-14 17:49:57
【问题描述】：

我是 android 开发的新手，我正在构建一个应用程序，并且我想在 android 布局中并排显示 Imageview 和 Textview。下面的代码在 imagview 下方显示 textview。这里我使用的是线性布局。

在这个布局中，我展示了一些来自数据库的数据。

预期布局设计：

Imageview Text1
          Text2

代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.spand.krishnasoftwares.Main2Activity">
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@color/colorBackground">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="20px"
        android:id="@+id/vly">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:src="@drawable/gym_logo1"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/ly1">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Exercise 1"
                android:textAlignment="center"
                android:textAllCaps="true"
                android:textColor="#ffffff"
                android:layout_marginTop="20px"
                android:textSize="10dp"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ly1"
            android:paddingLeft="5px"
            android:paddingRight="5px"
            android:id="@+id/ly2"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Exercise Name:"
                android:textColor="#ffffff"
                android:layout_marginTop="20px"
                android:layout_weight="1"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/en1"
                android:textColor="#ffffff"
                android:layout_marginTop="20px"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ly2"
            android:id="@+id/ly3"
            android:paddingLeft="5px"
            android:paddingRight="5px"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Speed: "
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/es1"
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ly3"
            android:paddingLeft="5px"
            android:paddingRight="5px"
            android:orientation="horizontal"
            android:id="@+id/ly4">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Repetition: "
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/erep1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10px"
                android:layout_weight="1"
                android:textColor="#ffffff"
                android:textDirection="ltr" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/erep2"
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/erep3"
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ly4"
            android:paddingLeft="5px"
            android:paddingRight="5px"
            android:orientation="horizontal"
            android:id="@+id/ly5">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Weight: "
                android:textColor="#ffffff"
                android:layout_marginTop="10px"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/ew1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10px"
                android:layout_weight="1"
                android:textColor="#ffffff"
                android:textDirection="ltr" />

        </LinearLayout>
    </LinearLayout>



</RelativeLayout>

【问题讨论】：

在使用 ConstraintLayout 时不要使用嵌套布局。你正在扼杀 ConstraintLayout 的全部目的。
您尚未添加指向预期输出的链接
wiresareobsolete.com/2016/07/constraintlayout-part-1学习本教程

标签： android android-layout

【解决方案1】：

检查这个..它会创建你想要的布局视图。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/vly"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20px"
        android:weightSum="3">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/add" />

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


            <LinearLayout
                android:id="@+id/ly1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:text="Exercise 1"
                    android:textAlignment="center"
                    android:textAllCaps="true"
                    android:textSize="10dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly1"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:layout_weight="1"
                    android:text="Exercise Name:" />

                <TextView
                    android:id="@+id/en1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly2"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Speed: " />

                <TextView
                    android:id="@+id/es1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly3"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Repetition: " />

                <TextView
                    android:id="@+id/erep1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"

                    android:textDirection="ltr" />

                <TextView
                    android:id="@+id/erep2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:textColor="#ffffff" />

                <TextView
                    android:id="@+id/erep3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly4"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Weight: " />

                <TextView
                    android:id="@+id/ew1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"

                    android:textDirection="ltr" />

            </LinearLayout>
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

【讨论】：

欢迎，继续编码.. :)

【解决方案2】：

这种方式不能使用ConstraintLayout，按照这个代码；

    <LinearLayout
    android:weightSum="2"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

【讨论】：

嗨 alicanozkara，现在当我添加额外的 textview 时，它并没有准确显示我的要求。

【解决方案3】：

看起来@drawable/gym_logo1 是@+id/vly LinearLayout 的子元素，它有android:orientation="vertical"。你应该试着让它成为@+id/ly1的孩子

【讨论】：

【解决方案4】：

像这样创建你的布局它会为你工作......但如果你没有得到解决方案，请先提醒一件事搜索然后询问......

<android.support.constraint.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="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@color/colorBackground">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:src="@drawable/gym_logo1"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="20px"
    android:layout_toRightOf="@+id/imageView"
    android:id="@+id/vly">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/ly1">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise 1"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:textSize="10dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly1"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:id="@+id/ly2"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise Name:"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/en1"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly2"
        android:id="@+id/ly3"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Speed: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/es1"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly3"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal"
        android:id="@+id/ly4">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Repetition: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/erep1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10px"
            android:layout_weight="1"
            android:textColor="#ffffff"
            android:textDirection="ltr" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/erep2"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/erep3"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly4"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal"
        android:id="@+id/ly5">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Weight: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/ew1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10px"
            android:layout_weight="1"
            android:textColor="#ffffff"
            android:textDirection="ltr" />

    </LinearLayout>
</LinearLayout>



</RelativeLayout>
</android.support.constraint.ConstraintLayout>

【讨论】：

【解决方案5】：

你为什么不使用drawable left？

在第一个文本视图中使用drawable left，并在drawable和文本之间使用适当的填充，您可以轻松实现您想要的。

        <?xml version="1.0" encoding="utf-8"?>
     <android.support.constraint.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="fill_parent"
       android:layout_height="fill_parent"
       tools:context="com.example.spand.krishnasoftwares.Main2Activity">

           <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise 1"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="#ffffff"
            android:drawableLeft="@drawable/"
            android:layout_marginTop="20px"
            android:textSize="10dp"/>
      </android.support.constraint.ConstraintLayout>

好处：您可以节省多个视图组的额外嵌套。在回收站视图或列表视图的情况下，渲染时间更短。由 Google 开发者资源推荐。

【讨论】：

@AshishJohn 即使在这种情况下，他也可以使用多个文本视图在约束布局中对齐它们，并且可以使用 drawableLeft。 Imageview Text1 Text2

【解决方案6】：

将您的 .xml 更改为

<android.support.constraint.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="fill_parent"
    android:layout_height="fill_parent">
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:background="@color/colorBackground">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingTop="20px"
            android:id="@+id/vly">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/imageView"
                android:src="@drawable/gym_logo1"/>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:id="@+id/ly1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Exercise 1"
                    android:textAlignment="center"
                    android:textAllCaps="true"
                    android:textColor="#ffffff"
                    android:layout_marginTop="20px"
                    android:textSize="10dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Exercise Name:"
                    android:textColor="#ffffff"
                    android:layout_marginTop="20px"
                    android:layout_weight="1"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/en1"
                    android:textColor="#ffffff"
                    android:layout_marginTop="20px"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Speed: "
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/es1"
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Repetition: "
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>

                <TextView
                    android:id="@+id/erep1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:textColor="#ffffff"
                    android:textDirection="ltr" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/erep2"
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/erep3"
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Weight: "
                    android:textColor="#ffffff"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"/>

                <TextView
                    android:id="@+id/ew1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:textColor="#ffffff"
                    android:textDirection="ltr" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

【讨论】：