3.尚硅谷_自定义控件_优酷菜单-布局文件的实现

我们之前说了，自定空间有三种方式，一种是系统空间呈现组合，实现我们特定效果，还有一种是自定域实现我们特定效果，还有一种是自定一个类继成用火动火制一个类继是用重新组合，然后实现我们不同的效果。然后我们在这个地方里面会讲很多案例。比如说我们在这个地方里面会讲一个优酷菜单、用户菜单，都属于用系统控件重新组合。用这种方式实现的。所以大家看到的是。这样的一个项目啊，这个项目又是用些空间，是用组合成的。那么我们广告条，广告条呢，这个效果在很多里面用的特别多，而且这个V配角啊，我们后面软件架构也用得着，也就是说V配件将会至少你会接触五六次。用五六次，所以大家第一次一定要用明白，后面就很很爽。

啊，但是你，但是你千万不能说啊，后面用到五六次，那我这一次我就不用。是吧，就没必要啊，那么呢，它也是系统的，但是它本质上是微视包里面的。啊，V4包里面向下接龙包里面。但是呢，我也把它归纳为系统空间的一种方式啊，然后下拉框，下拉框的话呢，像这样的效果用的也是比较多啊，那这样的话呢，它是一个window。然后呢，这些所有的都是系统文件所组成的，不window就弹出，这是弹出是不window对吧，那这里面有一个历史用对不对，一点就可以删除一点，可以选中这样的功能的话也挺多的，对吧，这样的这个的话也是个系统构件去做。然后我们在这个地方里面呢，还有一个自定义开关。这制定开关呢，好，我们到时候会制定一个类，然后呢，制定一个类的话，去实现这样的效果，就是可以把它本质上是把背景画出来，这一张画出来，当你点击的时候，分别让他去什么。

让这里面设置不同的距离，就实现我这的效果了。对吧，那么它是属于这种直接空间方式。啊，而且这里面包含的知识点又是不一样的，所以大家要学的东西又是理论，然后加上实际去操作。好。那么在我们这地方里面有了过后呢，还有一个自定义属性。实体属性的话呢，这个时候我们就要从。这个类就是我们制定一个类，然后呢在布局里面写，然后再去制定一些属性。这属性，然后我们就把它给绘制出来，那么呢，这个就是一个案例。因为只有你致命属性后，后面有些第三方的框架。诶，你才知道哦，这个们有些功能是有自定义属性的。

这时候你才看得懂，所以它的价值在这里。啊，所以这里属性价值在这里好，还有个水波纹。水波纹就是我们一点让它弧动就变大啊，我们这个水波纹啊，当然我们的代码呢，我们可以把它密接起来，第九步啊运起来。水波。然后呢，我们这时候一点是吧，有一个水波。画出来。对吧，一个水沟。好，那么这个时候，这个时候他其实也是采用我们这种方式。啊，去做的也是采用这一个类型的，预估的不是线，还有联系人快速索引，然后这一块讲过吗？前面。讲过吗？这讲过吗？

没有，那也就是说我们来讲讲这种功能用的是比较多的，对不对啊。我们呢，到时候也会讲啊。好的，有一个同学们在我们这地方里面的话，还有就是这是我们这些空间第二种方式，通过这些案例就完全明白了。啊OK，然后接下来我们还会做一个仿于配角，因为云配角它可以实现左右滑动，这是云配角的效果，但是呢，我们要全部自己洗。实现我们的滑动，看到没有，这是滑动与配件。那这里面呢，就涉及到很多知识，所以的话，这里面功能特别多，你发现啊特别多啊，那么大家呢，到时候去掌握。好，还会做一个什么样的效果呢？就是我们QQ侧滑。你看一点这个侧滑，但是可能这个看似简单，但是里面包含一些事件的所地啊，反拦截啊，对大家来讲的话，那里面的知识是很重要的。

对吧，这样的话呢，也是很重要的东西，可以这么说，这几天课对大家而言，以后学后面内容，包括以后你工作，包括你面试极其重要。啊。极其重要。OK，那同学们，那这就是我们这个。刚才给大家一个演，一个展示，对吧，也就是我们这几天大概要讲的内容。好，那接下来我们就讲一个优酷菜单，那也就是大家看到的这个效果优酷菜单。好。那么那么我们在讲这个之前呢，我们先把这个切换一下，现在我们是智力空间对吧，我们重新创建一个。啊，不见。好，然后我们就叫，叫什么呢，叫康的一个二啊，因为这是就来回的情况啊这样子。

然后我放在我们C这个目录下。好，我们去点击完成。啊，这有点大，我把它给拉小一点啊。点击下一步。好，那这个时候呢，我们地方里面呢，好，就直接点击我们这个房间。点蚊。来来给创建出来。好，那我创建好过后，我就把之前的这个。把它给。干掉。对吧，好把它干掉好，那接下来我们就来讲优酷菜单了，那这个优酷菜单是怎么做的呢？同学们它是怎么做的呢？你看一点还可以响应这个，一点还是这样，那么大家想到的是，诶这样的效果怎么做啊，他可能会大，可能大家第一眼看上去是。

我就想哎，这个图片是不是旋转呀，是不是感觉是用代码旋转是吧，好就就这么想，但是其实我们这些做的功能的话呢，这个图片是本身让他斜的。知道吧，那如果你是一个程序员，你去做功能，每一个图片旋转，但有一天。他的这个突然这个圈圈变大了，这时你就IO去调啊。是不是，那这个时候呢，如果去美工去做这个很简单的事情，程序员你去把每一个按钮去调度特特难了，但是美工一做就特简单，那之前在特别是112年的时候，当时呢，用户菜单是吧，那时候还这种下午挺流行的，然后的话呢，有些同学他去做，做的话用代码去做，发现做了很久一周，后来我就说你这样，你让你们的这个这个设计师啊把图片呢。把它给旋转好，你直接把它把一个域放在里面就可以了。

后来一直做，也就一天就搞定了是吧，所以他说阿福老师爱死你了是吧。好，那同学们，那这一部分是什么呢？好，它其实也是一个倍景图表，这个是背景图标，这个倍图表，好我给大家看一看啊，这个是怎么做的呢，是不是。好。我们来到这个里面。好，这个呢，有里面有我们的图片。好，大家可以看一下优酷菜单里面，你看啊，大家可以看这样的一个效果，就是这里面。它是一个这样的一个图片。啊，这个的话呢，跑到。把它给消掉，它是这么一个图片，就这部分。看到没有，然后这个图片它是什么一个图片呢。注意它是个矩形图片。

是一个什么图片呢？它是一个这样的一个图片。知道吧，只是说这部分把它变成透明了，但是有一天我们也要去点击这个地方。点击对方能点击吗。能点击吗？能点击知道吧，大家千万不要这种搜，所以以后大家开发一要注意了，有些图片呢，它虽然透明是可以点击的。不要犯这种错，就觉得哎有透明，就觉得不可以点击，是可以点击的，知道吧，就是如果你设置这这个被这个点击时间是可以点击的。OK，好，在这个地方怎么样？外面这一圈。就这个。好，然后所以它的外面这圈就更大了，这就更大，那么也就是说我们只需要在这个地方里面做一个相对布局，里面有个图片，这是一个相对布局，里面分别去设置不同的图片。不同的图片。

那这。做一个外面做不同图片，这就可以了。然后这里面大家看一下这些图片都是什么偏的，你发现没有？是不是？是不是这图片偏的是吧？就是本身就偏，然后你动上去它就什么。你把它一摆放上去，它就本质就偏的了，这样说成本很低呀，是不是OK，然后它的原理是什么呢？它的原理其实是这么回事。就比如说我们这一个屏幕。然后呢，我们在地方里面它是一个。这是一个其实是一个矩形图片是吧。然后我们在地方里面呢。它就是这么一个小一点的矩形图片。但是这这这个部分呢，是透明的，它其实是一个圆环。

这一部分是只是没有而已，对不对，其实是它也是存在的，只是看不见是吧。这样的一个效果。然后呢，它外面。这样有个图片有过后来所以在这里，这里面外面又有个圆环。循环对吧，然后呢，这个地方里面就这样子的啊，我们可以从这里。啊，这个这个。是吧，那这个地方里面呢，是是没有的是吧。啊，然后这三张图片它是累加的，知道吧，叠加的。好，我们可以这样子。好，然后当然这个可以高一点，对吧。好，然后呢，这里面就是。

好，这样的话呢，它就是这样的一个图片。好，那么三家是往底部对齐啊，然后在里面呢，我们就去把挨个图片，这是一张图片。这张图片是吧，这个图片。是不是啊，这些图片等等，然后再这个图片，这些图片这个图片这个图片这个这个图片就形成这样的一个效果，就是说我们这个是相对不计，这个相对这相对不计，然后底部对齐是不是就可以了。然后我们就把里面放图片啊，这种优酷菜单的一个实现的原理，接下来我们就来做一做了。好，那么接下来我们怎么做呢？先把布局表出来，先把这个在搞之前先把这个model给创建一下。好，那我们创建的话，这里面是吧，导入，那我们一般用什么新的一个model啊。

好，那么这里面有很多东西。一个I的酷，还有手表吧，还有这个TV是吧，谷歌眼镜。还导入我们的这个。工程，还有导入一历史的对不对，还Java的库等等，可以去做这些事情。啊，然后有了过后，我们现在要做的是手机上的吧，或者平板上的对不对，所以选择它。好，那接下来的这个名称我们就叫什么呢？注意这个名称可以叫。中文。啊什么我们叫叫什么来着零一，然后我们就叫优酷菜单看。那么为什么这一部分呢，大家一看代码就就明白对吧，很方便，然后呢，这个苞米我们叫优酷对吧，优酷就叫优酷吧，然后这地方里面它最低版本是多少。

就是我们设置最低版本，那假如说你要开发一个工程，最低版本多少呢？其实不是我们说了算，而是什么呢？还是我们可以看一下一些友盟统，友盟统计大家听说过吗？听说过对吧？大家可以看一下友蒙统计，这里面呢，友盟统计啊。他是比较有权威。最初的是。是是一个，呃，百度的，或者和好几个大公司的人出来创业的，后来被阿里收购了，然后呢，它这里面有些指数。就是用的人比较多，很多人用它来做一些统计，所以的话权威比较比较有权威。好，再看一下，在我们这个地方里面，你可以看一下系统。系统里面现在你能看到的有4.0以下的嘛，可能有，但是极少了，对不对，都是4.0以上了吧，其6.0已经占1.76%了，对不对，那么也就是说我们最低版本选择我们这个。4.0，这没问题吧。

好，OK，点击往下一步。然后这个时候呢，我们就创建一个这个。下面这边有一个加这么一个一个空白的体，体这里是空的，体三没有。是吧，还有一个全屏的，还有一个就是有谷歌广告的APP。他这里有个地图的，还有默认带登录的，还有默认带侧滑的。好，还有不能用滚动的，滚动的是吧，其实我们呢，从头开始对不对，那么一般选的谁呀。空的是吧。点击下一步。那这个呢，是我们的提，我们点击完成。好。那接下来我们要实现这样的效果的话，我们接下来就要去做三个相对不均匀，然后就可以让它在中间显示，在这显示，在这里显示。对吧，好，我们来实现一下。好，那同学们在我们这个地方里面呢，点击进去，好，我们把它给写一下。

这些在这地方里面有一个pending bottom part left的它是什么？内边句，它的内边句其实就是这个内容，就比如说这个视屏幕，然后我们这里面有个控件。空间里面如果有内边距的话，那意思就是说，假如说我们这个是一个外面，这里面是一个布局，然后如果有内边距的话，就是空里面的内容，它和边是有一点什么距离，和顶部有距离，和底部有距离。好，那这个的话呢，那么这个就是我们的pending left。是不是，那么我们是不希望他有这样的效果，就把它什么删除。好，那么这个呢，可以留下，它有个好处，就是一点可以进到这里来，知道吧，这个你可以留着啊，但是你酸的也可以，这个酸也可以以前在。低版本是没有的，因为我是从这个安卓1.5开的程序员开始开发1.5，现在你看1.51.62.0是吧，这个2.12.22.3，然后3.03.13.2，然后3.3过后，好像好像慢慢就到4.04.04.14.2。

呃，4.34.44对吧，然后后来的话就5.0 5.0过后5.1，然后再好像是又在6.0。对吧，就这样子啊，就是中间有些小的版本啊，你说只要说说大的。好，那我们看一下，我们接下来就要把里面的这个给做一做。对不对，好，那么接下来我们来写一下了。把这个改为啊相对布局。那么在我们这方里面的话呢，相对布局里面注意了，要把它给。不。分裂性。然后宽呢，好，我们的是100DP高。

50我看啊，宽宽的话。嗯，我们我们可以先这样，到时候我们报他们再说，然后接下来我们把这个们呢，设置一个背景。那这个背景的话，去引用我们的刚才的这个图片。所以这图片呢，我们都可以把它什么图片不多，可以一次性把它拷贝过来。那拷贝过后，大家一般我们拷贝的是在去目录吧，注意了这个呢，一般这个目录里面它是没有对图片进行缩放，那我们一般的话还不不放在这里，一般放在job hdm录像对不对。好，那我们接下来创建一个什么目录？目录的话叫秋。A wal，然后就是HDPI，对不对？好，那如果大家对个单子不会写的话，一可以操作它，第二这里面一起对白都有是不是。不管它啊，这样的话呢，就可以把它给粘略过来了。

那接下来我们就要去这里面有一个图片叫LAVA1是吧，好，我们去把它给背景写一下，好，那这个时候我们看预览的话，可能呢，就是这样的一个效果，那我们要把它在底部吧，底部然后就是这个啊波在负状的底部，然后要水平方向居中啊，啊水平方向居中two，所以大家看到的是就这样的效果。对不对，看这样的效果，OK，看看这样效果，这一长就是这透明的地方也是啊，也是它的。好，那这个时候有了，过后同学们在我们地方里面呢，我们ID要写一下，有一会啊，就是我们要。ID话都是我们要用的，早要在这进行旋转好，我们ID就叫什么呢，就叫它。就那接下来有了过后我们再把它复制一下。

就是。这个呢，改不了啊。好，那这个时候图片。那图那有了过后大家看一下这个地方里面是大小我们不能一样了，所以的话呢，啊注意了，高应该变成90，这个呢要变成一百八对不对，好这个时候大家看到你看就这样的一个效果了。但是我们一会运行起来就很均匀了啊，这样本质也还不错是吧。好，接下来再把这个复制一下。好，大家这个数据怎么记呢？你看这是50~100，那么50。是吧，那么100是它的一倍啊，同样这里一样，你看90，那这90怎么来的，是在他计算加上40对吧，然后这个地方一倍。好。接下来三。那同样这里面也是加上50就变成多少啊140。

对吧，一百四一百四的话，这里面两倍都是是少二百八好，这里面的是三好，刚好它有这么一个规律啊，所以呢，就实现这样的一个效果。好，那有了后同学们，我们是把里面这张图片给最里面这个图片给做一做，但是在做之前大家注意啊，大家看好，我假如想点里面，假如以后我想点里面这个圈圈。现在是可以点的，但是你会发现。我点这里面进去被外面什么。所以以后我们就点击事件死活都点不了里面了。咋整呢？切换一下，大家注意这一点啊，包括你们去敲看盘，你肯定会遇到那么点，诶老师怎么不会点呢。被外面给什么给覆盖了，好，大家再看好，我再去点。里面当当当。当当当是可以点了，所以大家一定要注意，你看但是效果还是一样的呀，但是可能会被上面的覆盖掉，知道吧，因为在我们这个地方里面，大的它会把小的给什么覆盖掉，大家一定要注意啊，这个大的要把这个大的它会把小的给覆盖掉，知道吧。

啊，大家要注意这个事情好，所以我们呢移过来，接下来我们继续写，我们在。这个一字里面去把这个图片给添加一下。包括。然后图片引用一下。然后这个地方里面job里面的宏来看宏大家可以看一下，这默认这个图片，因为这个这个图片是不是一个正方形呢，而且是一个不是一个正方，是一个矩形，或者是叫长方形，对吧，长方形是属于矩形的一种，那这个时候它默认是左上方。那这时候我们希望它在窗体集中。对不对。好哪个啊，第一个就是。

Lay out lay out in是吧？再放句中OK，好，那如果大家觉得小的话，可以放大一点，这样的话呢，就很好看了，看到没有？好，那么这个时候呢，我们ID要写一下，因为我们一会啊，要去做它的一个点击事件，看到没有点击事件，所以ID要写一写。好，那么ID呢，我们就叫这个名字。好，那么这个时候呢，就搞定了。接下来我们要去做哪部分呢？这部分。这部分，那这个图片我们把它给复制过来，再改一改。好，那么这个地方里面呢，我们去到那个二里，那么在这个地方里面的话呢。不需要ID，然后也不要放弃，也不要居中，这时候我就要让他跑到底部来，对吧，好。底部了吧。

那底部过后这个时候要注意我距离底部有八个像素，距离左边有八个像素就可以了，Mark。底部有八个DP，然后距离左边。八个。这个时候呢，我们就可以知道这里有了，对吧，那有了后我们在这里面呢，就是图片要换一下。好，这里面是一个搜索的图片。对吧，好，我们是一个搜索的图片。那接下来有了过后，在这个地方里面，它是什么。是不是顶部水平方向居中了，好我们把它给复制一下，那这个时候复制过后，它就其实就没有我们的底部居中了，也没有什么对齐这些了，这三个就干掉了。然后让他水平居中。好。是不是啊，水方居中，这个有了，那距离顶部有多少啊，毛皮拓扑。

八个DP吧，我们都用八，八是一个吉利数字是吧，八发。你发我发大家发是不是。好在地方里面中间这个图片用什么呢，好用。啊抗对不对，是实现这样的一个效果，是不是挺好的。那接下来这边，那么如果我们去做这个图片特简单复制它一下，在它附上的右边就可以了，好，所以的话呢，我们最好点击它。用它来一复制，然后粘贴过来对吧。好，那这个地方里面的话呢，有了过后，哎呀，就把它在负窗体的什么右边这个为多少。Two。是不是跑到右边了，然后距离之前是左边的，现在变成多少啦，右边对吧？好，然后在地方里面呢，我们就要去优酷看一下这个图片，这个好。

这里面有一个买油库对吧。这不是优衣库是吧？好，那这个时候呢，我们就有了这么一张图片，对不对，大家一提到优衣库很来劲了是吧？优衣库那点事大家都知道是吧。好，那同学们在我们这地方里面就有这个图片，接下来在做外面就很简单了，我们把这哥们的复制一下看，好啊，复制一下跑到就把这个复一下跑到外面来。好，这时候他你看默认是在底部了吧。挺爽的，对不对，好，然后呢，这些图片引用一下，好，这个时候就是呃，我看一下有有几张图片啊。啊，有一些图片就是我们之前引导的一个圈。China。圈图一，是不是啊，这时候我们就有了这张图片吧。好，然后注意要写ID，为什么呢？因为我一会要有一张图片。在它的上边，所以在它的上面，然后在距离左边，然后这里面距离底部有点距离啊，所以要把它ID写上啊，ID写上然后这个地方里面就是啊跟它一样，那接下来把这个们复制一下，这个的话呢，改为二。

这个呢啊。然后它呢，不是底部了，但是这个们需要在它的，你跑默认跑到哪里去了，上面这里去了，看到没有对不对，这时候我们希望在他的之上。好。那么就是引用我们的显裸机，在它之上。这上后在距离左边有一点距离吧，我们的。这个left。的话，之前我们是已经设置了，但是不够力度不够大，对吧，35。

这样的话呢，刚好就到这里了。是不是还不错？啊。有点多了，对不对。农夫山泉有点多了。好，我们把它给33是吧，好一点点，到时候我们感觉不爽可以再调，对吧，接下来在这里面是有一个啊，这里再有一个这一个对不对，好接下来复制一下。好，这里面呢，就是圈结啊。好，代码格式画一下这个是三是吧？在谁的上面，在一的上面啊，在二的上面，这个呢是三对吧？然后这个呢，就是63。好，大家可以看一下，是跑到这里来了吧，接下来这里面就是什么呀，水平方向居中了吧，好把它给复制，然后它也不需要在谁的上面，真的是这个是是这个是。四但是这个呢，也不需要在写的上面，也不需要去左边这些是吧，好，只需要水平方向居中了吧，好。

哇塞诶，但是距离顶部还得要吧，对，有个八个DP。这个时候呢，OK了。是不是啊，就是这个效果了，好，那有的话，同学们接下来我们要做一个事情，就是这个不啦，那这个的话。不好做。是不是是不是我们把这个最好做啊好，那我们把这个复制过来。对吧，好复制过来，然后粘贴到这里，我们只需要让它在右边，在复转的右边就可以了，好，那这个时候搞定。好这边了，你看，然后这里面呢，是改为。啊，一这个1234567，第几个。第七就是就是大概是。第七啊，这图片是从一开始，没有从零开始。

好，那这个时候我们的ID应该是。七对吧，然后在底部，然后是这是距离右边了吧，好给大家看到的效果刚好OK。是不是OK，好，那么接下来有了过后呢，我们再要做一个事情，就是这张图片。这张图片那也就是在它的上面吧，好，那也就是基于它复制一下是不是可以了。是不是你会发现他做了过后就很简单了？好，那这个时候这里面是第第几呀，第五对吧。第六吧，第六对不对。这是第六，这个呢是六。然后它是最底部，然后这里面是第几啊第七好，那么这个时候right right，然后在副窗体的右边。

是不是搞定了吧，好，这个搞定了，那接下来最后一个，最后一个和我们这个是一样的呀。好，把它复制一下，你会发现比较简单。好。我们运行起来啊，我们做好运行起来就可以休息啊，啊这个是第几第几个，第五个，然后这是五五，然后在地方里面的话，第几啊第六是吧，然后这个是出窗体的右边对吧？好，然后这个是在窗体的右边。是吧，好，那这样的话呢，大家可以看一下是不是可以了，好那么就这样的话，我们实验看效果，如果你代码去选的是非常的辛苦啊，好，我们去把它运行起来，看看我们的劳共同的劳动成果了，好大看好运行起来。好，然后一起来。再看看我们的共同的期许。

并且带。密集起来。大家可以看一下啦。哇塞宿舍哇塞哇终于搞定了，好，同学们休息会。