一、创建新项目Calculator
二、创建表格中每行的样式
在res/values/styles.xml中创建名为rowStyle的样式。(注意:如果在res/values/中未找到styles.xml,可如下图直接创建一个,styles.xml代码如下)
<style name="rowStyle">
<item name="android:layout_weight">1</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
</style>
三、创建表格中按钮的样式
在上面res/values/styles.xml中添加即可
<style name="btnStyle">
<item name="android:layout_height">match_parent</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:textSize">20sp</item>
</style>
四、放置界面控件
-
<TableLayout>
:这是布局的根元素,用于创建一个表格,其子元素(即<TableRow>
)将作为表格的行。android:layout_width
和android:layout_height
都设置为match_parent
,意味着这个表格将填充其父容器的整个宽度和高度。android:stretchColumns="*"
指示所有列都应该平均分配额外的空间(如果有的话)。 -
<TableRow>
:这些是<TableLayout>
的子元素,代表表格中的行。每行都通过style="@style/rowStyle"
应用了一个样式,这个样式在代码中未定义,但可以假设它包含了一些通用的行样式属性(如内边距、背景色等)。此外,第一行(tr_one
)还通过android:layout_marginTop="200dp"
设置了顶部的外边距,这可能会将这一行相对于其父容器顶部推开200dp的距离。 -
<Button>
:这些是<TableRow>
的子元素,代表表格中的按钮。每个按钮都通过style="@style/btnStyle"
应用了一个样式,这个样式同样在代码中未定义,但可以假设它包含了一些通用的按钮样式属性(如大小、内边距、文字颜色等)。每个按钮还通过android:text
属性设置了显示的文本,这些文本对应于计算器上常见的按钮标签(如数字、运算符等)。注意,第一行中的某些按钮使用了非标准字符(如←
、_
等),这可能意味着这些按钮在应用程序中有特殊的用途或功能。 -
android:layout_span
:在最后一行中,两个按钮(0
和=
)都使用了android:layout_span="2"
属性。这个属性指定了该按钮应该横跨的列数。由于这个表格默认有四列,android:layout_span="2"
意味着这些按钮将横跨两列,使得它们看起来比其他按钮更宽。这通常用于创建较大的按钮或布局上的特殊元素。
定义了一个简单的表格布局,包含五行和四列按钮,这些按钮可能被用于一个计算器的用户界面。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow
android:id="@+id/tr_one"
style="@style/rowStyle"
android:layout_marginTop="200dp">
<Button
style="@style/btnStyle"
android:text="c"/>
<Button
style="@style/btnStyle"
android:text="←"/>
<Button
style="@style/btnStyle"
android:text="+"/>
<Button
style="@style/btnStyle"
android:text="_"/></TableRow>
<TableRow
android:id="@+id/tr_two"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="7"/>
<Button
style="@style/btnStyle"
android:text="8"/>
<Button
style="@style/btnStyle"
android:text="g"/>
<Button
style="@style/btnStyle"
android:text="x"/>
</TableRow>
<TableRow
android:id="@+id/tr_three"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="6"/>
<Button
style="@style/btnStyle"
android:text="5"/>
<Button
style="@style/btnStyle"
android:text="4"/>
<Button
style="@style/btnStyle"
android:text="/"/>
</TableRow>
<TableRow
android:id="@+id/tr_four"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="1"/>
<Button
style="@style/btnStyle"
android:text="2"/>
<Button
style="@style/btnStyle"
android:text="3"/>
<Button
style="@style/btnStyle"
android:text="."/>
</TableRow>
<TableRow
android:id="@+id/tr_five"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:layout_span="2"
android:text="0"/>
<Button
style="@style/btnStyle"
android:layout_span="2"
android:text="="/>
</TableRow>
</TableLayout>
五、MainActivity代码
package com.example.calculator;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
六、运行效果界面图