《Android应用程序开发》课件-项目六：任务3：启动页面UI编码

智启安卓

匠心筑梦移动应用开发启动页面UI编码目录01进入UI设计的阶段02学习如何为“myapp”编写启动页面的UI编码启动页面UI编码UI设计的阶段应用开发中至关重要的一环提升用户体验增强应用吸引力如何为“myapp”编写启动页面的UI编码启动页面UI编码下载并安装PxCook创建UI标注图的工具Windows安装好AdobeAIR后我们就可以安装PxCook了macOS学习网络编程启动页面UI编码①打开“myapp”项目创建好了一个后缀为.pxcp的标注图文件是PxCook创建的文件格式第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码①打开“myapp”项目创建好了一个后缀为.pxcp的标注图文件是PxCook创建的文件格式第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码①打开“myapp”项目创建好了一个后缀为.pxcp的标注图文件是PxCook创建的文件格式第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码②开始编写启动页的UII，们注意到MainActivity是应用启动的第一个页面，这在AndroidManifest.xml的清单文件中通过Main和LAUNCHER两个属性来指定第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码②开始编写启动页的UII，们注意到MainActivity是应用启动的第一个页面，这在AndroidManifest.xml的清单文件中通过Main和LAUNCHER两个属性来指定第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码③回到MainActivity，我们按住ctrl键，左键点击activity_main，就可以打开MainActivity的布局文件activity_main.xml第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码③回到MainActivity，我们按住ctrl键，左键点击activity_main，就可以打开MainActivity的布局文件activity_main.xml第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码④为了编写UI，我们将布局从ConstraintLayout改为RelativeLayout，以便更灵活地控制布局第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑤图片资源已经放在了res/mipmap-xxxhdpi目录下。我们通过设置android:background="@mipmap/login"来引入背景图片第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑥使用RelativeLayout来包裹这两个按钮，设置其宽度为match_parent，高度为wrap_content根据标注图的尺寸和位置，设置按钮的宽度、高度、文本、字体大小和颜色第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑥使用RelativeLayout来包裹这两个按钮，设置其宽度为match_parent，高度为wrap_content根据标注图的尺寸和位置，设置按钮的宽度、高度、文本、字体大小和颜色第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑥使用RelativeLayout来包裹这两个按钮，设置其宽度为match_parent，高度为wrap_content根据标注图的尺寸和位置，设置按钮的宽度、高度、文本、字体大小和颜色第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑦设计图这里选择这个mdbi，然后我们点击开发，右边就出现标注的数据，我们再点击这个登录按钮，我们就看到这个尺寸长100dp、高40dp。然后我们来写一下登录按钮，长100dp、高50dp，这些数据都可以根据自己的需求来调节第一步第二步第三步第四步第五步第六步第七步第八步学习网络编程⑦设计图这里选择这个mdbi，然后我们点击开发，右边就出现标注的数据，我们再点击这个登录按钮，我们就看到这个尺寸长100dp、高40dp。然后我们来写一下登录按钮，长100dp、高50dp，这些数据都可以根据自己的需求来调节第一步第二步第三步第四步第五步第六步第七步第八步学习网络编程⑦设计图这里选择这个mdbi，然后我们点击开发，右边就出现标注的数据，我们再点击这个登录按钮，我们就看到这个尺寸长100dp、高40dp。然后我们来写一下登录按钮，长100dp、高50dp，这些数据都可以根据自己的需求来调节第一步第二步第三步第四步第五步第六步第七步第八步学习网络编程⑦设计图这里选择这个mdbi，然后我们点击开发，右边就出现标注的数据，我们再点击这个登录按钮，我们就看到这个尺寸长100dp、高40dp。然后我们来写一下登录按钮，长100dp、高50dp，这些数据都可以根据自己的需求来调节第一步第二步第三步第四步第五步第六步第七步第八步学习网络编程⑦设计图这里选择这个mdbi，然后我们点击开发，右边就出现标注的数据，我们再点击这个登录按钮，我们就看到这个尺寸长100dp、高40dp。然后我们来写一下登录按钮，长100dp、高50dp，这些数据都可以根据自己的需求来调节第一步第二步第三步第四步第五步第六步第七步第八步学习网络编程⑧按钮里面有一个文本，点击查看，字号20sp，字体颜色是白色，我们也设置一下，然后我们把登录的文本内容放在strings.xml资源文件中，命名为login，值就是“登录”，通过@string/login引用，这样方便后续的维护和修改。注册按钮也是同理第一步第二步第三步第四步第五步第六步第七步第八步启动页面UI编码⑨设置按钮的位置，通过alignParentStart="true"让登录按钮靠左，alignParentEnd="true"让注册按钮靠右，然后我们看一下。它相对于包裹Relativelayout左右都有一个44db的外间距，所以我们在这个布局里面写一下，paddingRight="44dp"、paddingLeft="44dp"。第九步第十步第十一步第十二步第十三步MyApp本地后端服务配置⑨设置按钮的位置，通过alignParentStart="true"让登录按钮靠左，alignParentEnd="true"让注册按钮靠右，然后我们看一下。它相对于包裹Relativelayout左右都有一个44db的外间距，所以我们在这个布局里面写一下，paddingRight="44dp"、paddingLeft="44dp"。第九步第十步第十一步第十二步第十三步MyApp本地后端服务配置⑩包裹按钮的Relativelayout位于最外层的Relativelayout的底部，且与底部还有90dp的间距，所以通过alignParentBottom="true"、marginBottom="90dp"设置一下第九步第十步第十一步第十二步第十三步MyApp本地后端服务配置⑩包裹按钮的Relativelayout位于最外层的Relativelayout的底部，且与底部还有90dp的间距，所以通过alignParentBottom="true"、marginBottom="90dp"设置一下第九步第十步第十一步第十二步第十三步MyApp本地后端服务配置⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑪按钮需要一个背景，所以我们在drawable资源文件下面创建了一个DrawableResourceFile，命名为shape_login_btn，根元素都选择shape，并添加一个圆角矩形的shape属性，然后把标注图的两行代码拷贝过来，再通过@drawable/shape_login_btn将其设置为按钮的背景MyApp本地后端服务配置第九步第十步第十一步第十二步第十三步⑫修改AndroidManifest.xml中的theme属性为Theme.AppCompat.NoActionBa