一、首先创建新项目命名为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。
以下是代码的主要功能和特点：
根LinearLayout：虽然代码片段没有显示根LinearLayout的完整开始标签，但我们可以假设它应该类似于<LinearLayout ...>（其中...代表其他属性，如xmlns:android和xmlns:app命名空间声明）。这个根LinearLayout设置了整个布局的宽度和高度为match_parent，背景为@drawable/animal_bg，方向为垂直（vertical），并且内部有填充（padding）。
三个子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）。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
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
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
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>
五、运行效果界面
