我将如何进行此布局？

Question

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

Answer 1

您可以查看 Chris Banes 对新 google 设计库的实施。 https://github.com/chrisbanes/cheesesquare. Especially check this layout，其中包含您附加的布局中的一些部分。

Answer 2

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

不要忘记 gradle 中的 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>

给出这个结果（微调器和编辑文本的样式由您决定 - 这是在 api 18 上）：

我将如何进行此布局？

How would I go about making this layout?

android

xml

layout

user-profile