2C. 篮球记分 App 应用

前言

该篇笔记是我学习 L2-2c 课程后的笔记，此次课程学习完成实现了一个类似篮球计分 APP 项目的开发，现在我们一起来做吧！

1.变量的意义

在开发之前，我们先来了解一下什么是变量与作用域？

变量：用于表达在程序中可能被改变的值，分为全局变量和局部变量。

全局变量也叫成员变量，是指在类中定义的变量；它在整个类中都有效，比如下面示例中 name、age 两个变量就是全局变量。
局部变量是在方法内部声明，并且只能在方法内部使用，比如小面的 height、weight 就是局部变量。


public class Student {
    //name，age 为全局变量
    String name;
    int age;

    public static void main(String[] age) {
        //height，weight 为局部变量
        int height;
        int weight;
    }
}

2.APP UI 布局的开发

一言不合先上图

basketball.png

在以前的课程中我们知道，创建一个布局需要 3 步：

第一步：选择 View

从上图可得到 UI 界面中有 TextView、Button、View 3 种类型控件，所以我们就选择这 3 种控件类型。

第二步：摆放 View：

这次我选择的是线性布局（LinearLayout）做为 ViewGroup ，你也可以选择其他布局，下面是代码：

<?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:orientation="horizontal"
        android:layout_weight="1">


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="湖人"
                android:textSize="20sp"/>

            <TextView
                android:id="@+id/team_a_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="0"
                android:textColor="#000000"
                android:textSize="64sp"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="24dp"
                android:onClick="addThreeForTeamA"
                android:text="3分远射"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:onClick="addTwoForTeamA"
                android:text="2分中投"/>

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:onClick="addOneForTeamA"
                android:text="1分罚球"/>
        </LinearLayout>

        <View
            android:layout_width="1px"
            android:layout_height="match_parent"
            android:background="#000"
            android:layout_marginTop="16dp"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="凯尔特人"
                android:textSize="20sp"/>

            <TextView
                android:id="@+id/team_b_score"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="0"
                android:textColor="#000000"
                android:textSize="64sp"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="24dp"
                android:onClick="addThreeForTeamB"
                android:text="3分远射"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:onClick="addTwoForTeamB"
                android:text="2分中投"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:layout_marginRight="24dp"
                android:layout_marginTop="8dp"
                android:onClick="addOneForTeamB"
                android:text="1分罚球"/>
        </LinearLayout>
    </LinearLayout>


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="32dp"
        android:layout_marginTop="100dp"
        android:text="清零"
        android:onClick="reset"/>

</LinearLayout>

第三步：修改 View 的样式
按照课程所提示的样式如下所示：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#FF9800</item>
        <!-- Background color of buttons in the app -->
        <item name="colorButtonNormal">#FF9800</item>
    </style>

</resources>

3. MainActivity 中功能逻辑实现

由于在开始我们就学习了变量的知识，到了功能逻辑这里就简单多了，代码如下：

package com.vole.basketball;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView tvTeamAScore, tvTeamBScore;
    private int aScore, bScore;

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

    private void initView() {
        tvTeamAScore = (TextView) findViewById(R.id.team_a_score);
        tvTeamBScore = (TextView) findViewById(R.id.team_b_score);
    }

    public void addThreeForTeamA(View view) {
        aScore += 3;
        aDisplayScore(aScore);
    }

    public void addTwoForTeamA(View view) {
        aScore += 2;
        aDisplayScore(aScore);
    }

    public void addOneForTeamA(View view) {
        aScore += 1;
        aDisplayScore(aScore);
    }

    public void addThreeForTeamB(View view) {
        bScore += 3;
        bDisplayScore(bScore);
    }

    public void addTwoForTeamB(View view) {
        bScore += 2;
        bDisplayScore(bScore);
    }

    public void addOneForTeamB(View view) {
        bScore += 1;
        bDisplayScore(bScore);
    }

    public void reset(View view) {
        aScore = 0;
        bScore = 0;
        aDisplayScore(aScore);
        bDisplayScore(bScore);
    }

    private void aDisplayScore(int aScore) {
        tvTeamAScore.setText(String.valueOf(aScore));
    }

    private void bDisplayScore(int bScore) {
        tvTeamBScore.setText(String.valueOf(bScore));
    }
}

到此为止篮球记分 App 应用开发完成，效果如下：

android.gif

最后在这里推荐另一种实现方法的文章,很强大：
「自定义控件」篮球记分器 App 笔记分享

2C. 篮球记分 App 应用

前言

1.变量的意义

2.APP UI 布局的开发

3. MainActivity 中功能逻辑实现

推荐阅读更多精彩内容