课程 1B: 打造布局

最新推荐文章于 2024-05-20 16:46:10 发布
最新推荐文章于 2024-05-20 16:46:10 发布
阅读量118 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5a774719f265da4e777f830c
版权

这节课是 Android 开发（入门）课程 的第一部分《布局和交互》的第二节课，导师依然是 Katherine Kuan 和 Kunal Chawla，主要内容是应用 Android 学习方法与 ViewGroups。

关键词：ViewGroups，LinearLayout 样式，RelativeLayout 样式，stack overflow，布局权重 layout_weight，Views ID，内边距 padding，外边距 layout_margin

应用 Android 学习方法

  1. 课程介绍了 XML 可视化编辑器 (XMLV，XML Visualizer)，这个工具可以直接在网页显示 XML 的显示效果，不过根据我的尝试，XMLV 存在 bugs，会出现代码正确而仿真结果不正确的情况；同时它仅支持一部分 XML 代码，所以尽量不要尝试课程以外的代码。
  2. 通过 Android 文档找到帮助
    善用 Google 搜索和浏览器的查找 (ctrl/cmd+F) 功能可以通过 Android 文档找到帮助。例如要弄懂 android:orientation 这个属性，可以 Google 搜索 "android orientation"，点击 "LinearLayout | Android Developers" 直接跳到 LinearLayout 的页面，再用浏览器查找 "orientation" 就可以找到说明文档。
  3. 通过论坛找到帮助
    遇到问题时可以直接将问题用 Google 搜索，也许有不少问答社区或论坛已经有相应的讨论。例如要知道如何将三个 TextView 在屏幕上平均分布，可以 Google 搜索 "linearlayout equally spaced children"，第一个结果就是 stack overflow 问答社区的相应问题讨论，找到回答中的关键字 "layout_weight"，再通过 Android 文档找到说明，看是否能解决问题。如果论坛中没有讨论，也可以尝试第一个提出问题。
  4. 学习阅读 Android 文档
    首次阅读 Android 文档时可能会对其中的术语或概念不熟悉，这时可通过词典或 Google 搜索查询学习，争取每次回头再看时能有越来越深入的理解。
  5. 仔细阅读代码，想象其在设备上的结果。
  6. 练习，通过练习能找到知识点的理解漏洞或偏差。

ViewGroups 的使用

ViewGroups也是一种 Views，拥有 Views 的属性，如矩形、边界不可见，宽度、高度、背景色等。ViewGroups 作为根 Views (Root Views) 包含了其他 Views，并将不同的 Views 摆放在屏幕上的不同位置。

按家谱描绘方式 (the Family Language)，ViewGroups 被称为父 Views (the Parent Views)，其他 Views 被称为子 Views (the Child Views)，子 Views 之间可互称兄弟 Views (the Sibling Views)。

课程 1B 介绍了 RelativeLayout 和 LinearLayout 两种 ViewGroups。

首先来看 LinearLayout，他可以将子 Views 垂直排列 (Vertical Column) 或水平摆放 (Horizontal Row)。以下是一段 LinearLayout 代码。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F44336">

    <TextView
        android:text="Hi!There."
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:textSize="34sp" 
        android:background="#2196F3"/>

    <TextView
        android:text="This is Tom."
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:textSize="34sp" 
        android:background="#9C27B0"/>

    <TextView
        android:text="Nice to meet you."
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:textSize="34sp"
        android:background="#4CAF50"/>
</LinearLayout>
复制代码

在 XMLV 的仿真效果如下图。

浏览整段代码，第一行和最后一行是 LinearLayout 的单独标签，它包含了三个 TextView。

  1. 阅读第一句：xmlns:android="http://schemas.android.com/apk/res/android"
    该属性特指给 Android 的 URL 速记，指定以 android: 开头的属性都属于 Android。这被称为 XML 命名空间声明 (XML NameSpace Declaration)，xmlns 即 XML NameSpace 的缩写。XML 命名空间声明可自定义。有了不同的前缀，属性名相同时，XML 也不会产生冲突。

  2. 阅读第二句：android:orientation="vertical"
    该属性定义了 LinearLayout 对子 Views 的布局方式，实际值可以是垂直 (vertical) 或水平 (horizontal)。

  3. 阅读第三句和第四句：

    android:layout_width="match_parent"
    android:layout_height="match_parent"
复制代码

这两个属性分别定义了 LinearLayout 的宽度和高度，实际值由指定 dp 值和 "warp_content" 之外出现了新值 "match_parent"，对于 LinearLayout 这种根 Views 而言就将 LinearLayout 变成与设备屏幕等宽等高。

  1. 阅读第五句：android:background="#F44336"
    该属性定义了 LinearLayout 的背景色，结合第三句和第四句证明了 LinearLayout 也是一种 Views，拥有 Views 的属性。

  2. 观察第一个 TextView，其中第二句 android:layout_width="match_parent" 也使用了 "match_parent"，对于这种子 Views 而言就将 TextView 变成与 LinearLayout 这种父 Views 等宽。

  3. 观察三个 TextView，发现 android:layout_height=“0dp” 和 android:layout_weight 属性成对出现，这是将父 Views 中的子 Views 根据权重布局。
    （1）android:layout_height="0dp"
    将子 Views 的初始高度设置为 0，注意不要忘记单位 dp。
    （2）android:layout_weight
    该属性定义了子 Views 的布局权重，真实值可以是任意自然数，默认为0，数字越大，权重越大。例如上面三个 TextView 中，权重分别是 1、2、3，仿真图中他们所占的高度分别是 1/6、2/6、3/6。父 Views 中只有一个子 Views 指定了权重时数值大小无所谓，但习惯为1。

阅读所有代码后，可总结出属性名有两种形式：
（1）单段式：text、textSize、background 这一类属性由子 Views 处理；
（2）两段式：layout_width、layout_height、layout_weight 这一类属性属于 layout 属性，由父 Views 使用来确定子 Views 的参数。例如上述的 layout_weight 在 TextView 中并未指定是宽度的权重还是高度的，这是因为 layout_weight 是由父 Views (LinearLayout) 使用的，若 LinearLayout 对子 Views 的布局方式 (orientation) 是垂直 (vertical)，那么对子 Views 进行高度上的权重布局；若为水平 (horizontal) 则对子 Views 进行宽度上的权重布局。

接下来看 RelativeLayout，它可以将子 Views 相对父 Views 摆放（上下左右中）和相对兄弟 Views（上下左右）摆放。以下是一段 RelativeLayout 代码。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F44336">

    <TextView
        android:text="This is Tom."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="34sp" 
        android:background="#2196F3"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:id="@+id/textview0"/>

    <TextView
        android:text="Hi!There."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="34sp" 
        android:background="#9C27B0"
        android:layout_toLeftOf="@id/textview0"/>
</RelativeLayout>
复制代码

在 XMLV 的仿真效果如下图。

浏览整段代码，第一行和最后一行是 RelativeLayout 的单独标签，他包含了两个 TextView。与 LinearLayout 相比，RelativeLayout 没有布局方式 (orientation) 这个属性。

  1. 观察第一个 TextView，它相对父 Views 放置，属性有
相对位置属性名
上android:layout_alignParentTop
下android:layout_alignParentBottom
左android:layout_alignParentLeft
右android:layout_alignParentRight
水平居中android:layout_alignParentHorizontal
垂直居中android:layout_alignParentVertical

真实值为真 (true) 或假 (false)，默认位置在父 Views 的左上角。属性可组合使用，如第一个 TextView 放置在 RelativeLayout 的右上角。

  1. 观察第二个 TextView，他相对第一个 TextView 这个兄弟 Views 放置，属性有
相对位置属性名
上android:layout_toLeftOf
下android:layout_toRightOf
左android:layout_above
右android:layout_below

真实值为兄弟 Views 的 id，这就需要首先为其声明 id。如第一个 TextView 中 android:id="@+id/textview0" 就是给其取 Views ID，其中
（1）@: 表示 Android App 资源；
（2）+: 表示首次声明；
（3）id: 表示资源类型；
（4）textview0: Views ID，不能有空格，不能以符号开头（数字可以），应保持唯一性。

android:layout_toLeftOf="@id/textview0"
复制代码

第二个 TextView 放在第一个 TextView 的左边，属性的真实值为第一个 TextView 的 ID，其中 @ 与 id 之间没有 +。第一个 TextView 相对于第二个 TextView 而言也称为锚定 Views (the Anchor Views)。

Views 视觉润色

介绍了 RelativeLayout 和 LinearLayout 两类 ViewGroups 后，课程 1B 还简要介绍了为 Views 视觉润色的方法，即在 Views 之间添上空间，利用 padding 或 margin 属性。以下是一段 padding 和 margin 的代码。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F44336">

    <TextView
        android:text="Hi there!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:textSize="45sp"
        android:background="#009688"
        android:paddingTop="16dp"
        android:paddingLeft="32dp"
        android:paddingBottom="16dp"
        android:paddingRight="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginTop="32dp"/>
</LinearLayout>
复制代码

在 XMLV 的仿真效果如下图。

  1. margin 属性会使子 Views 距离父 Views 中的指定位置有间隔，不会改变子 Views。属性有 android:layout_margin，或分成上下左右四个方向，android:layout_marginLeft、android:layout_marginRight、android:layout_marginTop、android:layout_marginBottom，可组合使用。注意 margin 属于 layout 属性，由父 Views 处理。真实值默认为 0。如上面的 TextView 距离其在 LinearLayout 中默认左上角位置左边和上边分别距离 32dp。

  2. padding 属性会使 Views 内的内容距离指定位置有间隔，例如上述 TextView 内的文字距离 TextView 上下边界有 16dp、左右边界有 32dp。属性有 android:padding，或分成上下左右四个方向，android:paddingTop、android:paddingBottom、android:paddingLeft、android:paddingRight，可组合使用。真实值默认为0。

  3. padding 和 margin 的真实值设置一般为 8dp 的倍数，具体可参考 Material Design 。

ducode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安卓学习第一天：打造布局
lengarry的博客
06-21 309
前言 从今天开始，我在udacity学习安卓开发入门纳米课程啦！这门课程由google公司设计制作，课程讲师基本都是来自谷歌，所以，非常开心能够接受他们的指导。 课程结构 1.布局和交互 2.多屏幕应用 3.访问网络 4.数据与数据库  5.构建完成的天气应用 第一部分布局和交互又划分为： 课程1A：打造布局（2小时）快速检查（2分钟）课程1B:打造布局（2小时）
「22」四个步骤：手把手教你，布局录制高清视频课程……
闪电出书
03-31 868
obs除了直播直播以外，也是一款优秀的录屏软件。以录课场景（PPT课件+人像）为例，给你分享obs录屏功能怎么使用的。
前端课程体系大纲
别样的博客
07-17 5183
前端课程体系大纲 总阶段名称 阶段分支名称 技术名称 技术内容 学习目标 前端基础阶段 WEB基础 HTML基础 1.安装webstorm 2.设置webstorm 3.HTML介绍 4.HTML属性和值 5.HTML注释 6.HTML基本结构（DTD文档模型）...
Android课程设计：基于离线地图服务器的Android地图应用
qq_45698833的博客
05-21 1224
Android开发课程设计：基于离线地图服务器的Android地图应用 此项目的灵感来源于伯克利cs61b的Project3： cs61b的官网地址：Project 3: Bear Maps 我的实验记录：cs61b实验记录（八）project 3 此应用实现了一个Android地图应用，以及一个提供必要服务的离线地图服务器。 Android端： 使用Mapbox提供的API完成地图的展示和用户界面的控制。 服务器端： 使用Spark框架搭建服务器，自己实现算法，提供Android端的兴趣点（PO
产品读书《B端产品经理必修课：从业务逻辑到产品构建全攻略》
女王の专属领地
03-28 2万+
第一部分 To B or not to B 1 B 端产品经理 如何理解B端产品？ B端产品主要分为两大类： 为公司的管理服务，如：HR系统、OA系统； 为公司的运营服务，如：供应链系统、ERP系统的。 B端产品即要符合商业组织的战略要求，能够满足商业用户需求，将已有商业运行逻辑进行系统化、信息化、高效化处理。两类都是为企业流程效率服务，让分散的、低效的个体，更好地连接合作，...
android 项目实战——打造超级课程表一键提取课表功能
热门推荐
区长的专栏
03-01 2万+
如果你是在校大学生，或许你用多了各种课程表，比如课程格子，超级课程表。它们都有一个共同点就是可以一键导入教务处的课程。那么一直都是用户的我们，没有考虑过之间是如何实现的。那么现在就由我来带领大家从程序猿的角度模仿一款”超级课程表“。 PS：由于超级课程表是商用软件，原本提取了一些图片，但是为了避免涉及侵权问题，所有图片均已使用一张绿色圆圈代替，背景图片也以颜色代替，缺乏美观，如果你觉得太丑，可以
万字长文：用这篇文章聊聊To B运营都做些什么
布衣的博客
09-18 1441
正文共：11154字 预计阅读时间：30分钟 文：悠然布衣 （这篇文章会比较泛的聊聊To B运营是做什么的，不会太详细的去聊一个具体的技巧，想要交流具体技巧的朋友可以跟我交流。） （PS：排版好麻烦啊，内容早就梳理完了，一想到要排版就头疼，特别是想到还要规避版权图……大家凑合着看吧！） 什么叫To B运营呢？ 在此之前我也听说过To B运营，但是都没有过大脑，也就没有深入的去了解它。直到前几天朋友聊到To B运营的时候，我才系统的了解了一下这个运营岗位。 简单的去说，To B运营就是目标客户是企业的运营。我
百度「联邦学习」战略全布局
喜欢打酱油的老鸟
07-14 1440
2020-07-08 08:02 导语：拥有三大开源联邦学习框架之一的百度，有着怎样的实践心得？ 对百度来说，联邦学习+金融会产生怎样的火花？ 雷锋网AI金融评论推出的《BATJ高管公开课》第四期，就邀请到了百度智能云智慧金融事业部算法负责人谢国斌做客线上讲堂，揭秘百度智能云在金融领域的安全计算布局和技术思考。 此次课程，他将分享基于联邦学习技术的百度金融安全计算平台（度信）建设与实际应用，讲述如何借力安全技术架构、脱敏方法和合规制度设计，在“用户充分授权、数据来源合法合规”前提下，打破数据孤岛，
Android用户界面设计：相对布局
03-02
理解布局对于良好的Android程序设计非常重要。在这个教程里，你将学到相对布局的所有知识，相对布局用于将用户界面控件或小工具相对于其它控件或它们的父级布局组织在屏幕上。当使用正确的时候，相对布局可以是很...
CSS-Layout:AluraCSS布局课程
04-19
CSS布局AluraCSS布局课程
Android课程表界面布局实现代码
01-20
图1： 图2： 布局分析 该界面主要可分为三部分： 1.显示年份及周数部分 2.显示周一到周日 3.课程显示部分 实现步骤 1.首先整个页面放在一个LinearLayout布局下面，分为上面和下面两个部分，下面一个是显示课程...
QT布局：实现动态布局
05-01
QT实现动态布局 博客：QT实现动态布局 地址：https://tinycool.blog.csdn.net/article/details/124525866
SwiftUI Transitions: Opacity, Slide, Move, Scale, Asymmetric
Daniel_coder的博客
05-17 1005
SwiftUI也有自己的转场动画Transition，主要包括有：Opacity，Slide，Move，Scale和Asymmetric等，好的转场动画能提供更好的界面舒适度，提升用户体验。
从零开始：如何集成和优化视频美颜SDK
最新发布
q1031691172的博客
05-20 135
对于开发者而言，如何有效地集成和优化视频美颜SDK，以提供流畅且高质量的美颜效果，是一个需要仔细考虑的问题。本文将详细介绍从零开始集成和优化视频美颜SDK的步骤和技巧。
【全开源】国际版JAVA多商户运营版商城系统源码地摊兄源码多商户源码社交电商源码支持Android+IOS+H5
2401_84413757的博客
05-15 382
我们相信，在国际版多商户运营版商城系统的助力下，全球电商行业将迎来更加繁荣和发展的新篇章！国际版多商户运营版商城系统是一个集多语言支持、多货币结算、跨境物流、数据分析等功能于一体的综合性电商平台。该系统不仅支持多个商户在同一平台上独立运营，还具备灵活的扩展性和高度可定制性，能够满足不同国家、地区商户的个性化需求。为了满足不同国家、地区商户的多样化需求，我们隆重推出“国际版多商户运营版商城系统”，旨在为全球商户搭建一个高效、安全、智能的电商交易平台。
Android Audio基础——AudioFlinger回放录制线程（七）
小旭的专栏
05-20 207
PlaybackThread 和 RecordThread 的基类。录制线程类，由 ThreadBase 派生。回放线程基类，同由 ThreadBase 派生。混音回放线程类，由 PlaybackThread 派生，负责处理标识为 AUDIO_OUTPUT_FLAG_PRIMARY、AUDIO_OUTPUT_FLAG_FAST、AUDIO_OUTPUT_FLAG_DEEP_BUFFER 的音频流，MixerThread 可以把多个音轨的数据混音后再输出。
掌握Android Intent与IntentFilter的艺术-深入探索匹配规则与实践技巧
w风雨无阻w的专栏
05-14 718
动作匹配Intent中必须包含中声明的至少一个动作。类别匹配Intent中的所有类别必须与中的类别完全一致。数据匹配Intent中的数据必须与中的至少一个数据匹配。假设我们有一个网页浏览器应用，我们希望当用户尝试打开一个http或https协议的网页时，我们的应用能够被系统选中。我们可以在中为相应的Activity定义如下当用户点击一个网页链接时，系统会查找所有能够响应VIEW动作和BROWSABLE类别的组件，并且检查它们的<data>元素是否匹配链接的协议。在这个例子中，我们的将能够响应所有。
Android开发环境基础
huaqianzkh的专栏
05-20 270
参考博文：Android版本与SDK/API版本、JDK对应关系_minsdk 23对应安卓版本-CSDN博客 参考博文：Android studio版本对用的gradle版本和插件版本（注意事项）_gradle版本和gradle插件版本-CSDN博客参考博文：开发Android App，令人头疼的Android Studio、Gradle、JDK、Andrroid Gradle Plugin版本问题_android gradle版本-CSDN博客
css flex 2：1布局
08-05
2:1布局指的是一个容器内的两个子元素，其中一个元素的宽度是另一个元素宽度的两倍。 下面是一个示例代码，演示如何实现2:1布局： ```html<style> .container { display: flex; } .item1 { flex:2; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值