SJ127 篮球积分器

这周一次来了两个课程,很激动啊,其实是累得tu啊。

主题 court counter

一. 目标

目标 篮球计分器
- 类似双栏的布局(两路linearl layout)(layout嵌套)
- 学习view style属性:gravity
- 界面优化技巧
- 一种功能对应一种颜色
- 温习变量作用域
- 全局变量记录比分
- 涉及篮球比赛规则
- 重置比分

二. 本轮 new concept

问题引出

  • 除了整个布局的四个角(详细是buttom/top和left/right组合),还能不能在一个子视图里面移动(居中,靠左,靠右)。。。

solution

layout_gravity: 定位一个子视图应该在父视图的哪一块。
https://developer.android.com/intl/zh-cn/reference/android/widget/LinearLayout.LayoutParams.html#attr_android:layout_gravity

gravity: 定位内容应在对象的哪一块。
https://developer.android.com/intl/zh-cn/reference/android/widget/LinearLayout.html#attr_android:gravity

三 界面设计截图

代码过程

java代码

package com.example.android.courtcounter;

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

/** * This activity keeps track of the basketball score for 2 teams. */
public class MainActivity extends AppCompatActivity {

    // Tracks the score for Team A
    int scoreTeamA = 0;

    // Tracks the score for Team B
    int scoreTeamB = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String jamesbond = "hi";
        String jamesBond = "hello";
        String s = jamesBond + jamesbond;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimpSlifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /** * Increase the score for Team A by 1 point. */
    public void addOneForTeamA(View v) {
        scoreTeamA = scoreTeamA + 1;
        displayForTeamA(scoreTeamA);
    }

    /** * Increase the score for Team A by 2 points. */
    public void addTwoForTeamA(View v) {
        scoreTeamA = scoreTeamA + 2;
        displayForTeamA(scoreTeamA);
    }

    /** * Increase the score for Team A by 3 points. */
    public void addThreeForTeamA(View v) {
        scoreTeamA = scoreTeamA + 3;
        displayForTeamA(scoreTeamA);
    }

    /** * Increase the score for Team B by 1 point. */
    public void addOneForTeamB(View v) {
        scoreTeamB = scoreTeamB + 1;
        displayForTeamB(scoreTeamB);
    }

    /** * Increase the score for Team B by 2 points. */
    public void addTwoForTeamB(View v) {
        scoreTeamB = scoreTeamB + 2;
        displayForTeamB(scoreTeamB);
    }

    /** * Increase the score for Team B by 3 points. */
    public void addThreeForTeamB(View v) {
        scoreTeamB = scoreTeamB + 3;
        displayForTeamB(scoreTeamB);
    }

    /** * Resets the score for both teams back to 0. */
    public void resetScore(View v) {
        scoreTeamA = 0;
        scoreTeamB = 0;
        displayForTeamA(scoreTeamA);
        displayForTeamB(scoreTeamB);
    }

    /** * Displays the given score for Team A. */
    public void displayForTeamA(int score) {
        TextView scoreView = (TextView) findViewById(R.id.team_a_score);
        scoreView.setText(String.valueOf(score));
    }

    /** * Displays the given score for Team B. */
    public void displayForTeamB(int score) {
        TextView scoreView = (TextView) findViewById(R.id.team_b_score);
        scoreView.setText(String.valueOf(score));
    }
}

layout

再额外的布局上,我加上了图片,自己添加了drawable文件夹

<?xml version="1.0" encoding="utf-8"?>

<!-- Layout for the basketball score counter. -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">

    <LinearLayout  android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal">

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

            <ImageView  android:layout_width="120dp" android:layout_height="120dp" android:gravity="center" android:src="@drawable/i1" android:layout_gravity="center_horizontal" />

            <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="sans-serif-medium" android:gravity="center" android:padding="16dp" android:text="Team A" android:textColor="#616161" android:textSize="14sp" />

            <TextView  android:id="@+id/team_a_score" android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="sans-serif-light" android:gravity="center" android:paddingBottom="24dp" android:text="0" android:textColor="#000000" android:textSize="56sp" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="24dp" android:layout_marginRight="24dp" android:onClick="addThreeForTeamA" android:text="+3 Points" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="24dp" android:layout_marginRight="24dp" android:onClick="addTwoForTeamA" android:text="+2 Points" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="24dp" android:layout_marginRight="24dp" android:onClick="addOneForTeamA" android:text="Free throw" />
        </LinearLayout>

        <View  android:layout_width="1dp" android:layout_height="match_parent" android:layout_marginTop="16dp" android:background="@android:color/darker_gray" />

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

            <ImageView  android:layout_width="120dp" android:layout_height="120dp" android:gravity="center" android:src="@drawable/i3" android:layout_gravity="center_horizontal" />

            <TextView  android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="sans-serif-medium" android:gravity="center" android:padding="16dp" android:text="Team B" android:textColor="#616161" android:textSize="14sp" />

            <TextView  android:id="@+id/team_b_score" android:layout_width="match_parent" android:layout_height="wrap_content" android:fontFamily="sans-serif-light" android:gravity="center" android:paddingBottom="24dp" android:text="0" android:textColor="#000000" android:textSize="56sp" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="24dp" android:layout_marginRight="24dp" android:onClick="addThreeForTeamB" android:text="+3 Points" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="22dp" android:layout_marginRight="22dp" android:onClick="addTwoForTeamB" android:text="+2 Points" />

            <Button  android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginLeft="22dp" android:layout_marginRight="22dp" android:onClick="addOneForTeamB" android:text="Free throw" />
        </LinearLayout>
    </LinearLayout>

    <Button  android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="32dp" android:onClick="resetScore" android:text="Reset" />
</RelativeLayout>

四. tips

  • 先写Java的方法,后写XML,可以自动提示
  • 第一次见到两个竖直并列的linear layout
  • 升级AS后,styles.xml要注意以下细节往Theme之前加Base(如果Theme没有),不然会报The following classes could not be instantiated
    android.support.v7.internal.widget.ActionBarOverlayLayout
<style name="AppTheme" parent="Base.Theme.AppCompat.Light">

五.后话

这是第一次在真机note 2上录制,
首先录制后是横屏的,
其次adb shell screencapture 在我的android 4.3上命令不能用
android studio也不支持录制。
一共耗了3个小时找了各种工具搞定,要有一个好的demo不容易啊!

代码时间一半
录屏时间大半。。。

六.参考

bug: The following classes could not be instantiated

mp4转gif
感谢 昵图网图标

旋转 屏幕 MP4

git on udacity

more filp and mirror

你可能感兴趣的:(SJ127 篮球积分器)