Aligning Two LinearLayout Side By Side Inside a CardView

问题

I am trying to align two TextViews OR LinearLayouts side by side in order to reach this cardView:

I have used layout_gravity and layout_weight attributes inorder to solve this situation, but with no luck.

I am open to any other suggestions that may accomplish my goal as log as I can generate cardview dynamicaly using BaseAdapter with ListView in the Activity Code.

I am looking for XML solution.

Here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
  <android.support.v7.widget.CardView
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:card_view="http://schemas.android.com/apk/res-auto"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      card_view:cardCornerRadius="5sp"
      card_view:cardElevation="5sp"
      card_view:contentPadding="16dp"
      android:orientation="horizontal"
      android:layout_weight="2">
    <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_weight="2">
  <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:layout_gravity="left"
      android:gravity="left"
      android:layout_weight="1">
    <TextView
      style="@style/Base.TextAppearance.AppCompat.Headline"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textStyle="bold"
      android:textSize="16dp" 
      android:textColor="#ec1c24"
      android:text="Model Name" />
    <TextView
      style="@style/Base.TextAppearance.AppCompat.Body1"
      android:id="@+id/plc_ModelName"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textStyle="bold"
      android:textSize="36dp"
      android:textColor="#666666"/>
  </LinearLayout>
  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="right"
    android:gravity="right"
    android:layout_weight="1">
  <TextView
      android:id="@+id/plc_localIp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="14dp" />

  <TextView
      android:id="@+id/plc_machineType"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textStyle="bold"
      android:textSize="16dp" />

      <TextView
        android:id="@+id/plc_ModelId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="16dp" />

      <TextView
        android:id="@+id/plc_Version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="16dp" />
    </LinearLayout>
    </LinearLayout>
      </android.support.v7.widget.CardView>
</LinearLayout>

Many thanks.

回答1:

For the part on the right you can use a TableLayout. Try to play with nesting layouts or switch to ConstraintLayout for better performance. Too many nested layout weights will quickly add up and create performance issues.

You can start fine tuning from the XML provided below. I removed the layout_weight from the CardView, if needed, add it back.

In preview it looks like this:

Layout XML:

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        card_view:cardCornerRadius="5sp"
        card_view:cardElevation="5sp"
        card_view:contentPadding="16dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:gravity="center_vertical"
            android:orientation="horizontal">

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

                <TextView
                    style="@style/Base.TextAppearance.AppCompat.Headline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Model Name"
                    android:textColor="#ec1c24"
                    android:textSize="16dp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/plc_ModelName"
                    style="@style/Base.TextAppearance.AppCompat.Body1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#666666"
                    android:textSize="36dp"
                    android:textStyle="bold"
                    tools:text="T-Max" />
            </LinearLayout>

            <TableLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:text="Model ID:"
                        android:textColor="#ec1c24"
                        android:textSize="14dp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/plc_ModelId"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:textSize="14dp"
                        tools:text="12345678" />
                </TableRow>

                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:text="IP:"
                        android:textColor="#ec1c24"
                        android:textSize="14dp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/plc_localIp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:textSize="14dp"
                        tools:text="192.168.0.1" />
                </TableRow>

                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:text="BS Version:"
                        android:textColor="#ec1c24"
                        android:textSize="14dp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/plc_Version"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_margin="3dp"
                        android:textSize="14dp"
                        tools:text="3.0.2.111" />
                </TableRow>

            </TableLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

来源：https://stackoverflow.com/questions/40359718/aligning-two-linearlayout-side-by-side-inside-a-cardview