我怎么会去使这一布局？ [英] How would I go about making this layout?

问题描述

我期待创建此布局在我的Andr​​oid应用程序。我会怎么做呢？是否有任何pre-现有code为这种类型的布局？

I am looking to create this layout in my Android application. How would I do so? Is there any pre-existing code for a layout of this type?

推荐答案

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

It's a pretty simple layout actually, the only problem is making FAB in between 2 views.

不要忘了的gradle中编译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）：

Gives this result (styling of spinner and edittext is on you - this is on api 18) :

这篇关于我怎么会去使这一布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！