Android官方开发文档Training系列课程中文版:构建第一款安卓应用之创建用户界面

简介: 原文地址:http://android.xsoftlab.net/training/basics/firstapp/building-ui.html在这节课中,你会创建一个xml的布局文件,它包含一个Text成员和一个Button成员。

原文地址:http://android.xsoftlab.net/training/basics/firstapp/building-ui.html

在这节课中,你会创建一个xml的布局文件,它包含一个Text成员和一个Button成员。在下节课中,你会学习到当Button按下后启动并发送Text成员的内容到另一个Activity中。

安卓应用的灵活用户界面是建立在View和ViewGroup的层级基础之上。View是比如Button或者TextView这种通用的UI控件,ViewGroup是一种不可见的布局容器,它定义了子View该如何被放置,比如放置在Grid或者垂直的列表中。

布局都是ViewGroup的子类,在这个练习中,我们使用LinearLayout做演示。

创建一个线性布局

  1. 在AS中,打开res/layout目录下的activity_my.xml文件。
    当你在创建这个工程的时候你选择了一个空白的Activity模板,这个工程包含一个activity_my.xml文件,文件中有一个RelativeLayout根View和一个TextView子View。
  2. 在Preview模块下,点击隐藏按钮这里写图片描述来关闭预览模板。
  3. 删除< TextView >元素。
  4. 更改< RelayoutLayout >元素为< LinearLayout >.
  5. 添加 android:orientation 属性然后设置值为”horizontal”;
  6. 移除android:padding属性和tools:context属性。
    res/layout/activity_my.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout是一个ViewGroup,它是ViewGroup的子类,它可以通过属性android:orientation布置子View为垂直排列或者水平排列。每一个LinearLayout的子View都会按照在XML文件中的顺序方式显示在屏幕上。

有两个属性:android:layout_width 和 android:layout_height,对于所有的View的尺寸来说是必须的。

因为LinearLayout是布局的根目录,它应该会填充屏幕的整块区域,因为在宽和高的属性中设置了”match_parent”,这个值表明了这个View应该扩展它的宽或者高到父View的高宽。

添加一个Text属性

正如每一个View对象一样,你必须在XML文件中声明EditText对象的属性。
1. 在activity_my.xml文件的< LinearLayout >的元素中,定义一个< EditText >的元素,并且设置它的id属性为@+id/edit_message。
2. 设置layout_width和layout_height属性为wrap_content。
3. 定义hint属性为一个名称为edit_message的字符串。
< EditText >元素应该是这样的:
res/layout/activity_my.xml

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

以下是你添加的< EditText >的属性介绍:
android:id

  • 这个提供了View的唯一标识符,你可以从应用代码中使用这个对象的引用,比如用来读取并且操作这个对象。
  • 符号@在xml中引用任何资源对象的时候是必须的。紧接着后面跟的是资源的类型,在这里是id,再最后是资源的名称,这里是edit_message。
  • 在资源类型前的符号+是指当你第一次要指定一个资源ID。当你编译APP的时候,SDK工具会使用这个ID的名称在工程的gen/R.java文件中创建一个新的资源ID的引用,这个引用表示的就是XML中的EditText对象。如果使用这种方式声明了ID,那么在后面就不需要再使用+,其它地方引用的时候也不需要+。

android:layout_width 和 android:layout_height

  • 用来指定高宽的尺寸,”wrap_content”是指View应该根据它内容的多少来指定它的大小。如果你想使用 “match_parent”,那么EditText元素将会填充整个屏幕,因为它会扩展到父布局LinearLayout的大小。

android:hint

  • 这个属性用来在Text中内容为空的时候展示,为了不使用硬编码的字符串,这里使用了@string/edit_message的值引用另一个文件中的一个字符串资源。这里不需要使用+标志,然而,因为你还没有指定一个字符串资源,你将会在编译的时候看到错误,你将会在下面定义了字符串资源后修复这个错误。

Note: 这里的字符串资源命名和EditText元素的名称一样,但是,它们属于不同的资源类型,一个是string,一个是id,所以使用相同的名称并无大碍。

添加一个字符串资源

默认情况下,在工程的res/values/下的strings.xml文件便是字符串资源文件了。这里,你将会添加一个名为”edit_message”的字符串然后设置其值为”Enter a message.”
1. 在AS中,在res/values目录下打开string.xml
2. 添加一行名为”edit_message”值为”Enter a message.”的字符串资源
3. 添加一行名为”button_send”值为“Send”的字符串资源。
4. 移除”hello world”那一行。
那么strings.xml应该就是这样的:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

在用户界面上的文字,总是要指定每一个资源。字符串资源允许你管理所有的UI文字,它可以使你更轻松的找到和更新文字。外部化存储的字符串资源允许你去简单定义不同的语言版本app

添加一个按钮

  1. 在AS中,打开res/layout下的activity_my.xml文件。
  2. 在< LinearLayout >标签中,< EditText > 元素后面定义一个< Button >.
  3. 设置按钮的高宽为”wrap_content”,所以按钮的高宽就是根据内容的大小来定义的。
  4. 使用android:text属性定义按钮的文本,设置其值为刚刚在string.xml中定义的button_send的字符串资源

你的< LinearLayout >应该看起来像这样:
res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
      <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
      <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

Note: 这里不需要给Button指定android:id属性,因为这里不需要在Activity代码中使用Button的引用。

现在这个布局文件显示的应该是这个样子:
这里写图片描述
这下按钮就可以工作了,但是和text不同,text稍后会被用户输入一些东西,它便会很好的填充屏幕上没有使用的空间。你可以使用LinearLayout的权重属性做到这一点,可以使用android:layout_weight来指定权重。

如果所有的weight值都是0,那么如果你在其中一个View中指定任何比0大的值,那么这个View将会把剩下的空余空间全部占满。

使输入框填充屏幕的宽度

如果需要使EditText占据屏幕上的剩余空间,那么只需要做到以下几点:
1. 在EditText的属性中添加layout_weight,并设置值为1。
2. 另外,EditText的layout_width属性可以设置为0dp:

<EditText
    android:layout_weight="1"
    android:layout_width="0dp"
    ... />

3 . 当指定了权重会影响布局效果,应该把EditText的宽设置为0,因为使用了wrap_content的话会要求系统计算一次不必要的宽度,因为权重会要求系统进行重新计算并使用剩余的宽度。
以下就是使用了权重的效果:
这里写图片描述
以下是修改好的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

运行APP

在AS中点击toolbar上的Run按钮这里写图片描述

如果要使用命令行,切换路径到工程下,然后执行:

ant debug
adb install bin/MyFirstApp-debug.apk

下一节会学习如何响应button的点击事件,读取EditText的内容,然后启动另一个Activity。

目录
相关文章
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
173 3
|
2月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
77 19
|
2月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
92 14
|
2月前
|
搜索推荐 前端开发 测试技术
打造个性化安卓应用:从设计到开发的全面指南
在这个数字时代,拥有一个定制的移动应用不仅是一种趋势,更是个人或企业品牌的重要延伸。本文将引导你通过一系列简单易懂的步骤,从构思你的应用理念开始,直至实现一个功能齐全的安卓应用。无论你是编程新手还是希望拓展技能的开发者,这篇文章都将为你提供必要的工具和知识,帮助你将创意转化为现实。
|
2月前
|
Java Android开发 开发者
探索安卓开发:构建你的第一个“Hello World”应用
在安卓开发的浩瀚海洋中,每个新手都渴望扬帆起航。本文将作为你的指南针,引领你通过创建一个简单的“Hello World”应用,迈出安卓开发的第一步。我们将一起搭建开发环境、了解基本概念,并编写第一行代码。就像印度圣雄甘地所说:“你必须成为你希望在世界上看到的改变。”让我们一起开始这段旅程,成为我们想要见到的开发者吧!
88 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    Android历史版本与APK文件结构
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 9
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 10
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    14
  • 2
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    28
  • 3
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 4
    Android历史版本与APK文件结构
    121
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 7
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    60
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121