Android移动开发案例教程————仿动物连连看界面

一、首先创建新项目命名为AnimalConnection

二、导入需要图片，重命名（导入图片地址如下图，可直接复制粘贴导入drawable包，重命名根据自己需求，也可按下图与我命名一致）

三、创建动物图片控件样式，在res/values/styles.xml中创建名为btnStyle的样式。（注意：如果在res/values/中未找到styles.xml,可如下图直接创建一个，styles.xml代码如下）

styles.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="btnStyle" parent="Widget.AppCompat.Button">
        <item name="android:layout_width">70dp</item>
        <item name="android:layout_height">70dp</item>
        <item name="android:layout_marginRight">15dp</item>
        <item name="android:background">@android:color/transparent</item>
    </style>

</resources>

四、放置界面控件布局

在acticity_main.xml中创建了包含三个水平排列的LinearLayout的布局，每个LinearLayout内部包含四个ImageButton。

以下是代码的主要功能和特点：

1. 根LinearLayout：虽然代码片段没有显示根LinearLayout的完整开始标签，但我们可以假设它应该类似于<LinearLayout ...>（其中...代表其他属性，如xmlns:android和xmlns:app命名空间声明）。这个根LinearLayout设置了整个布局的宽度和高度为match_parent，背景为@drawable/animal_bg，方向为垂直（vertical），并且内部有填充（padding）。

2. 三个子LinearLayout：

   • 每个LinearLayout都设置为水平方向（horizontal），宽度和高度为wrap_content，并且使用layout_gravity="center"来确保它们在其父布局中居中显示。
   • 它们通过layout_constraintTop_toTopOf、layout_constraintStart_toStartOf、layout_constraintEnd_toEndOf和layout_marginTop（对于第一个LinearLayout，使用layout_marginTop；对于后续的，使用layout_constraintTop_toBottomOf）等属性来定位，但这些属性实际上是ConstraintLayout特有的，而不是LinearLayout的。这表明原意可能是使用ConstraintLayout作为根布局，但代码片段中并未显示这一点。
   • 每个LinearLayout内部包含多个ImageButton，这些按钮通过style="@style/btnStyle"来应用统一的样式，并通过android:background设置背景图片，通过android:onClick指定点击事件的处理方法（myClick）。

3. ImageButton：每个ImageButton都通过style="@style/btnStyle"应用了一个样式（尽管样式定义不在代码片段中给出），这通常用于设置按钮的通用属性，如大小、边距、背景等。每个按钮还通过android:background设置了不同的背景图片，并通过android:onClick指定了一个点击事件处理方法myClick，这意味着在Activity或Fragment中需要有一个名为myClick的方法来处理这些按钮的点击事件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/animal_bg"
    android:orientation="vertical"
    android:padding="15dp">

<!-- 第一个LinearLayout -->
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="200dp">

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/three"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/four"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/box"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/five"
            android:onClick="myClick"/>

    </LinearLayout>

    <!-- 第二个LinearLayout -->
    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="15dp">

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/one"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/two"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/box"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/four"
            android:onClick="myClick"/>

    </LinearLayout>

    <!-- 第三个LinearLayout -->
    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="15dp">

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/five"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/box"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/three"
            android:onClick="myClick"/>

        <ImageButton
            style="@style/btnStyle"
            android:background="@drawable/two"
            android:onClick="myClick"/>

    </LinearLayout>

</LinearLayout>

五、运行效果界面