Question

我花了数年时间在java中使用GridBagLayout，所以我认为设置一个简单的布局会很容易。花了几个小时摆弄嵌套的LinearLayouts，阅读教程，看看RelativeLayout，我无处可去。

以下是我希望主菜单的样子。我认为这是可行的，但很多事情对我没有意义，例如增加权重似乎会减少View占用的空间量？

我考虑做的一件事就是使用相对布局，在不关心尺寸的情况下铺设其他所有内容，然后在我的onCreate中设置尺寸，因为我知道显示器的尺寸和我可以只为每个元素设置一定数量的像素。那被认为是不好的做法吗？

我只想尝试创建一个标题在顶部的布局（文本尽可能大，可以填充屏幕的宽度）。这应该占据前30％。然后下一个50％包含左边的两个按钮，我想绘制一些动画的区域（我假设使用SurfaceView是一个好主意），然后右边还有两个按钮。

一旦我弄清楚如何添加这些内容，其余的20％将用于横幅广告。

这可能吗？任何人都可以为我展示一些XML吗？

my design

Answer 1

非常感谢Alok Nair，这并不难做到......我只需要将尺寸设置为0px并让布局权重处理尺寸。

这就是最终的结果：

preview image

<LinearLayout
    android:background="@drawable/main_menu_background"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:gravity="top"
    android:id="@+id/mainSectionMenu"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="LUNA PUMA"
        android:id="@+id/mTitleText"
        android:layout_gravity="center"
        android:textColor="#ffffffff"
        android:autoText="false"
        android:textSize="50dp"
        android:layout_weight=".3"
        android:gravity="center"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight=".5">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight=".25">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Easy"
                android:id="@+id/mEasyButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:background="@android:color/transparent"
                android:textColor="#ff000000"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Medium"
                android:id="@+id/mMediumButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:textColor="#ff000000"
                android:background="@android:color/transparent"/>
        </LinearLayout>

        <SurfaceView
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:id="@+id/mAnimationSurfaceView"
            android:layout_weight=".5"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0px"
            android:layout_height="match_parent"
            android:layout_weight=".25"
            >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="Hard"
                android:id="@+id/mHardButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:textColor="#ff000000"
                android:background="@android:color/transparent"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="0px"
                android:text="More ..."
                android:id="@+id/mMoreButton"
                android:layout_gravity="center"
                android:layout_weight=".5"
                android:background="@android:color/transparent"
                android:textColor="#ff000000"/>
        </LinearLayout>
    </LinearLayout>



    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight=".2">
    </FrameLayout>

</LinearLayout>

Answer 2

您必须使用布局组合，要实现此目的，您可以使用android：layout_weight参数查看视图或使用Android Percent支持库。

使用layout_weight，您可以指定多个视图之间的大小比率。例如。你有一个view1和一个view2。 view1应使用屏幕的3/4，view2应使用屏幕的1/4。然后，您将view1的layout_weight设置为3，将view2的layout_weight设置为1.

要使其正常工作，您还必须将高度或宽度（取决于您的方向）设置为0px。

Android百分比支持库允许以百分比而非绝对数字或权重来指定视图的维度。

该库包含两个主要布局，允许嵌套视图指定基于百分比的布局：PercentRelativeLayout和PercentFrameLayout，其工作方式与非百分比对应方式非常相似。

一旦您将其中一个容器合并到布局中，您就可以指定百分比属性，例如app：layout_widthPercent或app：layout_marginTopPercent =“25％”。

要在您的应用中使用它，只需将百分比支持库添加到您的项目

dependencies {
    compile 'com.android.support:percent:22.2.0'
}

以下是使用此库的示例布局：

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    style="@style/match"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    style="@style/block"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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


<android.support.percent.PercentRelativeLayout
    android:layout_marginTop="?attr/actionBarSize"
    android:clickable="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/row_one_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#5182bb"
        app:layout_heightPercent="15%"
        app:layout_widthPercent="30%" />

    <View
        android:id="@+id/row_one_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@+id/row_one_item_one"
        android:background="#396190"
        app:layout_heightPercent="15%"
        app:layout_widthPercent="30%" />

    <View
        android:id="@+id/row_one_item_three"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_toRightOf="@+id/row_one_item_two"
        android:background="#8fb5e1"
        app:layout_heightPercent="15%"
        app:layout_widthPercent="40%" />

    <View
        android:id="@+id/row_two_item_one"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@+id/row_one_item_one"
        android:background="#d89695"
        app:layout_heightPercent="15%" />

    <View
        android:id="@+id/row_three_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_two_item_one"
        android:background="#f9c093"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <View
        android:id="@+id/row_three_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_two_item_one"
        android:layout_toRightOf="@+id/row_three_item_one"
        android:background="#948957"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="60%" />

    <View
        android:id="@+id/row_four_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_three_item_one"
        android:background="#ccc2d9"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <View
        android:id="@+id/row_four_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_three_item_two"
        android:layout_toRightOf="@+id/row_four_item_one"
        android:background="#c3d59e"
        app:layout_heightPercent="25%"
        app:layout_widthPercent="60%" />

    <View
        android:id="@+id/row_five_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_four_item_one"
        android:background="#948957"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="40%" />

    <View
        android:id="@+id/row_five_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_four_item_two"
        android:layout_toRightOf="@+id/row_five_item_one"
        android:background="#e6e0ec"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="60%" />

    <View
        android:id="@+id/row_six_item_one"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_five_item_one"
        android:background="#f9c093"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="20%" />

    <View
        android:id="@+id/row_six_item_two"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_five_item_one"
        android:layout_toRightOf="@+id/row_six_item_one"
        android:background="#588fd3"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="20%" />

    <View
        android:id="@+id/row_six_item_three"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@+id/row_five_item_two"
        android:layout_toRightOf="@+id/row_six_item_two"
        android:background="#a6a6a6"
        app:layout_heightPercent="25%"
        app:layout_widthPercent="60%" />

</android.support.percent.PercentRelativeLayout>

您可以从中了解并使用它来实现您的设计要求。

无法让Android布局做我想做的事

2 个答案: