L2課程計分APP實踐筆記
此次活動的舉辦方：Google Study Jams活動官網(wǎng)
Google Developers
L2的實踐課程是實現(xiàn)一個類似球場積分器的APP炼吴。完成這么一個APP，我大致分為以下幾步：
1.需求：計分APP的實現(xiàn)
實現(xiàn)的效果如下圖所示樱蛤，需求是钮呀，有兩個籃球隊，A隊和B對昨凡，在比賽的過程需求為得分的球隊加分爽醋。有3種進(jìn)球加分項，遠(yuǎn)投加3份便脊，近投加2分蚂四，罰球加1分。需要展示各自球隊的總分哪痰，在比賽結(jié)束時可以重置兩隊的分?jǐn)?shù)即分?jǐn)?shù)為0遂赠。
實現(xiàn)的效果圖
2.分析：由哪些控件組成及準(zhǔn)備工作
準(zhǔn)備工作：Android Studio工具，已經(jīng)運行應(yīng)用程序的手機(jī)或者模擬器晌杰。
分析：（來張手?jǐn)]分析圖跷睦，字比較丑多多擔(dān)待哈~）
用到的控件
3.創(chuàng)建項目：開干
好了，有了以上的布局分析和準(zhǔn)備工作乎莉，現(xiàn)在我們就可以動手開干了送讲。
-
首先我們需要創(chuàng)建個新的工作空間奸笤，如圖所示
創(chuàng)建項目
-
- 填寫項目名稱惋啃、包名，選擇項目在本地磁盤的位置（包名通常寫為com.xxxx监右，及公司域名倒著寫）
填寫項目名边灭，包名
- 選擇sdk的兼容版本，這個一般默認(rèn)即可健盒，目前市場上4.0.3以上的手機(jī)占97.4%以上绒瘦，所以我們最小兼容到4.0.3的版本即可，點擊Next
設(shè)置SDK版本
- 這一步的話扣癣，Studio給我們提供了好多種模板惰帽，這里我們只需要選擇EmptyActivity，也就是空白的頁面即可父虑，點擊Next
選擇頁面模板
- 為我們的主頁面命名该酗，一般默認(rèn)為MainActivity，點擊Next
為主頁面命名
- 這樣項目就創(chuàng)建好啦士嚎，這時候可以運行一下看看效果了
項目創(chuàng)建效果
創(chuàng)建完項目效果圖
4.設(shè)計：按照效果圖和分析編寫XML文件布局
編寫XML大概的預(yù)覽布局就是這樣：
Xml布局預(yù)覽
附上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分遠(yuǎn)投"/>
<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分遠(yuǎn)投"/>
<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.實現(xiàn)：編寫Java代碼實現(xiàn)邏輯
附上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; //顯示兩隊分?jǐn)?shù)
private Button mAAddThreeBtn, mAAddTwoBtn, mAAddOneBtn; //A對加分按鈕
private Button mBAddThreeBtn, mBAddTwoBtn, mBAddOneBtn; //B對加分按鈕
private Button mResetBtn;
private int mAScore, mBScore; //記錄兩隊的分?jǐn)?shù)
@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);
}
/**
* 實現(xiàn)按鈕點擊回調(diào)
*
* @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 要加的分?jǐn)?shù)
*/
private void aAddScore(int score) {
mAScore = mAScore + score;
displayAScore(mAScore);
}
/**
* A隊加分
*
* @param score 要加的分?jǐn)?shù)
*/
private void bAddScore(int score) {
mBScore = mBScore + score;
displayBScore(mBScore);
}
/**
* 顯示清空得分的彈框
*/
private void showResetDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this)
.setTitle("提示")
.setMessage("確認(rèn)要清空兩隊的得分嗎呜魄？")
.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();
}
/**
* 重置兩隊分?jǐn)?shù)
*/
private void resetScore() {
mAScore = 0;
mBScore = 0;
displayAScore(mAScore);
displayBScore(mBScore);
}
/**
* 顯示A隊得分
*
* @param score 分?jǐn)?shù)
*/
private void displayAScore(int score) {
mAScoreText.setText(String.valueOf(score));
}
/**
* 顯示B隊得分
*
* @param score 分?jǐn)?shù)
*/
private void displayBScore(int score) {
mBScoreText.setText(String.valueOf(score));
}
}
5.運行：展示效果
好了，代碼全部編寫完成的話莱衩，我們就可以運行查看效果了爵嗅。
ps:這里是為了分享筆記提前就把代碼寫好的，在實際開發(fā)過程中建議寫一段代碼就運行一次看看效果笨蚁，避免寫很多代碼在運行時出現(xiàn)問題睹晒，而且不易發(fā)現(xiàn)問題的原因趟庄。
效果圖1
效果圖2
6.總結(jié)：通過這個APP學(xué)到了什么
- 布局的編寫已經(jīng)簡單控件的使用
- Java中變量的使用
- 在編程不要把所有的代碼寫到一個方法里
- 彈框的顯示考慮用戶體驗（當(dāng)然這是產(chǎn)品經(jīng)理的活）
- 學(xué)會了一個APP從零到有的完整實現(xiàn)
好啦，一個籃球計分APP到這里就結(jié)束了伪很，歡迎各位學(xué)友點評指導(dǎo)岔激。
