Android实战开发小游戏BullsEye，初学者基本控件练习Demo

Leave a reply

1、上图，先上图再BB

2、设计说明
2.1、游戏中随机给了一个数字，玩家在一个进度条中凭自己的感觉调出该数字；
2.2、点击确定后，游戏根据玩家调整出的精度给出一个分数，越吻合分数越高；
2.3、附带一个计分与复位功能，一个帮助的弹框；

3、主要技术点
3.1、基本布局，将手机屏幕分割为上中下三大块纵向布局，每一个小格中再根据需要进行纵身或横向布局，如下图所示

3.2、对于初学者来讲，布局中值得一提的有gravity与layout_gravity这两个属性，layout_gravity对其内部子控件生效，而gravity对自身生效；
3.3、比如android:gravity:center_horizontal，表示当前控件水平居中，但前提条件是该控件是被纵向布局的，如果该控件本身是被横向布局的，那么横向到底有多长是未知的，从而设置也就无效；如果该控件是纵向布局的，那居中表示的肯定就是横向居中；
3.4、如果我是横向布局的(从左往向排过去)，而我又希望控件被摆放在横向居中，该如何处理呢？这个时候就需要在父控件中设置layout_gravity属性，该属性可以将子控件放在任何一个方位；
3.5、另外一个值得关注的属性即layout_weight，这个属性可以将剩余的空间通过该值均分给相关控件，举个栗子：屏幕宽320px，横向摆放了2个按钮分别为40px，剩下280px，如果两按钮设置layout_weight都为1，则分别取140，如果分别为1和2，则按钮宽分别为40+(280*1/3)和40+(280*2/3);
3.6、实践出真知，多多练习与调试，多试验；

4、部分代码
Activity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

package com.yusian.bullseye;
 
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.SeekBar;
import android.widget.TextView;
 
import java.util.Random;
 
public class MainActivity extends AppCompatActivity {
 
    private SeekBar sbBullsEye;
    private Button btnOk;
    private ImageButton btnReplay, btnHelp;
    private TextView tvTarget, tvScore, tvCount;
    int randomScore, finalScore, count = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 初始化成员变量
        findView();
        randomOfScore();
        // 确定按钮事件处理方法
        btnOk.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 分数更新
                int currentScore = sbBullsEye.getProgress();
                finalScore = 100 - Math.abs(currentScore - randomScore);
                // 局数更新
                count++;
                // 刷新页面
                refreshTextView();
                randomOfScore();
            }
        });
        // 重置按钮事件
        btnReplay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                randomOfScore();
                count = 1;
                finalScore = 0;
                refreshTextView();
            }
        });
        // 帮助按钮事件
        btnHelp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setTitle("这是标题")
                        .setMessage("这是内容")
                        .setPositiveButton("知道了", null);
                AlertDialog dialog = builder.create();
                dialog.show();
            }
        });
    }
 
    /*
    * 刷新TextView视图
    */
    private void refreshTextView(){
        tvScore.setText("分数："+finalScore);
        tvCount.setText("局数："+count);
    }
 
    /*
    * 生成随机数方法
    */
    private void randomOfScore() {
        Random random = new Random();
        randomScore = random.nextInt(99) + 1;
        tvTarget.setText("把进度条拖到：" + randomScore);
        sbBullsEye.setProgress(0);
    }
    /*
    * 初始化控件id
    */
    private void findView() {
        sbBullsEye = (SeekBar) findViewById(R.id.sb_bullseye);
        btnOk = (Button) findViewById(R.id.btn_ok);
        btnReplay = (ImageButton) findViewById(R.id.btn_replay);
        btnHelp = (ImageButton) findViewById(R.id.btn_help);
        tvTarget = (TextView) findViewById(R.id.tv_target);
        tvScore = (TextView) findViewById(R.id.tv_score);
        tvCount = (TextView) findViewById(R.id.tv_count);
 
    }
}

XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.yusian.bullseye.MainActivity">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="1"
        android:gravity="center">
 
        <TextView
            android:id="@+id/tv_target"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="把进度条拖到：80"
            android:textSize="30sp"/>
 
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">
 
        <SeekBar
            android:id="@+id/sb_bullseye"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progress="60"
            android:max="100"
            android:layout_margin="20dp"
            android:thumb="@mipmap/icon_point"
            />
        <Button
            android:id="@+id/btn_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:textColor="@color/whiteColor"
            android:background="@mipmap/btn_background"
            android:text="确定"/>
 
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal">
 
 
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
 
            <ImageButton
                android:id="@+id/btn_replay"
                android:layout_width="40dp"
                android:layout_height="30dp"
                android:text="Replay"
                android:src="@mipmap/replay"
                android:background="@mipmap/btn_background"
                />
 
            <TextView
                android:id="@+id/tv_score"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="分数：99"
                android:layout_marginLeft="10dp"
                android:textSize="16sp"/>
 
        </LinearLayout>
 
 
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
 
            <TextView
                android:id="@+id/tv_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="局数：1"
                android:textSize="16sp"/>
            <ImageButton
                android:id="@+id/btn_help"
                android:layout_width="40dp"
                android:layout_height="30dp"
                android:src="@mipmap/icon_help"
                android:background="@mipmap/btn_background"
                android:text="帮助"
                android:layout_marginLeft="10dp"/>
 
        </LinearLayout>
 
    </LinearLayout>
 
</LinearLayout>

Leave a Reply