android UI material 风格

Question

我的意图是做这样的事情：

两个视图中间有一个按钮。

我遵循了几个指示，但没有成功。目前我的 xml

中有这个

正如我所说，我试着得到这样的东西：

我做了很多测试，但都达不到目标。

这是我正在使用的xml：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/up"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/room" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/center"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@+id/up"
                android:background="#f42323"
                android:orientation="vertical">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla " />

            </LinearLayout>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/up"
                android:drawableLeft="@drawable/ic_launcher"
                android:text="Hello!!" />

        </RelativeLayout>
    </LinearLayout>

</FrameLayout>

感谢帮助

感谢和问候。

Answer 1

像这样更新您的按钮：

<Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/up"
        android:layout_marginRight="10dp"
        android:layout_marginTop="-30dp"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="Hello!!" />

希望对您有所帮助！

Answer 2

你想要的是使用 RelativeLayout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/background">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/up"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/room" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/center"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_below="@+id/up"
                android:background="#f42323"
                android:orientation="vertical">


            </LinearLayout>

            <LinearLayout
                android:id="@+id/bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla " />

            </LinearLayout>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@id/up"
                android:drawableLeft="@drawable/ic_launcher"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="-25dp"
                android:layout_marginRight="8dp"
                android:text="Hello!!" />

        </RelativeLayout>
    </LinearLayout>

</FrameLayout>

您将底部与页眉或顶部布局对齐。然后使用marginBottom返回按钮大小的一半：例如：-25 这应该可以做到！

如果您还想要浮动操作按钮，这里是我目前正在使用的库：https://github.com/makovkastar/FloatingActionButton

Answer 3

Android Studio 中有一个 Google 的示例项目，它完全符合您的要求。

您可以通过File > Import Sample > Floating Action Button Basic

访问它

此示例包含一个 FloatingActionButton 视图，该视图继承自 FrameLayout。

android UI material 风格

android UI material style

user-interface

android

material-design