java - Android创建特定布局(仅限XML)

标签 java android xml android-studio-3.0

我是 XML 新手，想要创建一个简单的游戏起始页。首先，我从 Android Studio 3.0 布局制作器开始，并想到了类似这样的东西(第二张图片)。最大的问题是右下角的 3 个 ImageButton。经过多次尝试和谷歌，我找不到解决方案，仅使用 XML 代码是否可以实现？

That should be the final result

就我而言，到目前为止，它看起来像这样: enter image description here 

<?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"/>

但看起来是这样的:

enter image description here

最佳答案

我会这样做:

<?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>

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

enter image description here

解决方案的重要部分是:

  • 对于顶部圆形 View ，使用百分比宽度和纵横比，使其成为不填满整个屏幕的完美圆形
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
  • 对于底行图像，请使用 center scaleType，以便图像不会拉伸(stretch)以填充整个 View 
android:scaleType="center"

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

关于java - Android创建特定布局(仅限XML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49560263/

上一篇：java - 提取 zip 存档而不丢失文件夹

下一篇：java - 无法从 ReactiveCouchbaseRepository 中删除项目

相关文章：

java - 使用 XPathFactory 评估 Xpath 属性

xml - Joomla，为特定 View 添加任务参数

javascript - 如何将值从查询字符串传递到 javascript？

java - 具有所有抽象方法的抽象类 - 实际示例

java - 启动webview后软键盘一直在

java - sessionfactory创建第一次需要花费大量时间加载

android - 如何通过 Intent 只选择doc、docx文件？

android - 是否可以重新创建 Activity 并保留运行时实例？

java - 为什么我在这里收到未经检查的警告？

java - 传递对 Arraylist 中对象的引用？

©2024 IT工具网  联系我们