学习地址：https://study.163.com/course/courseMain.htm?courseId=1003285007

一、产品

（1）产品效果如下：

image.png

（2）流程图：

image.png

二、添加控件

(1)新建一个project,Application name为BullsEye

image.png

(2)布局
activity_main.xml中的默认是ConstraintLayout（约束布局）改成LinearLayout（线性布局）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        //添加排列方向属性，垂直排列
        android:orientation="vertical"
        tools:context="com.example.bullseye.MainActivity">

(3)文本框- TextView

<TextView
 //文本框宽度，wrap_content适配内容
        android:layout_width="wrap_content"
//文本框高度
        android:layout_height="wrap_content"
//文本框内容
        android:text="小样把进度条拖动到：" />

效果：

image.png

(4)进度条 -seekbar
(5)按钮-button
(6)按照产品效果作出相应控件

<!--进度条-->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <!--确定按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="搞定"></Button>
    <!--帮助按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="帮助"></Button>
    <!--重新开始按钮-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="replay"></Button>
    <!--分数-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="分数：" />
    <!--局数-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="局数：" />

效果：

image.png

（7）实现业务逻辑，给所有控件加上id
给控件添加id ,一般命名是控件缩写_控件作用

<TextView
        android:id="@+id/tv_target"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="小样把进度条拖动到："
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <!--进度条-->
    <SeekBar
        android:id="@+id/sb_bullseye"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <!--确定按钮-->
    <Button
        android:id="@+id/btn_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="搞定"></Button>
    <!--帮助按钮-->
    <Button
        android:id="@+id/btn_help"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="帮助"></Button>
    <!--重新开始按钮-->
    <Button
        android:id="@+id/btn_replay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="replay"></Button>
    <!--分数-->
    <TextView
        android:id="@+id/tv_score"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="分数：" />
    <!--局数-->
    <TextView
        android:id="@+id/tv_index"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="局数：" />

三、控件关联

控件是静态的，需要与activity进行控件关联。
在对应的activity文件中，先将控件做成属性，用“控件类型 id”，id的命名方式可以根据java命名方法（小驼峰，如tvTarget）也可以根据android的命名方式（mTvTarget）,这里采用小驼峰命名方法。
出现如下情况：是需要引入textview的包，option +回车键即可。

image.png
image.png

在activity中要获取该控件就用findViewById进行定位。

findViewById(R.id.xml文件中对应的id)

代码：

private void findView() {
        tvTarget= findViewById(R.id.tv_target);
        tvScore=findViewById(R.id.tv_score);
        tvIndex=findViewById(R.id.tv_index);
        sbBullseye=findViewById(R.id.sb_bullseye);
        btnOk=findViewById(R.id.btn_ok);
        btnHelp=findViewById(R.id.btn_help);
        btnReplay=findViewById(R.id.btn_replay);
    }

四、控件对象设置

定位了控件，就可以对控件进行操作。
根据业务逻辑：
（1）出题
tvTarget我们要把这个文本后面的数字变成一个随机数。

public class MainActivity extends AppCompatActivity {
        TextView tvTarget;
        TextView tvScore;
        TextView tvIndex;
        SeekBar sbBullseye;
        Button btnOk;
        Button btnHelp;
        Button btnReplay;
        //随机数属性
        int randomScore;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            findView();
            //实例化
            Random random= new Random();
            //赋值随机数
            randomScore=random.nextInt(99)+1;
            //把目标分数作为一个变量
            tvTarget.setText("小样把进度条拖动到："+randomScore);
        }

    private void findView() {
        tvTarget= findViewById(R.id.tv_target);
        tvScore=findViewById(R.id.tv_score);
        tvIndex=findViewById(R.id.tv_index);
        sbBullseye=findViewById(R.id.sb_bullseye);
        btnOk=findViewById(R.id.btn_ok);
        btnHelp=findViewById(R.id.btn_help);
        btnReplay=findViewById(R.id.btn_replay);
    }
}

把这个生成随机数的代码封装成一个方法

    private void randomOfScore() {
        //实例化
        Random random= new Random();
        //赋值随机数
        randomScore=random.nextInt(99)+1;
        //把目标分数作为一个变量
        tvTarget.setText("小样把进度条拖动到："+randomScore);
    }

(2)拖动进度条得到分数，每局分数累加，并且每局目标分数重新生成，局数也计数一次。
(2.1.1)进度条
进度条可以设置最大值
在mainActivity.java文件中，Seekbar中添加

//设置最大值
android:max="100"
//设置进度条的初始位置
android:progress="0"

(2.1.2)事件监听器
事件监听器的原理：

• 涉及三类对象:
  Event Source(事件源): 也就是按钮，菜单，窗口等
  Event(事件)：就是操作的状态，单击、触摸、长按、双击等
  Event Listener(事件监听器)：对用户的操作做出响应，也就是单击按钮了使他有反应
• 用户操作外部动作，触发了事件源上的事件，事件监听器监听到后对这个操作作出响应。

//点击按钮btn1时，调用onClick里的方法
btn1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //点击按钮btn1时调用这里的方法
                }
            });

业务逻辑是：

btnOk.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //点击时调用这里的方法
                    //局数计数
                    index++;
                    //得到进度条的数
                    int currentScore = sbBullseye.getProgress();
                    //计算分数
                    int midScore=100- Math.abs(currentScore-randomScore);
                    finalScore += midScore;
                    //显示分数
                    tvScore.setText("分数："+finalScore);
                    //进度条位置初始化
                    sbBullseye.setProgress(0);
                    //局数计数展示
                    tvIndex.setText("局数："+index);
                    //重置目标分数
                    randomOfScore();

                }
            });

(2.1.3)repaly按钮
同上的，对replay按钮进行监听，在用户操作后，进行响应。

//点击btnReplay按钮时
        btnReplay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //分数清零
                finalScore=0;
                tvScore.setText("分数："+finalScore);
                index =0;
                tvIndex.setText("局数："+index);
                sbBullseye.setProgress(0);
                randomOfScore();
            }
        });

可以看到显示分数、显示局数、生成随机目标的几行代码重复出现，可以对他们进行封装。

 public void setInformation(){
            //显示分数
            tvScore.setText("分数："+finalScore);
            //局数计数展示
            tvIndex.setText("局数："+index);
            //进度条位置初始化
            sbBullseye.setProgress(0);
            randomOfScore();
        };

(2.1.4)help按钮
点击help按钮时，弹出弹框。同样还是用到事件监听器。
弹框控件-AlertDialog，可以看到这个控件有两个包，v7的包是兼容包、支持包，比如当你用较低的版本开发，但是想用版本较高里的某个控件，就可以用支持包。这里我们也用v7的包，可能会用在比较低的版本里。

image.png

//点击帮助按钮时
            btnHelp.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    //实例化对话
                    AlertDialog.Builder dialog=new AlertDialog.Builder(MainActivity.this);
                    //对话框的标题
                    dialog.setTitle("Help").
                            //对话框的信息
                            setMessage("这是游戏说明").
                            //对话框中的确认按钮
                            setPositiveButton("确认", new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialogInterface, int i) {
                                    //点击确认按钮，调用这个方法
                                    //退出对话框
                                    dialogInterface.dismiss();
                                }
                            });
                    dialog.show();//显示对话框
                }
            });

效果：

image.png

————————
一个没有美丽的界面的demo就完成了。🎉