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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,095评论 25赞 709
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,625评论 4赞 61
  • 2016年9月24日
    好好地一个周末。早上爬起来去邮寄快递。折腾到中午才完事。路痴的我每次出行只能靠Google map导航。奇...
    Ada秦小念阅读 1,535评论 0赞 0
  • 口述-第三季-4
    在古人看来 好诗一定是描述一幅画面的，比如“青山不老，为雪白头”。山，水，人，景色，不一而足，都是表象，都是知觉。...
    摄影师柳丁阅读 1,693评论 0赞 1

友情链接更多精彩内容