Android语言基础教程（61）Android用户界面设计经典范例之猜猜鸡蛋放在哪只鞋子里：别让代码秃头！用这个藏鸡蛋游戏解锁Android界面设计，妹子都能秒懂-优快云博客

一、为啥要从“藏鸡蛋”学起？

学技术最怕什么？——一上来就劝退！见过太多教程一开口就是“Android四大组件”，直接把人整成地铁老人看手机.jpg。但假如我告诉你，今天要做的APP是个整蛊游戏：让用户在三个鞋子里找隐藏的鸡蛋，找对了放烟花，找错了糊一脸鸡蛋液……是不是瞬间觉得代码眉清目秀了？

这个案例的妙处在于：

元素极简：只要3张图片+1个按钮
套路齐全：布局、交互、逻辑全涵盖
反馈上头：猜对的爽感堪比拆盲盒

最重要的是——做完就能拿去忽悠朋友，学习动力直接拉满！

二、界面搭建：比摆积木还简单的操作

2.1 选对布局，鞋子才不会叠罗汉

Android界面的灵魂就是布局！这里推荐LinearLayout线性布局，为啥？因为它像小学排队做操——要么横着站一排，要么竖着列一队，绝对不乱跑。

来品品这段XML代码（放心，比阅读理解简单）：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center">
    
    <!-- 第一只鞋 -->
    <ImageView
        android:id="@+id/shoe1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/shoe_normal" />
        
    <!-- 第二只鞋 --> 
    <ImageView
        android:id="@+id/shoe2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/shoe_normal" />
        
    <!-- 第三只鞋 -->
    <ImageView
        android:id="@+id/shoe3"  
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/shoe_normal" />
</LinearLayout>

注意这几个关键属性：

orientation="horizontal"：让三只鞋并排站
gravity="center"：强迫症福音，自动居中
dp单位：让鞋子在所有手机上一样大

2.2 准备图片：戏精的自我修养

你需要准备这些图片素材：

shoe_normal.png：空鞋子
shoe_with_egg.png：藏了鸡蛋的鞋子
broken_egg.png：碎鸡蛋图片

建议用纯色背景的矢量图，这样拉伸不变形。记住要把图片拖到res/drawable文件夹，别学某些萌新直接扔桌面！

三、逻辑代码：教按钮“做人”

3.1 初始化：让Java认识XML里的控件

在MainActivity里要做的第一件事——给界面控件和代码牵线！

public class MainActivity extends AppCompatActivity {
    private ImageView shoe1, shoe2, shoe3;
    private int eggShoe; // 记录鸡蛋在哪只鞋

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // 绑定XML控件
        shoe1 = findViewById(R.id.shoe1);
        shoe2 = findViewById(R.id.shoe2); 
        shoe3 = findViewById(R.id.shoe3);
        
        initGame();
    }
    
    private void initGame() {
        // 随机把鸡蛋塞到某只鞋
        Random random = new Random();
        eggShoe = random.nextInt(3) + 1; // 生成1~3的随机数
    }
}

这里有个骚操作：用Random随机数决定鸡蛋位置，每次打开游戏都不一样，防止玩家背板！

3.2 点击事件：让鞋子会“说话”

重点来了！我们要给每只鞋设置点击监听器，相当于给它们安装“触觉神经”：

// 在initGame()后添加：
shoe1.setOnClickListener(v -> checkAnswer(1));
shoe2.setOnClickListener(v -> checkAnswer(2)); 
shoe3.setOnClickListener(v -> checkAnswer(3));

// 判断猜对猜错的核心方法
private void checkAnswer(int selectedShoe) {
    // 先重置所有鞋子图片
    resetShoes();
    
    if(selectedShoe == eggShoe) {
        // 猜对了显示藏鸡蛋的鞋
        showEggShoe();
        Toast.makeText(this, "恭喜！找到鸡蛋啦！", Toast.LENGTH_SHORT).show();
    } else {
        // 猜错了显示碎鸡蛋
        showBrokenEgg(selectedShoe);
        Toast.makeText(this, "手气真臭！鸡蛋碎了一地！", Toast.LENGTH_SHORT).show();
    }
}

3.3 图片切换：视觉反馈的魔法

最带感的部分来了——根据结果切换图片！

private void resetShoes() {
    shoe1.setImageResource(R.drawable.shoe_normal);
    shoe2.setImageResource(R.drawable.shoe_normal);
    shoe3.setImageResource(R.drawable.shoe_normal);
}

private void showEggShoe() {
    switch(eggShoe) {
        case 1:
            shoe1.setImageResource(R.drawable.shoe_with_egg);
            break;
        case 2:
            shoe2.setImageResource(R.drawable.shoe_with_egg); 
            break;
        case 3:
            shoe3.setImageResource(R.drawable.shoe_with_egg);
            break;
    }
}

private void showBrokenEgg(int wrongShoe) {
    // 显示正确位置
    showEggShoe();
    // 在选错的位置显示碎鸡蛋
    switch(wrongShoe) {
        case 1:
            shoe1.setImageResource(R.drawable.broken_egg);
            break;
        case 2:
            shoe2.setImageResource(R.drawable.broken_egg);
            break; 
        case 3:
            shoe3.setImageResource(R.drawable.broken_egg);
            break;
    }
}

四、进阶玩法：让游戏更上头

基础版做完后，你可以继续加戏：

4.1 添加重新开始按钮

在XML里加个按钮，点击时调用initGame()重置游戏。

4.2 计分系统

用SharedPreferences记录玩家历史最高分，卷起来！

4.3 动画效果

让鞋子点击时有个缩放动画，模仿被按下去的感觉：

shoe1.animate().scaleX(0.9f).scaleY(0.9f).setDuration(100)
        .withEndAction(() -> shoe1.animate().scaleX(1f).scaleY(1f));

五、完整代码打包带走

由于篇幅限制，这里提供核心代码框架。完整项目已上传GitHub（评论区获取地址），包含所有素材文件和细节处理。

重要提醒：

记得在AndroidManifest.xml里设置横屏：android:screenOrientation="portrait"
图片素材建议使用PNG格式透明底
遇到问题先检查ID是否写错，这是新手最容易翻车的地方

六、总结：你居然学会了这些

通过这个看似沙雕的游戏，你其实已经掌握了：
✅ 线性布局的实际应用
✅ ImageView的动态控制
✅ 点击事件处理
✅ 随机数生成
✅ Toast提示使用
✅ 基础动画效果

下次面试被问及Android界面设计，直接把游戏掏出来：“这就是我做的！”——效果堪比在程序员论坛晒出女神照片，杀伤力你懂的！

最后送各位一句话：最好的学习就是把代码玩出花来。现在，去给你的鞋子们藏鸡蛋吧！