网站收录减少,python云服务器网站开发实例,建设网站设计公司,柳州做网站设计的公司一、使用TableLayout实现计算器UI
1.新建一个空白项目布局 根据自己的需求输入其他信息 填写完成后#xff0c;点击Finish即可
2. 设计UI界面
在res/layout文件夹中的XML文件中创建UI界面。在这个XML文件中#xff0c;您可以使用TableLayout来设计计算器界面。
2.1 创建l…一、使用TableLayout实现计算器UI
1.新建一个空白项目布局 根据自己的需求输入其他信息 填写完成后点击Finish即可
2. 设计UI界面
在res/layout文件夹中的XML文件中创建UI界面。在这个XML文件中您可以使用TableLayout来设计计算器界面。
2.1 创建layout文件夹
但是默认创建出来的项目并不会包含layout布局文件夹因此需要我们自行创建 在res目录内右键单击鼠标然后选择 “New” - “Android Resource Directory” 选项。 在弹出的对话框中将 “Directory name” 设置为 “layout”然后点击 “OK”。 2.2 创建xml文件
在layout目录内右键单击鼠标然后选择 “New” - “Layout Resource File” 选项。 修改一下信息 如果需要直接写XML代码可点击右上角进行Code切换 2.3编写布局代码
?xml version1.0 encodingutf-8?
TableLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:background#D8ECF3!-- 第一行显示计算结果 --TableRowandroid:layout_widthmatch_parentandroid:layout_height90dpTextViewandroid:gravitybottom|rightandroid:textSize70dpandroid:singleLinetrueandroid:layout_margin15dpandroid:layout_widthmatch_parentandroid:layout_height120dpandroid:idid/textView//TableRowTableRowandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_marginTop10dp Buttonandroid:idid/btn_leftandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text(/Buttonandroid:idid/btn_rightandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text)/Buttonandroid:idid/btn_quyuandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text%/Buttonandroid:idid/btn_CEandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:textCE//TableRowTableRowandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_marginTop10dp Buttonandroid:idid/btn_7android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text7/Buttonandroid:idid/btn_8android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text8/Buttonandroid:idid/btn_9android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text9/Buttonandroid:idid/btn_chuandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text÷//TableRowTableRowandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_marginTop10dp Buttonandroid:idid/btn_4android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text4/Buttonandroid:idid/btn_5android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text5/Buttonandroid:idid/btn_6android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text6/Buttonandroid:idid/btn_chengandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text×//TableRowTableRowandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_marginTop10dp Buttonandroid:idid/btn_1android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text1/Buttonandroid:idid/btn_2android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text2/Buttonandroid:idid/btn_3android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text3/Buttonandroid:idid/btn_jianandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text-//TableRowTableRowandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:layout_marginTop10dp Buttonandroid:idid/btn_0android:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text0/Buttonandroid:idid/btn_dianandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text./Buttonandroid:idid/btn_dengyuandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text/Buttonandroid:idid/btn_jiaandroid:layout_marginLeft10dpandroid:gravitycenterandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:textSize25spandroid:text//TableRow/TableLayout可以看到实现了这样的一个效果 第一个 TableRow: android:layout_width 和 android:layout_height 属性设置为 match_parent 和 90dp表示这个 TableRow 的宽度会填满其父容器并且高度为 90dp。 TextView 元素是 TableRow 内的子元素。它有以下属性 android:gravitybottom|right文本在 TextView 中的对齐方式文本在底部和右边对齐。android:textSize70dp文本的字体大小为 70dp。android:singleLinetrue文本只显示在一行内。android:layout_margin15dp设置 TextView 的外边距为 15dp。android:layout_widthmatch_parent 和 android:layout_height120dpTextView 的宽度会填满 TableRow高度为 120dp。android:idid/textView为 TextView 分配一个唯一的标识符。 第二个 TableRow: android:layout_width 和 android:layout_height 属性设置为 match_parent 和 match_parent表示这个 TableRow 的宽度会填满其父容器高度也会填满。 这个 TableRow 包含了四个 Button 元素每个按钮代表不同的操作。 每个按钮的 android:id 属性用于标识按钮。android:layout_marginLeft10dp设置按钮之间的左外边距为 10dp。android:gravitycenter设置按钮内文本的对齐方式为居中。android:layout_width0dp 和 android:layout_weight1这些属性是使用权重来均分 TableRow 中的宽度。每个按钮的宽度都会根据权重平均分配以使它们在 TableRow 中平均分布。android:textSize25sp按钮内文本的字体大小为 25sp。android:text按钮上显示的文本内容。这个布局代码的作用是创建一个包含一个文本框和一组操作按钮的界面可能用于一个简单的计算器或表达式输入界面。
3.应用布局
3.1 打开主文件
打开 Kotlin Activity 文件通常是在 src/main/java/com/yourpackage/YourActivity.kt 中 3.2 修改内容视图
在 Activity 类的 onCreate 方法中通过 setContentView 方法将布局文件设置为 Activity 的内容视图。假设您的布局文件名为 table.xml在 onCreate 方法中添加以下代码
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.table)}
}需要注意以下几个条件 确保替换 table 为您的布局文件的实际名称不包括文件扩展名。这样Android 就会将该布局文件加载到 Activity 中并显示出来。确保您的 table.xml 文件位于 res/layout 目录中。通常它应该是这个目录的子目录下的一个 XML 布局文件。在您的 Kotlin 代码中您可以通过 findViewById 方法来获取布局中的视图元素例如如果要获取布局中的某个按钮可以这样做 实现效果 二、使用GridLayout实现计算器UI
其他实现方式一样对应的布局xml如下
?xml version1.0 encodingutf-8?
GridLayoutxmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:columnCount4android:rowCount6android:padding16dpandroid:layout_gravitycenterandroid:background#D8ECF3TextViewandroid:gravitybottom|rightandroid:textSize70dpandroid:singleLinetrueandroid:layout_margin15dpandroid:layout_widthmatch_parentandroid:layout_height120dpandroid:layout_columnSpan4android:layout_rowSpan2 /Buttonandroid:gravitycenterandroid:layout_heightwrap_contentandroid:text(android:textSize24spandroid:layout_columnSpan1/Buttonandroid:gravitycenterandroid:layout_heightwrap_contentandroid:text)android:textSize24spandroid:layout_columnSpan1/Buttonandroid:gravitycenterandroid:layout_heightwrap_contentandroid:text%android:textSize24spandroid:layout_columnSpan1/Buttonandroid:gravitycenterandroid:layout_heightwrap_contentandroid:layout_weight1android:textCEandroid:textSize24spandroid:layout_columnSpan1/!-- 第三行数字按钮 --Buttonandroid:layout_heightwrap_contentandroid:text7android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text8android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text9android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text÷android:gravitycenterandroid:textSize24sp/!-- 第四行数字按钮 --Buttonandroid:layout_heightwrap_contentandroid:text4android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text5android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text6android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text×android:gravitycenterandroid:textSize24sp/!-- 第五行数字按钮 --Buttonandroid:layout_heightwrap_contentandroid:text1android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text2android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text3android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:text-android:gravitycenterandroid:textSize24sp/!-- 第六行数字按钮、小数点和等号 --Buttonandroid:layout_heightwrap_contentandroid:text0android:gravitycenterandroid:textSize24spandroid:layout_columnSpan1/Buttonandroid:layout_heightwrap_contentandroid:text.android:gravitycenterandroid:textSize24sp/Buttonandroid:layout_heightwrap_contentandroid:textandroid:gravitycenterandroid:textSize24spandroid:layout_columnSpan1/Buttonandroid:layout_heightwrap_contentandroid:textandroid:gravitycenterandroid:textSize24sp//GridLayout
修改成下图即可 实现效果
