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.创建项目：开干

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

- 首先我们需要创建个新的工作空间，如图所示
  
  创建项目
- 填写项目名称、包名，选择项目在本地磁盘的位置（包名通常写为com.xxxx，及公司域名倒着写）

填写项目名，包名

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

设置SDK版本

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

选择页面模板

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

为主页面命名

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

项目创建效果

创建完项目效果图

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

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

Xml布局预览

附上Xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="0dp"
                  android:layout_weight="1"
                  android:orientation="horizontal"
                  android:paddingTop="20dp">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">
            <TextView android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginBottom="10dp"
                      android:text="A队得分："
                      android:textColor="#000000"
                      android:textSize="16sp"/>
            <TextView
                android:id="@+id/aScoreText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0"
                android:textColor="#FF0000"
                android:textSize="30sp"/>
            <Button
                android:id="@+id/aAddThreeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="3分远投"/>
            <Button
                android:id="@+id/aAddTwoBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2分近投"/>
            <Button
                android:id="@+id/aAddOneBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1分罚球"/>
        </LinearLayout>
        <View android:layout_width="1px"
              android:layout_height="match_parent"
              android:background="#D5D5D5"/>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:orientation="vertical">
            <TextView android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:layout_marginBottom="10dp"
                      android:text="B队得分："
                      android:textColor="#000000"
                      android:textSize="16sp"/>
            <TextView
                android:id="@+id/bScoreText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="0"
                android:textColor="#0000FF"
                android:textSize="30sp"/>
            <Button
                android:id="@+id/bAddThreeBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="3分远投"/>
            <Button
                android:id="@+id/bAddTwoBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2分近投"/>
            <Button
                android:id="@+id/bAddOneBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1分罚球"/>
        </LinearLayout>
    </LinearLayout>
    <Button
        android:id="@+id/resetBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="20dp"
        android:text="重置"/>
</LinearLayout>

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源码