我将如何创建此布局

Question

我知道这可能不是最好的标题，所以如果你有更好的标题，请编辑。

好的，所以我有一个我想在 android 中创建的部分设计的模型，我将在下面发布。

我不是最擅长使用自定义形状的，所以我想我可能会走Images with clickable areas 的路线。这意味着我只需导入图像并监控用户是否单击屏幕的某个部分。

最好的方法是什么？

如果用 XML 更好地创建它，你有一个很好的教程，你可以指点我。

谢谢

Answer 1

这可能会有所帮助

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 1"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 2"/>


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 3"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Button 4"/>

    </LinearLayout>

</LinearLayout>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/circle"/></RelativeLayout>

将此文件保存在可绘制文件夹中，用于名为圆形的圆形按钮背景

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

<size android:width="200dp" android:height="200dp" />
<solid android:color="@android:color/holo_red_light" /></shape>

看起来像这样

Answer 2

这是一个经过全面测试的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/btn_1"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button one"/>

    <Button
        android:id="@+id/btn_2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/btn_1"
        android:text="Button two"/>

    <Button
        android:id="@+id/btn_3"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Button three"
        android:layout_below="@id/btn_1"/>

    <Button
        android:id="@+id/btn_4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_2"
        android:layout_toRightOf="@id/btn_3"
        android:text="Button four"/>

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:translationZ="10dp"
        android:src="@drawable/ti_logo"/>

</RelativeLayout>

Answer 3

@SammyG 你可以根据你的要求在这个布局中编辑..

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.stackoverflow_test.MainActivity">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark"
            android:padding="20dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/black"
            android:padding="20dp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark"
            android:padding="20dp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_bright"
            android:padding="20dp" />
    </LinearLayout>
</LinearLayout>

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_centerInParent="true"
    android:background="@mipmap/ic_launcher" /></RelativeLayout>