Android选择题界面的设计——线性布局实操

目录

任务目标

使用TextView、Button、CheckBox等实现一个选择题界面,界面如图1所示。

图1 选择题界面效果图

任务分析

上述界面可以分解为上下两部分,上面部分可以使用横向的线性布局来完成,下面部分可以使用纵向的线性布局来完成,如图2所示。

图2 选择题界面分解

任务实施

1.新建工程

新建工程一个名为Quiz的应用程序,选择"Empty Views Activity",指定包名为cn.edu.jssvc.quiz。

2.定义字符串

打开res/values/string.xml,定义本工程界面上需要用到的字符串,如图3所示,代码如下。

xml 复制代码
<resources>
    <string name="app_name">Quiz</string>
    <string name="quizType">多选题</string>
    <string name="stem">你喜欢的课程有</string>
    <string name="optionA">Android</string>
    <string name="optionB">Java</string>
    <string name="optionC">C语言</string>
    <string name="optionD">Python</string>
    <string name="next">下一题</string>
</resources>

图3 res/values/string.xml

3.设计界面

1)使用线性布局设计界面,打开activity_mail.xml,切换为Code视图,将Code中的约束布局(ConstraintLayout)改为线性布局(LinearLayout),添加线性布局的orientation属性,将其值设为"vertical",并将其中的控件删除,修改完成后如图4所示。

图4 修改布局方式

2)切换回Design视图,将Palette区的一个LinearLayout(horizontal)和一个LinearLayout(vertical)用鼠标拖到Component Tree区,注意层次关系。将上述两个LinearLayout的android:layout_height属性值修改为wrap_content。

图5 添加线性布局

3)将TextView、Button控件拖到LinearLayout(horizontal),将4个CheckBox拖到LinearLayout(vertical)中,拖动的时候注意Component的层次结构,完成后界面如图6所示。

图6 添加线性布局

4)修改上述TextView、Button、CheckBox控件的text属性值,将其指向string.xml中的值,例如将TextView控件的值设为@string/stem,则该TextView即显示string.xml中stem的值,即"你喜欢的课程有",如图7所示。

图7 设置text属性

5)接下来美化界面,调整各控件的textSize为20sp,调整父线性布局的padding为10dp,LinearLayout(vertical)的padding为5dp,调整完后运行应用,运行效果如图8所示。

图8 运行效果图

节选自《Android应用开发项目式教程》(机械工业出版社)

源代码请查看:

source/v1.0/Project2Layout/Quiz
Gitee

手把手视频请查看:

Android选择题界面的设计------线性布局实操

相关推荐
千里马学框架2 天前
一起学 Android 14:ShellTransition 屏幕旋转过程深度剖析
android·智能手机·性能优化·framework·性能·屏幕旋转·rotation
美狐美颜SDK开放平台2 天前
开发直播APP时如何接入视频美颜SDK?开发流程与注意事项
android·人工智能·计算机视觉·音视频·直播美颜sdk
AFinalStone2 天前
Android7 SystemUI源码解析(七)Keyguard锁屏模块深度解析
android·systemui
致远ccc2 天前
Google Play 上架前如何测试 App?多国家 Android 环境测试
android·app测试·googleplay·多国家应用测试
ttyyttemo2 天前
Kotlin 协程中的 Job 结构化并发与取消
android
sun0077002 天前
tbox 4g/5g切换,导致wan ip 改变,导致车机旧网络不可用。需要重启车机才行
android
其实防守也摸鱼2 天前
内网穿透与反向代理:原理、工具与实战指南
android·大数据·运维·安全·网络安全·自动化·渗透
AFinalStone3 天前
Android7 SystemUI 源码解析(四)NavigationBar 导航栏与 SystemBars
android·systemui
JMchen3 天前
属性动画原理与高级动画实现
android·kotlin·canvas
AFinalStone3 天前
Android7 SystemUI 源码解析(二)启动流程深度解析
android·systemui