Question

我想在android中创建这个UI。

我对android中的线性布局和相对布局感到困惑。我已经完成了这个UI。

 <RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_height="match_parent"
 android:layout_width="match_parent"
 android:background="#ffffff">


 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
   >
 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20dp"
    android:text="S "
   />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" M T W T F S"
        android:textSize="20dp"
        android:textStyle="bold"/>
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="09:00am-06:00pm"
        android:textSize="20dp"
       />
   </LinearLayout>


</RelativeLayout>

我无法移动下一行，也无法移动阴影文字＆＃34; S＆＃34;喜欢＆＃34; WORK＆＃34; UI。

Answer 1

要移动下一行，只需在您已有的线性布局下方插入新的线性布局。

对于阴影，我猜this question可能对你有帮助。

Answer 2

试试这个

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

<!--1st row here-->

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

    <!--Your days here-->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="left"
        android:layout_gravity="left">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="M"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="T"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="W"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TH"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="F"
            android:layout_margin="5dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S"
            android:layout_margin="5dp"/>

    </LinearLayout>

    <!--Your time here-->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:gravity="right"
        android:layout_gravity="right">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your time here"
            android:layout_margin="5dp"/>

    </LinearLayout>


</LinearLayout>

<!--2nd row-->

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_margin="5dp">

    <!--For icon with text below-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

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

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

    </LinearLayout>

    <!--For icon with text on side-->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">

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

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

    </LinearLayout>

</LinearLayout>

Answer 3

您可以使用以下内容实现多行：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    <LinearLayout
        android:id="@+id/dates"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S "
            android:textSize="20dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" M T W T F S"
            android:textSize="20dp"
            android:textStyle="bold"/>
        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="09:00am-06:00pm"
            android:textSize="20dp"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/dates"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_camera"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_call"/>
    </LinearLayout>
</RelativeLayout>

每行都有一个单独的LinearLayout。重要的是，您应该为每个LinearLayout分配一个id，以便您可以使用其上方布局的layout_below设置底部布局的id属性

然后在您的第二个LinearLayout中，您可以像原来一样水平添加图标

这会给你一些看起来像这样的东西：

我想在android中创建这个UI

3 个答案: