Android个性名片界面的设计——约束布局的应用

节选自《Android应用开发项目式教程》，机械工业出版社，2024年7月出版
做最简单的安卓入门教程，手把手视频、代码、答疑全配齐

【任务目标】
使用约束布局、TextView控件实现一个个性名片界面的设计，界面如图1所示。

图1 个性名片界面图
【任务分析】
上述界面可以使用约束布局、线性布局、表格布局来实现，使用约束布局实现较为灵活方便，这里可以采用约束布局中的辅助线，将界面分解为10个区域，再对每个区域中的TextView控件设置约束。
信息安全和隐私保护是每个人都应该关注的重要问题。我们应该加强自我保护意识。不要轻易上传个人信息，尤其是在陌生的平台或网站。此外，我们还应该注意分享信息时的安全问题。本项目开发的个性名片要注意保护个人隐私，不要轻易上传个人信息或分享给陌生人。总之，保护自己的信息安全和隐私是一项长期而艰巨的任务。我们需要时刻保持警惕，采取必要的措施来保护自己的隐私和信息安全。
【任务实施】
1.新建工程项目CallingCard（参考项目1）
2.修改页面布局文件activity_main.xml
1）默认打开的activity_main.xml，如图所示。首先选中“Hello World!”TextView控件，单击Delete键将其删掉。
2）将Plalette区的TextView控件拖到设计预览区，连续拖8个TextView到该区域。

图2 个性名片步骤2

3）选中一个TextView控件，单击侧边栏的Attributes，打开Attributes窗口，将被选中控件的text属性值修改为“姓名”，其他TextView控件依此类推。

图3 修改text属性
4）选中界面中所有的TextView控件，单击Attributes窗口的搜索框，搜索“text”属性，整体修改TextView控件的字体大小为20sp，颜色为#3F51B5，修改完后，界面如图4所示。

图4 修改textSize和textColor属性
5）添加4根横向辅助线，1根纵向辅助线，横向辅助线位置分别为界面垂直方向的15%、30%、45%、60%处，纵向辅助线为界面水平方向的35%，将整个界面分成10个区域，如图5所示。

图5 添加水平辅助线

6）接着添加TextView控件的位置约束，将其分布在界面上方的8个区域中心，如图所示。首先确定姓名TextView控件的位置，如图6所示。其他TextView控件的位置可以使用相同的方法确定约束，也可以使用对齐工具 中的 来确定位置。

图6 添加控件约束
7）所有TextView控件的位置约束添加完成后，如图7所示。

图7 约束完成图

8）运行此App，如无错误则完成此项目。如有错误，可以查看所有控件位置是否完全确定，如果不完全确定，Component Tree区会出现错误提示，如图8所示。

图8 约束布局错误提示
编译运行应用，效果如图9所示。

图9 个性名片运行效果图

2.4.1Android安卓开发之个性名片界面的设计约束布局实操ConstraintLayout

更多内容见《Android应用开发项目式教程》，做最简单的安卓入门教程，手把手视频、代码、答疑全配齐