我将如何创建此布局

Question

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

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

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

最好的方法是什么？

如果用 XML 创建它更好，你有没有好的教程可以指给我看。

谢谢

Answer 1

这是经过全面测试的布局

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

这可能会有帮助

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

Keep this file in drawable folder for circle button background named as circle

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

我将如何创建此布局

How would I create this layout

android

android-layout

android-xml

android-shape