1. 布局文件
1.1 竖屏布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="data"
type="com.example.score.MyViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/textview1"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/textview2"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{String.valueOf(data.getaTeamScore())}"
android:textColor="@color/cf44336"
android:textSize="@dimen/sp_80"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline4"
tools:text="120" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{String.valueOf(data.getbTeamScore())}"
android:textColor="@color/c03A9F4"
android:textSize="@dimen/sp_80"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline4"
tools:ignore="TextContrastCheck"
tools:text="50" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginEnd="10dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(1)}"
android:text="@string/button1"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline6"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline5"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginStart="10dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(1)}"
android:text="@string/button1"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline6"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline5"
tools:ignore="TextContrastCheck" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginEnd="10dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(2)}"
android:text="@string/button2"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline7"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline6"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginStart="10dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(2)}"
android:text="@string/button2"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline7"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline6"
tools:ignore="TextContrastCheck" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginEnd="10dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(3)}"
android:text="@string/button3"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline7"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="@dimen/dp_60"
android:layout_marginStart="10dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(3)}"
android:text="@string/button3"
android:textColor="@color/white"
android:textSize="@dimen/sp_30"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline7"
tools:ignore="TextContrastCheck" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/undoButton"
android:onClick="@{()->data.undo()}"
app:layout_constraintBottom_toTopOf="@+id/guideline9"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline8"
app:srcCompat="@drawable/ic_baseline_undo_24"
tools:ignore="TouchTargetSizeCheck,DuplicateSpeakableTextCheck" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/resetButton"
android:onClick="@{()->data.reset()}"
app:layout_constraintBottom_toTopOf="@+id/guideline9"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline8"
app:srcCompat="@drawable/ic_baseline_loop_24"
tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
1.2 横屏布局文件 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="data"
type="com.example.score.MyViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.15" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.65" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/textview1"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/textview2"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline3" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{String.valueOf(data.getaTeamScore())}"
android:textColor="@color/cf44336"
android:textSize="@dimen/sp_60"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guideline4"
tools:text="120" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{String.valueOf(data.getbTeamScore())}"
android:textColor="@color/c03A9F4"
android:textSize="@dimen/sp_60"
app:layout_constraintBottom_toTopOf="@+id/guideline5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline4"
tools:ignore="TextContrastCheck"
tools:text="50" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginEnd="20dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(1)}"
android:text="@string/button1"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline6"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline5"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginStart="20dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(1)}"
android:text="@string/button1"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline6"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline5"
tools:ignore="TextContrastCheck" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginEnd="20dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(2)}"
android:text="@string/button2"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline7"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline6"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginStart="20dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(2)}"
android:text="@string/button2"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline7"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline6"
tools:ignore="TextContrastCheck" />
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginEnd="20dp"
android:background="@color/cf44336"
android:onClick="@{()->data.aTeamAdd(3)}"
android:text="@string/button3"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline7"
tools:ignore="TextContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="@dimen/dp_35"
android:layout_marginStart="20dp"
android:background="@color/c03A9F4"
android:onClick="@{()->data.bTeamAdd(3)}"
android:text="@string/button3"
android:textColor="@color/white"
android:textSize="@dimen/sp_20"
app:layout_constraintBottom_toTopOf="@+id/guideline8"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline7"
tools:ignore="TextContrastCheck" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.05" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.95" />
<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:contentDescription="@string/undoButton"
android:onClick="@{()->data.undo()}"
app:layout_constraintBottom_toTopOf="@+id/guideline9"
app:layout_constraintEnd_toStartOf="@+id/guideline2"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="@+id/guideline10"
app:layout_constraintTop_toTopOf="@+id/guideline8"
app:srcCompat="@drawable/ic_baseline_undo_24"
tools:ignore="TouchTargetSizeCheck,DuplicateSpeakableTextCheck" />
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:contentDescription="@string/resetButton"
android:onClick="@{()->data.reset()}"
app:layout_constraintBottom_toTopOf="@+id/guideline9"
app:layout_constraintEnd_toStartOf="@+id/guideline11"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintStart_toStartOf="@+id/guideline2"
app:layout_constraintTop_toTopOf="@+id/guideline8"
app:srcCompat="@drawable/ic_baseline_loop_24"
tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
2. 资源文件
2.1 默认 string.xml
<resources>
<string name="app_name">Score</string>
<string name="textview1">Team A</string>
<string name="textview2">Team B</string>
<string name="scoreA">0</string>
<string name="scoreB">0</string>
<string name="button1">+1</string>
<string name="button2">+2</string>
<string name="button3">+3</string>
<string name="undoButton">undo</string>
<string name="resetButton">reset</string>
</resources>
2.2 中文 string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">计分</string>
<string name="resetButton">重置</string>
<string name="undoButton">撤销</string>
<string name="textview1">A 队</string>
<string name="textview2">B 队</string>
</resources>
3. 颜色值 colors.xml
<color name="cf44336">#F44336</color>
<color name="c03A9F4">#03A9F4</color>
4. 像素值
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="sp_20">20sp</dimen>
<dimen name="sp_80">80sp</dimen>
<dimen name="sp_30">30sp</dimen>
<dimen name="sp_50">50sp</dimen>
<dimen name="dp_60">60dp</dimen>
<dimen name="dp_40">40dp</dimen>
<dimen name="sp_60">60sp</dimen>
<dimen name="dp_35">35dp</dimen>
</resources>
5. 模型库中添加配置绑定 dataBinding
buildFeatures {
dataBinding = true
}
6. 创建继承 ViewModel 类
public class MyViewModel extends ViewModel {
private MutableLiveData<Integer> aTeamScore;
private MutableLiveData<Integer> bTeamScore;
private int aBack, bBack;
public MutableLiveData<Integer> getaTeamScore() {
if (aTeamScore == null) {
aTeamScore = new MutableLiveData<>();
aTeamScore.setValue(0);
}
return aTeamScore;
}
public MutableLiveData<Integer> getbTeamScore() {
if (bTeamScore == null) {
bTeamScore = new MutableLiveData<>();
bTeamScore.setValue(0);
}
return bTeamScore;
}
public void aTeamAdd(int p) {
aBack = aTeamScore.getValue();
bBack = bTeamScore.getValue();
aTeamScore.setValue(aTeamScore.getValue() + p);
}
public void bTeamAdd(int p) {
aBack = aTeamScore.getValue();
bBack = bTeamScore.getValue();
bTeamScore.setValue(bTeamScore.getValue() + p);
}
public void reset() {
aBack = aTeamScore.getValue();
bBack = bTeamScore.getValue();
aTeamScore.setValue(0);
bTeamScore.setValue(0);
}
public void undo() {
aTeamScore.setValue(aBack);
bTeamScore.setValue(bBack);
}
}
7. 调用
public class MainActivity extends AppCompatActivity {
MyViewModel myViewModel;
ActivityMainBinding binding;
@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);
}
}
8. 效果图
![](https://img-blog.csdnimg.cn/010fe806aaba46b58a72302f09ad79d6.png)
![](https://img-blog.csdnimg.cn/e5fb2b69a8384a879858c3b10e896a68.png)