如何在android中完美地安排组件

时间:2017-10-03 05:31:26

标签: android android-layout

enter image description here

我在android中有初学者知识我正在尝试设计如下的屏幕 我的设计在横向模式下并不完美。我想克服这个问题,我不知道如何纠正这个问题。 我在想什么......

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

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
   <RelativeLayout
        android:id="@+id/rL"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@mipmap/lay10"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

     <FrameLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:id="@+id/frame">
        <LinearLayout
            android:id="@+id/linearfromdate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|center"
            android:layout_marginTop="5dp"
            android:orientation="horizontal">
      <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="From Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
        </LinearLayout>
      <LinearLayout
            android:id="@+id/linear"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linearfromdate"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="2dp">
             <EditText
                android:id="@+id/fromDate"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                 android:background="@drawable/edittext_round"/> 
     </LinearLayout>
     </FrameLayout>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/frame2"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@id/frame1">
        <LinearLayout
                android:id="@+id/lineartodate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                android:orientation="horizontal">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="To Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
            </LinearLayout>
            <LinearLayout
                android:id="@+id/linear1"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">
         <EditText
                android:id="@+id/todate"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:background="@drawable/edittext_round" />
                   </LinearLayout>
            </FrameLayout>
              <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/frame2"
            android:layout_marginLeft="2dp"
            android:id="@+id/frame3"
            >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/lineardigit"
                android:orientation="horizontal"
                android:layout_gravity="top|center"
                android:layout_marginTop="5dp">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Digit"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear3"
                android:layout_width="80dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:background="@drawable/edittext_round"
                >

                <Spinner
                    android:id="@+id/digitspinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    />
            </LinearLayout>


        </FrameLayout>


        <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/frame4"
            android:layout_marginRight="3dp"
            android:layout_marginLeft="2dp"
            android:layout_toRightOf="@+id/frame3">

            <LinearLayout
                android:id="@+id/lineartime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Time"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_round"
                android:orientation="horizontal">

                <Spinner
                    android:id="@+id/timespinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </FrameLayout>
        <FrameLayout
          android:layout_width="200dp"
          android:layout_height="wrap_content"
            android:id="@+id/frame5"
            android:layout_toStartOf="@+id/rL"
            android:layout_below="@id/frame1"
            android:layout_toLeftOf="@id/frame4"
            android:layout_marginLeft="2dp"
            >

            <LinearLayout
            android:id="@+id/linearname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_gravity="top|center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name"
                android:textColor="@color/list_background"
                android:textSize="10sp" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/linear4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/edittext_round"
            android:orientation="horizontal">

            <Spinner
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
        </FrameLayout>

        <FrameLayout
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:id="@+id/frame6"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="2dp"
            android:layout_below="@id/frame4"
            android:layout_toRightOf="@id/frame5"

           >

            <LinearLayout
                android:id="@+id/linearnametype"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="top|center"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Name Type"
                    android:textColor="@color/list_background"
                    android:textSize="10sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/linear5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:background="@drawable/edittext_round"
                android:orientation="horizontal">

                <Spinner
                    android:id="@+id/nametype"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                </Spinner>
            </LinearLayout>
        </FrameLayout>
        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:id="@+id/frame7"
            android:layout_marginRight="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginTop="15dp"
            android:layout_toRightOf="@id/frame6"
            android:layout_below="@id/frame4">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Go"
                android:background="@drawable/edittextstyle"
               />

        </FrameLayout>
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linearweb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/rL"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <WebView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/webView">

        </WebView>

    </LinearLayout>

</RelativeLayout>

我希望减少横向模式中的额外空间。它在纵向模式下完美运行。我正在尝试初学者知识。

3 个答案:

答案 0 :(得分:4)

试试吧

<?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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@mipmap/lay10">


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

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="From Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <EditText
                android:id="@+id/fromDate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round" />

        </LinearLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="To Date"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <EditText
                android:id="@+id/todate"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round" />

        </LinearLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Digit"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/digitspinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Time"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/timespinner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

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

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Name"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="5dp"
                android:text="Name Type"
                android:textColor="@color/list_background"
                android:textSize="10sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:background="@drawable/edittext_round">

                <Spinner
                    android:id="@+id/nametype"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@drawable/edittextstyle"
            android:text="Go" />
    </LinearLayout>
</LinearLayout>

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

答案 1 :(得分:2)

您可以在横向模式下为应用创建新的布局。这意味着您可以再次排列所有组件,以便将它们放置在不同的位置或可能使用其他布局,从而更好地适应。

这是您可能感兴趣的优秀课程: Material design for android course。整个课程的目的是让您的应用在不同布局的多个设备上看起来很棒。

一些感兴趣的链接:

Supporting Different Screens

Android portrait and landscape example

希望这有所帮助并祝你好运:)

答案 2 :(得分:1)

为不同方向创建不同的布局。

当你只有layout / main.xml时,默认情况下Android会为两个方向呈现相同的布局文件 如果您希望横向模式的布局看起来不同,则再创建一个专门用于横向模式的布局。

为此创建一个文件夹 layout-land / ,并将您的横向布局放在该文件夹中 因此,您的最终文件夹结构将如下所示

enter image description here

以下是Creating different layouts的官方文档 Stackoverflow on same problem