2017Google Study Jams之L2篮球计分APP实践

L2课程计分APP实践笔记

此次活动的举办方：Google Study Jams活动官网

我的博客（同步此次活动笔记）：CSDN博客、我的

Google Developers

L2的实践课程是实现一个类似球场积分器的APP。完成这么一个APP，我大致分为以下几步：

1.需求：计分APP的实现

实现的效果如下图所示，需求是，有两个篮球队，A队和B对，在比赛的过程需求为得分的球队加分。有3种进球加分项，远投加3份，近投加2分，罚球加1分。需要展示各自球队的总分，在比赛结束时可以重置两队的分数即分数为0。

实现的效果图

2.分析：由哪些控件组成及准备工作

准备工作：Android Studio工具，已经运行应用程序的手机或者模拟器。

分析：（来张手撸分析图，字比较丑多多担待哈~）

用到的控件

3.创建项目：开干

好了，有了以上的布局分析和准备工作，现在我们就可以动手开干了。

1. • 首先我们需要创建个新的工作空间，如图所示

     
     
     

     创建项目
2. • 填写项目名称、包名，选择项目在本地磁盘的位置（包名通常写为com.xxxx，及公司域名倒着写）

填写项目名，包名

3. • 选择sdk的兼容版本，这个一般默认即可，目前市场上4.0.3以上的手机占97.4%以上，所以我们最小兼容到4.0.3的版本即可，点击Next

设置SDK版本

4. • 这一步的话，Studio给我们提供了好多种模板，这里我们只需要选择EmptyActivity，也就是空白的页面即可，点击Next

选择页面模板

5. • 为我们的主页面命名，一般默认为MainActivity，点击Next

为主页面命名

6. • 这样项目就创建好啦，这时候可以运行一下看看效果了

项目创建效果

创建完项目效果图

4.设计：按照效果图和分析编写XML文件布局

编写XML大概的预览布局就是这样：

Xml布局预览

附上Xml布局的代码：

4.实现：编写Java代码实现逻辑

附上Java代码：

package com.shawpoo.app;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private TextView mAScoreText, mBScoreText; //显示两队分数
    private Button mAAddThreeBtn, mAAddTwoBtn, mAAddOneBtn; //A对加分按钮
    private Button mBAddThreeBtn, mBAddTwoBtn, mBAddOneBtn; //B对加分按钮
    private Button mResetBtn;
    private int mAScore, mBScore; //记录两队的分数

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    /**
     * 初始化组件
     */
    private void initView() {
        mAScoreText = (TextView) findViewById(R.id.aScoreText);
        mBScoreText = (TextView) findViewById(R.id.bScoreText);
        mAAddThreeBtn = (Button) findViewById(R.id.aAddThreeBtn);
        mAAddTwoBtn = (Button) findViewById(R.id.aAddTwoBtn);
        mAAddOneBtn = (Button) findViewById(R.id.aAddOneBtn);
        mBAddThreeBtn = (Button) findViewById(R.id.bAddThreeBtn);
        mBAddTwoBtn = (Button) findViewById(R.id.bAddTwoBtn);
        mBAddOneBtn = (Button) findViewById(R.id.bAddOneBtn);
        mResetBtn = (Button) findViewById(R.id.resetBtn);

        mAAddThreeBtn.setOnClickListener(this);
        mAAddTwoBtn.setOnClickListener(this);
        mAAddOneBtn.setOnClickListener(this);
        mBAddThreeBtn.setOnClickListener(this);
        mBAddTwoBtn.setOnClickListener(this);
        mBAddOneBtn.setOnClickListener(this);
        mResetBtn.setOnClickListener(this);
    }

    /**
     * 实现按钮点击回调
     *
     * @param view
     */
    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.aAddThreeBtn:
                aAddScore(3);
                break;
            case R.id.aAddTwoBtn:
                aAddScore(2);
                break;
            case R.id.aAddOneBtn:
                aAddScore(1);
                break;
            case R.id.bAddThreeBtn:
                bAddScore(3);
                break;
            case R.id.bAddTwoBtn:
                bAddScore(2);
                break;
            case R.id.bAddOneBtn:
                bAddScore(1);
                break;
            case R.id.resetBtn:
                showResetDialog();
                break;
        }
    }

    /**
     * A队加分
     *
     * @param score 要加的分数
     */
    private void aAddScore(int score) {
        mAScore = mAScore + score;
        displayAScore(mAScore);
    }

    /**
     * A队加分
     *
     * @param score 要加的分数
     */
    private void bAddScore(int score) {
        mBScore = mBScore + score;
        displayBScore(mBScore);
    }

    /**
     * 显示清空得分的弹框
     */
    private void showResetDialog() {
        AlertDialog.Builder builder = new AlertDialog.Builder(this)
                .setTitle("提示")
                .setMessage("确认要清空两队的得分吗？")
                .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        resetScore();  //确定清空
                    }
                })
                .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        // ignore
                    }
                });
        builder.show();
    }

    /**
     * 重置两队分数
     */
    private void resetScore() {
        mAScore = 0;
        mBScore = 0;
        displayAScore(mAScore);
        displayBScore(mBScore);
    }

    /**
     * 显示A队得分
     *
     * @param score 分数
     */
    private void displayAScore(int score) {
        mAScoreText.setText(String.valueOf(score));
    }

    /**
     * 显示B队得分
     *
     * @param score 分数
     */
    private void displayBScore(int score) {
        mBScoreText.setText(String.valueOf(score));
    }
}

5.运行：展示效果

好了，代码全部编写完成的话，我们就可以运行查看效果了。

ps:这里是为了分享笔记提前就把代码写好的，在实际开发过程中建议写一段代码就运行一次看看效果，避免写很多代码在运行时出现问题，而且不易发现问题的原因。

效果图1

效果图2

6.总结：通过这个APP学到了什么

• 布局的编写已经简单控件的使用
• Java中变量的使用
• 在编程不要把所有的代码写到一个方法里
• 弹框的显示考虑用户体验（当然这是产品经理的活）
• 学会了一个APP从零到有的完整实现

好啦，一个篮球计分APP到这里就结束了，欢迎各位学友点评指导。

点击下载篮球计分APP源码