Android练习使用约束布局构建简单计算器效果

书到用时方恨少，事非经过不知难。这篇文章主要讲述Android练习使用约束布局构建简单计算器效果相关的知识，希望能为你提供帮助。
android练习使用约束布局构建简单计算器效果

文章图片

效果如下:

文章图片

技巧:每4个一组排列使用链式 (Chains)
具体步骤:
1.选中一组组件 , 然后右键选择 Chains -> Create Horizontal Chain , 即创建了一个水平方向的 Chains ( 链式约束 )
2.创建链式后,选择上方Align按钮-进行水平方向上对齐
具体如下:

文章图片

【Android练习使用约束布局构建简单计算器效果】原代码如下:

< ?xml version="1.0" encoding="utf-8"?> < androidx.constraintlayout.widget.ConstraintLayout 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" 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="horizontal" app:layout_constraintGuide_end="605dp" /> < androidx.constraintlayout.widget.Guideline android:id="@+id/guideline3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_begin="553dp" /> < Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="50dp" android:text="0" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/guideline3" app:layout_constraintEnd_toStartOf="@+id/button6" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> < Button android:id="@+id/button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="." android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button5" app:layout_constraintEnd_toStartOf="@+id/button7" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button5" app:layout_constraintTop_toTopOf="@+id/button5" /> < Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="%" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button6" app:layout_constraintEnd_toStartOf="@+id/button8" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button6" app:layout_constraintTop_toTopOf="@+id/button6" /> < Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="=" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button7" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button7" app:layout_constraintTop_toTopOf="@+id/button7" /> < Button android:id="@+id/button9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:text="1" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/button5" app:layout_constraintEnd_toStartOf="@+id/button10" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> < Button android:id="@+id/button11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button10" app:layout_constraintEnd_toStartOf="@+id/button12" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button10" app:layout_constraintTop_toTopOf="@+id/button10" app:layout_constraintVertical_bias="0.0" /> < Button android:id="@+id/button12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="+" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button11" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button11" app:layout_constraintTop_toTopOf="@+id/button11" app:layout_constraintVertical_bias="0.0" /> < Button android:id="@+id/button10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button9" app:layout_constraintEnd_toStartOf="@+id/button11" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button9" app:layout_constraintTop_toTopOf="@+id/button9" app:layout_constraintVertical_bias="0.0" /> < Button android:id="@+id/button13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:text="4" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/button9" app:layout_constraintEnd_toStartOf="@+id/button14" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> < Button android:id="@+id/button14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button13" app:layout_constraintEnd_toStartOf="@+id/button15" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button13" app:layout_constraintTop_toTopOf="@+id/button13" /> < Button android:id="@+id/button15" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="6" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button14" app:layout_constraintEnd_toStartOf="@+id/button16" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button14" app:layout_constraintTop_toTopOf="@+id/button14" /> < Button android:id="@+id/button16" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button15" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button15" app:layout_constraintTop_toTopOf="@+id/button15" /> < Button android:id="@+id/button17" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:text="7" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/button13" app:layout_constraintEnd_toStartOf="@+id/button18" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" /> < Button android:id="@+id/button18" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="8" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button17" app:layout_constraintEnd_toStartOf="@+id/button19" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button17" app:layout_constraintTop_toTopOf="@+id/button17" /> < Button android:id="@+id/button19" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="9" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button18" app:layout_constraintEnd_toStartOf="@+id/button20" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button18" app:layout_constraintTop_toTopOf="@+id/button18" /> < Button android:id="@+id/button20" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="*" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button19" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button19" app:layout_constraintTop_toTopOf="@+id/button19" /> < Button android:id="@+id/button21" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="4dp" android:text="AC" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/button17" app:layout_constraintEnd_toStartOf="@+id/button22" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="1.0" /> < Button android:id="@+id/button22" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="DEL" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button21" app:layout_constraintEnd_toStartOf="@+id/button23" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button21" app:layout_constraintTop_toTopOf="@+id/button21" /> < Button android:id="@+id/button23" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="-/+" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button22" app:layout_constraintEnd_toStartOf="@+id/button24" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button22" app:layout_constraintTop_toTopOf="@+id/button22" /> < Button android:id="@+id/button24" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="/" android:textSize="24sp" app:layout_constraintBottom_toBottomOf="@+id/button23" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.5" app:layout_constraintStart_toEndOf="@+id/button23" app:layout_constraintTop_toTopOf="@+id/button23" /> < TextView android:id="@+id/textView" android:layout_width="66dp" android:layout_height="121dp" android:layout_marginTop="67dp" android:layout_marginEnd="16dp" android:text="0." android:textSize="80sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> < /androidx.constraintlayout.widget.ConstraintLayout>