01_理论概述_UI理解.avi原创

好了，来，下面呢，我们来学习今天的课程啊。啊，今天我们要去学的是用户界面啊，一共呢需要两天的时间啊，关于用户界面呢，其实在文档里面也有很多说明。大家以后呢，有时间也可以去看一下文档里面的说明。好，等一下啊。给它打开。啊，在文档里面有一个章节叫来user interface。UI可以展开。大家看到还挺多的，对吧。嗯。啊，里面呢，有一些关于UI的一些说明介绍，下面就是具体的一些啊。OK，有什么layout有什么啊？输入控制输入事件菜单menu。还有什么X8设置dialogue，什么通知，什么透视的，有些我们还学过是吧？

好。来。主要我们也分为几个方面，第一个是理论概述，第二个呢是UI开发的一个学习啊，最后呢是一些练习。理论概述有两个，一个是你需要去对UI进行一个基本的理解。第二个，有一个概念叫UI世界。好，接着关于开发，有几个常用的UI组件。还有一个叫常用的UI布局。嗯。接着是常用视图标签的一些属性，我们要对它进行分类。下面一个MR，这一个是应用中用的最多的一个，也是最重要的一个。啊，列表。

大家无论去打开什么微信呐，打开QQ啊是吧，一旦进去以后，是不是很多列表的一个界面呢。嗯，基本的应用都会有。好，下面一个就是关于样式和主题。后面呢，我们有一些练习。一个是显示应用程序列表。比如说我们要做一个应用展示一个列表，那个列表里面是一些什么信息呢？就我手机里面一个手机是不是可以安装很多应用啊。哎，我要把应用的一些信息显示出来，大家说应用有哪些信息比较重要啊。大家一看就能看出来，大家觉得有哪些信息比较重要。名字，嗯，对，很好，有名字还有什么。图标对吧，它是不是应该有一个特别的图标啊，嗯，对啊，一个是主要就两个，一个是logo。

啊，图标还有一个就是它的名称对吧，我们要显示成一个列表的结构，诶列表有个什么特点呢。啊，列表基本上有两个特点给大家说一下，第一个它是很多行啊，每一行是不是它的结构都一样的。是吧，都是左边是图标，右边是名称，对吧，还有一个它可以什么。上下滑动，我们一定要上下滚动。好。就是这一个下面一个。我们要去做一下手机卫视的主界面啊，关于它的主界面我们该怎么样去实现的一个问题啊。好了，嗯，基本上就这些，先来看一下你的概述，第一个理解UI。啊，先来看一下UI的一个定义来。全称呢叫user interface，叫用户界面，简称界面。

好，下面一个，这个很重要。UI呢，是由和view group类两个类组成view了，我们来看一下。来看啊，进来。看一下shift加T。是不是有一个啊。好了，再来一个。啊，还有一个呢，叫。是吧，好，大家发现他们俩什么关系呀？嗯。他是父，他是什么子，就父子关系对不对，也就是说view group是一个特别的view。那特别在哪里了是吧？来，下面我们来看。View类呢，是所有视图的一个根基类。包括v group对吧。没问题吧，大家这里每一句话都要理解啊。下面一个利用了在屏幕上面占据一片矩形区域。

并会在上面进行内容的绘制，譬如说假设这是我的那个手机的窗口，到时候是不是要写这个界面吧？那个界面上面是不是有很多个部分组成的啊，譬如说这是一个输入框，这是一个按钮可以吧？啊，这输入框里面可以输入用户名。啊输啊可以，这是一个提交。可以吧，啊按钮好。那你在想啊下面。这无论是text还是button，是不是都是一个类啊？因为它的一个子类嘛，嗯，好了大家看啊。一个view呢，在屏幕上面是占据的是一片矩形区域。矩形区域，这个明白吧，嗯，就是这样一个区域。啊，并且在这个区域上面呢，进行内容绘制，什么叫内容绘制呢？譬如说假设我是个text view，那绘制一个什么。

是绘制的是文本呢？假设我是一个image you。绘制什么？是不是图片呢？啊，Imagine you，或者说我是一个button，是不是绘制成一个button的样子？嗯。那不同的view呢？它绘制的样子是不太一样的吧？嗯，但总体来说，它都是在自己的矩形区域内绘制自己的内容。可能是文本，也可能是图片，甚至有可能是图形。嗯，这是这一个说的是view。那刚才我们看到另外一个叫we group，它是一个特别的view。特别在哪呢？大家看啊。V group里面包含了一些view或者是v group，它用来干嘛呢？这个非常非常关键。

用来去控制子view的。布局，我们前面用过的两种布局。线性布局还有什么相对布局好？大家来看一下啊，我大家看一个东西。大家看到这是一个view，没问题，CTRL加T。下面是它的整个继承结构吧。好了，大家来看imagine you是它的一个子类吧，啊，没问题啊，大家看还有好多，好了，我主要看一下它。看看啊。这是不是无悔啊？你说线性布局是谁的子类啊，准确的说。是view的，是在这个外面还是里面呢？嗯，大家来看啊，我来搜索一下，别找了，上面可以搜线性布局out。

是will you today。线性布局本身显示什么内容吗？不显示任何内容。他又能干嘛的啦？控制指标的什么布局，我们那时候是不是看啊，回忆一下我们那个打电话。和发短信，我们是外围是不是写了一个垂直的线性布局，垂直的线性布局那是用来干嘛的呀。是不是用来控制他的孩子的一个位置定位的呀，对不对，后面我们是不是又写了相对水平的线性布局啊。水平的线性布局是不是用来控制？他的孩子是水平的排布啊。外围的这个垂直的线性布局，是用来控制这三个线性布局的。而里面的线性布局呢？控制text view和text了吧。一个是垂直的排布，一个是水平的排布。

从这里面你就能看的出来，View group view。它们的一个作用的区别。来，再回过来看一下它。看这。View一般的，它是用来去绘制一些内容，就是让你能看到一些东西。对吧，但v group它的特别的地方是本身并不显示什么效果。你就写一个group，能看的出来是什么样子的吗？就能上面能显示文本吗？能显示图片吗？也不能。对吧，只能是干嘛呢，它的作用就是这个作用。控制指标的布局。对吧，就是有人来负责写出内容，有人来负责结构。就整个大家想啊，假设你就把它看成一个屏幕。对吧，你光有内容显示不够吧。你是不是还得控制不同的内容，譬如说这是一个image啊，这个里面是一个什么。

You吧？这又是一个什么？Text you，每一个视图之间是不是有一定的对应关系啊，有一定的排布结构啊。那既然有结构，是不是就是所说的结构，就是我们所说的布局。知道吧，那是不是得需要一些group吧？嗯，这地方大家看得出来好了，而且。大家可以看一个东西。它是一个什么。他是个抽象的。那就是说，我只是说证明我是不是用来去负责子view的布局，但怎么去控制？我是不知道啊。因为有不同类型，有线性布局。除了现金布局，还有什么乡内布局对不对啊，还有我们后面学的真布局，什么乱七八糟布局。

那这些不同的布局，它的控制的方式是不太一样的吧。我的group不需要去具体到怎么控制，由孩子去控制吧。但我可以去实现它里面的一些可以实现的一些公用的行为，对吧，有些行为我是可以实现的吧。只是一部分行为，我实现不了。啊，它有一个方法啊。啊，这个地方有一个，哎，不是这一个这一个。On的方法，它是什么？是不是一个抽象的回调方法，看着像一个回调方法，按开头的方法对不对啊，这样一个方法。这个方法就是用来控制孩子的布局的。但是我现在是不是还不知道啊。对吧，你可以看一下这个方法是不是被很多人实现了，大家看。能看的出来吧，嗯，你按你光标停在上面啊，一旦显示的不是灰色的，那说明它重写了。

能看懂吧，啊这这些小的技巧大家要会掌握啊，CTRL加T。啊，譬如说我们的信息布局走进去。这个其实大家能看懂，你看这是什么意思。这怎么这怎么还调调两个方法呢。他觉得什么意思。我们的线性布局是不是有垂直的和水平的两种？垂直的线性布局控制的方式和水平的线性布局控制方式一样吗？那差距可大了，对不对？如果你是个垂直的。啊，即使这个有，我还能放在右边吗？不能。是不是只能放在下面啊，从上往下去控制吧。能看到吧。是这样的，那如果你是个水平的信息布局。

听说我这里这样的是吧，我放在下面吗？不是我放在上面对不对，这么放的吧，我下面还有这么多空间，我能放吗？不能。是不是只能从左到右放啊，这就说到水平的控制和垂直的控制。它是分了方向了。这个大家得知道，嗯。通过这个事，大家应该看到view和view group它的一个区别。好，下面可以看一下view的一个API的结构。嗯。啊，View的下面呢，有一些啊，实现了view啊，有image view这是用来干嘛的。显示图片的progress。进度条见过吧，就下载的时候有个进度条好了，还有这个。

大家知道干嘛呢，就打分评级的，五星，三星，两星四星。就那些卖书的网站不是经常有吗？对吧，你是要评级啊啊。好吧。这八呢是一个就是音乐播放器啊，视频播放器，它是不是可以手动的去指定那个进度啊，本身默认pro它不能指定进度的。只能通过程序的方式，你不能手动的指引，嗯，这里面能看出区别啊，好了，下面一个。再一个呢，跟大家说一下，红色的是特别重要的，蓝色的是次要的。啊，这不太重要的。好，Surface view啊，下面的它的一个实现叫video view，这个video view大家应该就知道了。视频的啊，Video是视频，就是播放视频的空间视图，好，下面。这是什么文本视图对吧？好接着了，诶挺奇怪。

是派view的一个什么？有人就纳闷了，这个样子完全不一样啊，对不对？其实button比text view多了什么呢？多了背景。你说那看起来不像背景，那确实就是背景，只是那个背景嘛，它有它那个背景，是个背景图片，有两个图片。正常情况下面是一个怎么说呢，有点像灰白色的是吧，有个边框的那种图片，不是深色的吧，是浅色的一个图片，对不对，当你按下去的时候。他就感觉变色了呀。那是显示的另外一张图片，有深色的图片，但你一松开。是不是又有一个图片又显示原来图片呢？就正常情况，下面一张图片按下去了，又是张图片，那叫多状态图片。我们有一个概念叫状态，是你是正常状态还是暗下去的状态啊，还有一些别的状态啊，后面再说。

好来，下面再来看啊。大家看这里，这个是什么呢。多选这个了，单选啊好下面这一个。输入框对吧，啊输入框。好，这是说的一般的视图，这些视图能够在界面上面显示一些效果，就绘制自己内容吗？好，下面给大家换另外一个。大家看这里，这个里面呢，就是一些v group，也就是说v group首先是它的子类吧。嗯，收到准备好啦，下面呢，它有一些实线。Great view，我们叫它网格布局。网格布局在哪个地方有建呢？呃，见的比较多的可能是图库应用。

图库应用里面，它不一显示就是几几排几列吗。还记得吧？是不是这么显示的？啊，就网格嘛。啊，网格布局，那你view跟网格布局它有什么区别啊。网格布局是不是有好几列呀，啊对吧，View了就只有一列对吧。啊，下面来接view，这个是最最重要的。啊，下面一个叫frame真布局，什么叫真布局了，这个东西得大家有些人估计学过学过div没有。如果你学过div，那就很好理解。就是整个界面它显示的话是一层一层贴上来的就很多层啊，一层贴一层。啊的一个整体的一个效果。啊，也就是说我。我是一个frameno，他的每一个孩子呢，就占据着我整个屏幕啊的一层，现在我又往上面去贴，又往上面去贴，就一层一层的。

啊，最终显示了一个，啊，最终的一个效果。啊，如果你不嗯不知道也没关系，我们后面再说啊。好，下面。再看这一个。Score of you score什么意思？滚动啊，可滚动的一个视图，这个呢，我们后面会用到啊，前期呢我们先不用它。好，下面一个，这个是我们用的比较多的线性布局，是我们用的最多的一个，它分为水平的控制和什么。垂直的控制，还有一个他的孩子有一个特别有意思的。叫radio group，什么意思呢？就是我们单选框，譬如说我要显示性别。性别是不分男女啊。对吧，是不是单选的，那你想啊，它是不是有有你实际上是有两个可以选择可供选择的吧，这个是一个水平排布的吧。

是吧？那这个地方实际上radio button啊，只能是显示男或者女，那是不是应该有两个radio button呢？那应该把两个radio button放在哪个里面呢？Re group里面。那group它实际上是一个什么？是不是线性布局啊。好了，还有一个后面啊，后面我们要说的就配角。这是一个什么东西呢？跟大家说一下啊，就是我们在新闻客户端看到的是不是可以左右滑动的页，很多页可以左右滑动啊。见过吗？这手是你的手，这样一滑，这样一滑是可以翻页的。你记得吗？那个就是用的什么呢？Real page。好，这一个是什么呢？这个现在用的少一些了。啊，有个概念叫抽屉，不对，明明就是它开始了就有点类似于我们的桌面应用，我们的桌面应用是不是里面实际上是有很多内容吧，开始你看得见吗。

你上面是不是有有一个东西。你点开是不是打开了呀。啊，以前不是点开的是什么呢。往下拉动。把拉出来我就拉你那抽屉不是先开始藏在里面嘛，对不对，厂里面你你你拉着那个把手是我A拉开那里面东西就出来了呀。啊，就是一个抽屉的效果啊。这个呢，我们手机微视里面用了一下，这个重要性也不是特别大。大家重点要掌握的是红色部分。好，我们也把view。的一个基本理解的跟大家说了一下，下面说一个是。叫UI的一个组成。这里面呢，界面整体的有一个概念叫布局。就整体要有一个布局的概念。

嗯，好来布局的，它这个地方一另外一个叫组成可视界面的各个有一个概念叫UI组件。那前面我们好像有一个组件概念叫什么呢。叫应用组件。还记得吧，Activity是不是四大应用组件之一啊，叫应用组件，现在出现了另外一个呢，叫UI组件。其实UI组件你就可以把它理解为各个视图。就OK啊。整体的布局呢，我们是不是要布局文件里面写这样一个结构，看看大家能不能看懂。只是我们真正写的时候，肯定不是写的他。哎，我布局里为什么不能写肩跨无group？对，它是抽象的类。对吧，我们肯定不可能写，他写的肯定是他的什么。是不是时间内呀，嗯，对。好，某一个布局的下面是不是有一些孩子呀。

孩子呢，可能是一般的view，也可能是什么。V group，那group下面是不是还可以有孩子啊？你说他的下面还能有孩子吗？可不可以？不可以。那还要有的话，那那还去他们俩干嘛呢。对吧。啊，这个里面所指的view啊，也就是说你刚刚不说过了，View下面还有view group呀。这里面的view特指不是view的view。能理解吧，啊，我们刚才是不是画了两有分为两个部分呢。啊啊，它就是右边的部分，这些view呢，是一般的view。就不能用孩子的。嗯，好啦。下面呢，就是组成界面的各个UI控件，UI组件。大家看你说上面这个用什么视图来做的。Imagine you对吧，下面呢？

Tax you。能看懂吧，嗯。这是它的一个整体的一个理解。当然这里面的重点是要把这里面的每一句话都给它理解出来啊。嗯。