阶段小练—篮球比赛计分器

阶段小练—篮球比赛计分器_第1张图片

阶段性回顾

回顾内容:
VieModel Screen Orientation
LiveData Localization
DataBinding Vector Drawable

UI界面

阶段小练—篮球比赛计分器_第2张图片
由上而下解析:

第一行两个textView 控件用于显示队伍 A和队伍B
第二行两个textView控件用于显示两队的比分
中间三行Button控件用于点击增加分数
最后一行为两个矢量图标/图片按钮,左边用于后退一步加分操作,右边将分数初始化为 0:0

界面字体背景优化

为方便调节字体的大小,可以创建需要的资源
阶段小练—篮球比赛计分器_第3张图片
分别创建了三种字体大小不同的资源,分别供应于 队伍名、比分、按钮的字体大小使用

为区别队伍的划分,改变 两队伍比分的字体颜色和背景

字体颜色改变:textColor
背景改变 :background
阶段小练—篮球比赛计分器_第4张图片

调用矢量图形的方法

res -> new -> Vector Asset
阶段小练—篮球比赛计分器_第5张图片
注意:使用矢量图形需要在 Gradle 中声明一句话,用于上下兼容,因为在低于5.0以下不支持矢量图
阶段小练—篮球比赛计分器_第6张图片
解决方法:在Gradle 中加入上图中的话

android.defaultConfig.vectorDrawables.useSupportLibrary = true

阶段小练—篮球比赛计分器_第7张图片
同时,由于一会儿需要用到DataBinding,所以添加

dataBinding{
enabled true
}

最后Sync一下,不出现红色则没有问题

注意点: 调用 imageView或imageButton时,我们需要增加参数:contentDescription
阶段小练—篮球比赛计分器_第8张图片这个参数的意义在于照顾一些生理功能有缺陷的人,如果图片复杂,用户色盲色弱,则这个参数可以供系统读出来,加强用户体验。例如中间几行的按钮读的话,就可以是 加1 加2、、、、

代码部分

MyViewModel

创建一个New Class : MyViewModel
继承于 ViewModel

package com.example.score;

import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class MyViewModel extends ViewModel {
        //继承于ViewModel
    private MutableLiveData<Integer> aTeamScore;  //定义变量 记录队伍的分数
    private  MutableLiveData<Integer> bTeamScore;
    private int aBack,bBack;  //存放前一次的分数
//队伍A
    public MutableLiveData<Integer> getaTeamScore() {
     
        if(aTeamScore == null)  //如果为空,则创建一个,并初始化为0
        {
     
            aTeamScore = new MutableLiveData<>();
            aTeamScore.setValue(0);
        }
        return aTeamScore;
    }
//队伍B
    public MutableLiveData<Integer> getbTeamScore() {
     
        if(bTeamScore == null)
        {
     
            bTeamScore = new MutableLiveData<>();
            bTeamScore.setValue(0);
        }
        return bTeamScore;
    }
//A队伍加分
    public void aTeamAdd(int p) {
     
        aBack = aTeamScore.getValue();
        bBack = bTeamScore.getValue();
        aTeamScore.setValue(aTeamScore.getValue() +p);
    }
//B队伍加分
    public void bTeamAdd(int p){
     
        aBack = bTeamScore.getValue();
        bBack = bTeamScore.getValue();
        bTeamScore.setValue(bTeamScore.getValue()+p);
    }
//reset初始化方法
    public void reset() {
     
        aBack = aTeamScore.getValue();
        bBack = bTeamScore.getValue();
        aTeamScore.setValue(0);
        bTeamScore.setValue(0);
    }
//undo返回上一步方法
    public void undo(){
     
        aTeamScore.setValue(aBack);
        bTeamScore.setValue(bBack);
    }
}

MainActivity

将 MyViewModel 绑定进去
因为我们使用 dataBinding 所以进行如下修改
阶段小练—篮球比赛计分器_第9张图片
添加变量,name = “data”,类为”MyViewModel“

阶段小练—篮球比赛计分器_第10张图片

package com.example.score;

import···;    //多种包的引入,新建项目时自动给出,因此不做解释

public class MainActivity extends AppCompatActivity {
     
    MyViewModel myViewModel;     //绑定MyViewModel
    ActivityMainBinding binding;   //绑定这个类,需要使用dataBinding,在xml文件中进行修改,如上面所描述

  @Override
    protected void onCreate(Bundle savedInstanceState) {
     
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this,R.layout.activity_main);
        myViewModel = new ViewModelProvider(this).get(MyViewModel.class);
        binding.setData(myViewModel);
        binding.setLifecycleOwner(this);
    }
}

再次强调
Providers 已经启用,需要采用新的方法

使用方法:首先,在build.grade中添加依赖(版本可不一样)

implementation’androidx.lifecycle:lifecycle-extensions:2.2.0’

阶段小练—篮球比赛计分器_第11张图片
Sync以下,不出现红色则没有问题
之后,先:导入包 ->

import androidx.lifecycle.ViewModelProvider;

再:

myViewModel = new ViewModelProvider(this).get(MyViewModel.class);

数据绑定

Button按钮的数据绑定

阶段小练—篮球比赛计分器_第12张图片
如图,点击一个button控件,右键 -> Go to XML
添加方法进行数据绑定

android:onClick="@{()->data.aTeamAdd(1)}"

阶段小练—篮球比赛计分器_第13张图片
分别对与队伍A与队伍B加分的数据进行绑定
如上图所示表示对于队伍A 的加一分的数据进行绑定
同理,其他加分项进行相对应的处理

TextView的数据绑定

右键 -> Go to XML
进行如下修改:(函数调用方法)

android:text="@{String.valueOf(data.getaTeamScore())}"

阶段小练—篮球比赛计分器_第14张图片
同理,B队伍 Score TextView数据绑定做相应的处理

Screen Orientation(屏幕旋转)

按钮高度以及字体大小优化

设置横屏状态下的布局
阶段小练—篮球比赛计分器_第15张图片
点击 -> Creat Landscape Variation

阶段小练—篮球比赛计分器_第16张图片
看图我们容易得到,由于我们设置的字体或边框太大,导致横屏状态下,按钮控件之间非常紧密
我们再设置一些资源供横盘状态下使用

按钮高度

将竖屏状态按钮高度改为60sp
阶段小练—篮球比赛计分器_第17张图片
同时设置横屏时的高度
阶段小练—篮球比赛计分器_第18张图片
并将横屏下的按钮高度参数设为此资源

字体大小

阶段小练—篮球比赛计分器_第19张图片
同理,依次配置

Localization(本地化)

进行语言支持,点击 Default -> Edit Translations -> 点击地球图标 ->添加Chinese

阶段小练—篮球比赛计分器_第20张图片
阶段小练—篮球比赛计分器_第21张图片
根据需要进行相应的汉化,如图:
阶段小练—篮球比赛计分器_第22张图片
注意:汉化效果的展示需要将手机换为中文环境

调试运行

竖屏状态:
阶段小练—篮球比赛计分器_第23张图片

横屏状态
阶段小练—篮球比赛计分器_第24张图片
本地化模式
阶段小练—篮球比赛计分器_第25张图片

你可能感兴趣的:(Android,android,java,安卓)