Android 创建特定布局（仅限 XML）答案

【问题标题】：Android create specifc Layout (only XML)Android 创建特定布局（仅限 XML）
【发布时间】：2018-03-29 15:50:14
【问题描述】：

我是 XML 新手，想创建一个简单的游戏起始页。首先，我从 Android Studio 3.0 Layout maker 开始，并想出了这样的东西（第二张图片）。最大的问题是获取右下角的 3 个 ImageButtons。经过大量尝试和谷歌我找不到解决方案，是否可以仅使用 XML 代码？

到目前为止，我的情况是这样的：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">

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

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp"
        android:cropToPadding="false"
        app:srcCompat="@drawable/logo" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/buttons_style1"
        android:textColor="@color/colorPrimaryFont"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:text="@string/play"
        android:textSize="30sp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textColor="@color/colorPrimaryFont"
        android:background="@drawable/buttons_style1"
        android:paddingBottom="12dp"
        android:paddingTop="12dp"
        android:text="@string/rate"
        android:textSize="30sp" />

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

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_margin="15dp"
            android:layout_weight="0.33"
            android:adjustViewBounds="false"
            android:background="@drawable/button_style2"
            android:cropToPadding="false"
            android:scaleType="centerInside"
            app:srcCompat="@drawable/settings" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.33"
            android:scaleType="centerInside"
            android:layout_margin="15dp"
            android:background="@drawable/button_style2"
            app:srcCompat="@drawable/highscores" />

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="wrap_content"
            android:layout_height="80dp"
            android:layout_weight="0.33"
            android:scaleType="centerInside"
            android:layout_margin="15dp"
            android:background="@drawable/button_style2"
            app:srcCompat="@drawable/share" />

    </LinearLayout>

</LinearLayout>

是否可以使用 XML 来获取？希望有人可以提供帮助：D

编辑尝试了这个：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context="de.chipsapps.ca.identiti.MenuACT">


<View
    android:id="@+id/bigCircle"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="48dp"
    android:background="@drawable/logo"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_percent=".5"/>

但看起来是这样的：

【问题讨论】：

首先使用较小分辨率的图像，并从两侧添加一些边距或使用weightsum
我必须在哪里使用 weightsum？

标签： java android xml android-studio-3.0

【解决方案1】：

我会这样做：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    android:background="@color/green">

    <View
        android:id="@+id/bigCircle"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="48dp"
        android:background="@drawable/circle"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintWidth_percent=".5"/>

    <TextView
        android:id="@+id/play"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:gravity="center"
        android:textColor="#88ffffff"
        android:textSize="24sp"
        android:text="PLAY"
        android:background="@color/green_dark"
        app:layout_constraintTop_toBottomOf="@+id/bigCircle"
        app:layout_constraintLeft_toLeftOf="@+id/bigCircle"
        app:layout_constraintRight_toRightOf="@+id/bigCircle"/>

    <TextView
        android:id="@+id/rate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="6dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:gravity="center"
        android:textColor="#88ffffff"
        android:textSize="24sp"
        android:text="RATE"
        android:background="@color/green_dark"
        app:layout_constraintTop_toBottomOf="@+id/play"
        app:layout_constraintLeft_toLeftOf="@+id/bigCircle"
        app:layout_constraintRight_toRightOf="@+id/bigCircle"/>

    <ImageView
        android:id="@+id/settings"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toLeftOf="@+id/rate"
        app:layout_constraintRight_toLeftOf="@+id/space1"
        app:layout_constraintDimensionRatio="1:1"
        app:srcCompat="@drawable/ic_settings_white_24dp"/>

    <android.support.v4.widget.Space
        android:id="@+id/space1"
        android:layout_width="6dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@+id/settings"
        app:layout_constraintRight_toLeftOf="@+id/trophy"/>

    <ImageView
        android:id="@+id/trophy"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toRightOf="@+id/space1"
        app:layout_constraintRight_toLeftOf="@+id/space2"
        app:srcCompat="@drawable/ic_settings_white_24dp"
        app:layout_constraintDimensionRatio="1:1"/>

    <android.support.v4.widget.Space
        android:id="@+id/space2"
        android:layout_width="6dp"
        android:layout_height="0dp"
        app:layout_constraintLeft_toRightOf="@+id/trophy"
        app:layout_constraintRight_toLeftOf="@+id/share"/>

    <ImageView
        android:id="@+id/share"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="6dp"
        android:scaleType="center"
        android:background="@drawable/circle"
        app:layout_constraintTop_toBottomOf="@+id/rate"
        app:layout_constraintLeft_toRightOf="@+id/space2"
        app:layout_constraintRight_toRightOf="@+id/rate"
        app:srcCompat="@drawable/ic_settings_white_24dp"
        app:layout_constraintDimensionRatio="1:1"/>

</android.support.constraint.ConstraintLayout>

还有圆圈背景：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/green_dark"/>

</shape>

显然，您必须用真实的图像和颜色替换图像和颜色，并且您可能想要调整间距，但这应该可以帮助您开始。

解决方案的重要部分是：

对于顶部圆形视图，使用百分比宽度和纵横比以使其成为不填满整个屏幕的完美圆形

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"

对于图像的底行，使用center scaleType，这样图像就不会被拉伸以填满整个视图

android:scaleType="center"

注意：app:layout_constraintWidth_percent 属性要求您使用constraint-layout 支持库的1.1.0 版本。

【讨论】：

感谢复杂的回答，我试过了，但结果不对？我已经在我的原始帖子中写了它，请看一下：D
@TimJansen 在您的 build.gradle 文件中，您使用的是哪个版本的 constraint-layout 库？
@TimJansen 我假设您使用的是版本1.0.2；将其更改为1.1.0-beta5，它应该可以工作。
在哪里可以设置？
@TimJansen 在 android studio 的顶部菜单栏中，Navigate -> File... 并输入“build.gradle”。可能会有两个；选择“应用程序”之一。您应该会看到类似compile 'com.android.support.constraint:constraint-layout:1.0.2' 或implementation 'com.android.support.constraint:constraint-layout:1.0.2' 的行...版本号在末尾；将“1.0.2”更改为“1.1.0-beta5”

【解决方案2】：

向主LinearLayout 添加边距，如下所示。

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:orientation="vertical">
...

</LinearLayout>

【讨论】：

是的，这可以工作，但图像按钮确实必须在其中包含大图片

【解决方案3】：

删除两个内部线性布局。使用约束来连接元素，并在需要元素和边框之间距离的地方使用边距。

如果你想让一个元素占据所有可用空间，除了边上的一些空间，给它宽度 0dp 并用约束连接到两边。

有关该主题的更多信息，请阅读此内容 https://developer.android.com/training/constraint-layout/index.html

例如，将其添加到按钮：

        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"

另一个例子：

<Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"/>

【讨论】：

约束如何使用？
请参考我刚刚添加的链接
试试第二个例子
使用相对布局不是更好，因为它根本不是一个复杂的布局......