我想在android中创建此UI。我无法使用设置布局位置和空间

我想创建这个UI

工作

我无法设置布局位置。我想根据工作界面在项目之间进行填充。我使用线性布局。如何绘制简单的短线排序，过滤器和心脏图标。我正在使用View。我已经这样做了

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="drawable/sort" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SORT"
        android:textStyle="bold" />

  </LinearLayout>

  <View
    android:layout_width="0dp"
    android:layout_height="1dp"
    android:layout_weight="1"
    android:background="#706e6e" />

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">

        <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="drawable/filter" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FILTER"
        android:textStyle="bold" />

        <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rect_red"
        android:text="NEW"
        android:textColor="#FFFFFF"
        android:textSize="14dp"
        android:textStyle="bold" />


    </LinearLayout>
    <View
    android:layout_width="0dp"
    android:layout_height="1dp"

    android:layout_weight="1"
    android:background="#706e6e" />
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">


    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="drawable/heart" />
    </LinearLayout>

   </LinearLayout>

rect_red.xml

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
   <solid android:color="#ff0000"></solid>
    <padding
    android:bottom="10dp"
    android:left="25dp"
    android:right="25dp"
    android:top="10dp"></padding>
  </shape>

这是您想要的csutom布局。试试这个：

仅供参考，您可以根据需要更改图标、文本颜色和分隔颜色，而无需使用rect_red.xml作为红色背景

输出：

---

希望这会有所帮助~

我建议您在学习其他任何关于android布局的教程之前先学习。请注意，您不需要额外的ImageView，因为您可以将复合drawable设置为TextView。您可以为分隔符使用1像素宽的视图。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:orientation="horizontal"
    android:background="#fff"
    android:gravity="center_vertical"
    android:weightSum="5"
    android:padding="16dp">

    <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2">
        <ImageView
            android:layout_marginRight="5dp"
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

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

    <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2">

        <ImageView
            android:layout_marginRight="5dp"
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_marginRight="5dp"
            android:text="FILTER"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:background="@drawable/red_background"
            android:text="New"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>


</LinearLayout><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:orientation="horizontal"
    android:background="#fff"
    android:gravity="center_vertical"
    android:weightSum="5"
    android:padding="16dp">

    <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2">
        <ImageView
            android:layout_marginRight="5dp"
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

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

    <LinearLayout
        android:gravity="center_vertical"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2">

        <ImageView
            android:layout_marginRight="5dp"
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_marginRight="5dp"
            android:text="FILTER"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:background="@drawable/red_background"
            android:text="New"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <LinearLayout
        android:gravity="center"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <ImageView
            android:src="@android:drawable/star_big_on"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>


</LinearLayout>

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

    <!-- Custom Layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:orientation="horizontal"
        android:weightSum="5">

        <!-- SORT -->
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.8">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_centerInParent="true"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/sort" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="4dp"
                    android:text="SORT"
                    android:textStyle="bold"
                    android:textColor="#727272"/>
            </LinearLayout>
        </RelativeLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"
            android:background="#706e6e" />

        <!-- FILTER -->
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2.2">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="16dp"
                android:gravity="center_vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/filter" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="4dp"
                    android:text="FILTER"
                    android:textStyle="bold"
                    android:textColor="#727272" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:paddingLeft="4dp"
                    android:paddingRight="4dp"
                    android:paddingTop="2dp"
                    android:paddingBottom="2dp"
                    android:background="#ff0000"
                    android:text="NEW"
                    android:textColor="#FFFFFF"
                    android:textSize="10sp"
                    android:textStyle="normal" />
            </LinearLayout>
        </RelativeLayout>

        <View
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:layout_marginTop="4dp"
            android:layout_marginBottom="4dp"
            android:background="#706e6e" />

        <!-- Favorite -->
        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/heart" />
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>