我该怎么做这个布局？

Question

我希望在我的Android应用程序中创建此布局。我该怎么办？是否有任何预先存在的此类型布局代码？

Answer 1

实际上这是一个非常简单的布局，唯一的问题是在2个视图之间制作FAB。

不要忘记格斗中的compile 'com.android.support:design:22.2.0'。

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

    <LinearLayout
        android:id="@+id/viewA"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.6"
        android:background="#acacac"
        android:orientation="horizontal"/>

    <LinearLayout
        android:id="@+id/viewB"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:background="#bebebe"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="30dp"
            android:layout_marginRight="20dp"
            android:layout_marginLeft="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Name"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="City"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginRight="20dp"
            android:layout_marginLeft="20dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:src="@drawable/ic_palette_grey600_24dp"/>

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="Address"/>

            <Spinner
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:entries="@array/array"
                android:prompt="@string/prompt"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/ic_add_white_24dp"
    app:borderWidth="0dp"
    app:backgroundTint="@android:color/holo_green_dark"
    app:layout_anchor="@id/viewA"
    app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>

给出了这个结果（微调器和edittext的样式在你身上 - 这是在api 18上）：

Answer 2

你可以看一下Chris Banes对新谷歌设计库的实现。 https://github.com/chrisbanes/cheesesquare。特别是检查this layout，它有一些您已经附加的布局部分。