Android Develop Study Jams 笔记分享 第二篇:View

Rate this post

上一篇作为一个基础的入门讲解,这一篇将为大家介绍 Android 开发中极其重要的一部分:View.


通过之前的相关基础知识介绍,相信大家已经开始进行课程的学习了。你最先会接触到的 1A 课程中,最主要的内容就是 View 了。

那么究竟什么是 View 呢?

其实通俗来说,View 就是 App 页面的基本组成元素。例如这篇文章的题图,左边的手机页面主要是由文本、图片、按钮三个部分组成的,那么在控制这个页面的 XML 文档中,相对应的就是 TextView 、ImageView 以及 Button.

由于 Button 的主要功能的实现需要与 Java 代码进行绑定,所以我会在后续的笔记中再为大家详细介绍。今天这篇笔记就主要讲一下其余两个最重要的 View.


TextView

TextView 即向用户显示文本,并且在某些情况下 (EditText) 允许用户进行文本内容的编辑。

下面是一个很简单的 TextView 所对应的代码。

<TextView
android:text="Hello World!"
android:background="#f00"
android:textSize="36sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

这几行代码的实际效果如下图所示。

一个最简单的 TextView

现在我来详细为大家讲解一下。

<TextView/>

这是一个 XML 标签,而且是自闭合标签。在这里我先不具体讲解自闭合标签的含义,你暂时还不需要在意,你只需要注意你的 TextView 的所有内容,都需要放在这个标签里面,注意开头的 <以及结尾的 />, 这个标签被你在第一行打开,最后一行关闭,中间的内容就是控制你这个 TextView 的相关属性。

android:text=”Hello World!”

这一行代码是 TextView 中最重要的部分,相信你也看到了,这行代码就是控制 TextView 中显示的内容。

将这一行代码分成两行来看:等号左边是属性,等号右边是对应的值。类似于大家在填表中对应标题的表格中填入相对应的信息,在这里也是一样的,你需要根据自己的需要来选择对应的属性并且赋给相对应的值。

拿这行代码来说,你需要着重注意的是,等号左边的冒号以及右边的双引号。左边的冒号是必不可少的格式要求,右边的双引号则是表示引号中的内容为对应的值。如果格式不正确,那么这行代码就会出错。请一定要注意。

android:background=”#f00″

这一行代码的意思是设置 TextView 的背景颜色。这个属性的值 ”#f00“ 即代表红色。你可以通过查询颜色对照表来获得相关颜色的数值。

android:textSize=”36sp”

这一行代码很简单,是用来设置文字大小,sp 为单位。

android:layout_width=”wrap_content”android:layout_height=”wrap_content”

这两行代码一起说,因为它们是成对出现的。共同控制这个 TextView 的大小。

第一行代码控制这个 TextView 的宽度,第二行代码控制这个 TextView 的高度。与之前一行代码一样,等号左边是属性,等号右边是值。需要注意的是这两行代码左边的 layout 与右边的 wrap 后面都有下划线,这也是格式的要求,是必须要遵守。

这时候你可能会困惑等号右边的 wrap_content 是什么意思呢?

其实对于 TextView 的宽度和高度这两个属性,有三个对应的值,分别是 wrap_content、match_parent 与自定义数值(**dp):

  • wrap_content 代表包裹自身内容,即大小随着该 TextView 中的内容进行变化,保证恰好存放下文字内容。
  • match_parent 代表填充父窗体。
  • 自定义数值即你可以通过输入 **dp 例如 200dp 来控制大小。

建议你现在去 XML 在线编辑器 修改一下相关代码来加深自己的理解,尤其是通过修改宽度和高度属性对应的值查看对应背景颜色的填充区域来直观的感受一下不同值对属性的影响从而加深你对这三个值的印象。

事实上这里讲解的只是一个最简单的 TextView ,仅仅涉及到了一些简单的属性。你可以到 Android 开发者网站来查看更详细的属性。需要注意的是,一个 TextView 只需声明宽度与高度即可创建成功,无需其它属性。与此同时,没有这两个属性就没办法成功创建该 TextView.


ImageView

用来显示任意图像,例如图标。提供多种显示选项,例如缩放与着色。

ImageView 与 TextView 的基本属性差不多,下面是一个简单的 ImageView 的代码与其效果图。

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ocean"
android:scaleType="centerCrop"
/>
ImageView 的实际显示效果

大家可以发现,ImageView 整体的格式其实和 TextView 的格式是差不多的,所以下面有些属性我就将简单略过,重点讲一下 ImageView 特有的属性。

<ImageView/>

与 <TextView/> 一样,<ImageView/> 也是一个自闭合标签。你需要将属性与对应的值放在标签中,同时需要注意打开与关闭标签的格式。

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

相信你也看到了,这里的宽度和高度设置和之前看过的 TextView 的宽度与高度设置是一样的,对应的值也是同样的可以有三个选择。你可以根据自己的需要来进行选择。

android:src=”@drawable/ocean”

这行代码是之前我们大家都没看到过的,也是 ImageView 最核心的部分:设置所显示的图片。

等号左边的代码表示该属性为图片来源,右边的代码比较长,分开看一下的话,”ocean” 代表图片的名称,”drawable“表示该图片的类型是类似于图形的东西可以在 Android 里面显示在屏幕上,”@“表示从 Androi App 中引入一个资源。在 XML 在线编辑器中,你可以通过左下角的按钮来查看可用的图片。在实际的开发中,你需要提前将图片添加到 Android Studio 的相应位置,这一点我们将来涉及到的时候再着重讲解。

android:scaleType=”centerCrop”

这行代码对于 ImageView 来说也很重要。scaleType 用来设置图片在 ImageView 的显示方式、如何缩放。

举例来说,如果图片比屏幕尺寸大,那么设置为 ”centerCrop” 将达到缩小图片使其居中显示的效果,设置为 ”center“ 将会使图片保持原有大小并使用中心填充该区域。

其实除了这些之外,你还可以在这里找到更多的 scaleType 的可用值,在这里我就不过多展开了,你可以自己动手体验一下不同的图片剪切方式,感受一下不同的选项对实际显示效果的影响。

需要注意的是,如果想要体验完整的效果,最好手动限定 ImageView 大小小于图片大小或者使用尺寸大于屏幕大小的图片来进行操作。

好啦,现在就快去动手尝试一下吧。


结尾

关于 View 的讲解就先到这里,相信经过这篇文章,你一定会对 TextView 与 ImageView 有一个更好的理解。如果遇到什么问题,请随时在群里 @组长为你解决。另外,如果你想要对这两者有更深层的理解,建议你去阅读 Android 开发者文档


如果你有相关的意见或者建议也欢迎给我发邮件,地址是:97hexi@gmail.com.

感谢阅读。