05.尚硅谷_Fresco_例子_圆形和圆角图片.avi原创

好，接下来呢，我们讲解第三个例子啊，圆形和圆角图片，首先呢，我们看一下这个运行的效果啊。这个呢，就是我们最终啊运行的效果，点击这个圆形和圆角。这里面进入这里面，上面是一个图片啊，下面呢，是这个要设置这个圆形图片这个按钮和这个设置圆角的按钮，点击设置圆形按钮，诶加载回来这个图片之后，将这个图片啊设置成圆形的。那这个圆角图片什么样的呢？诶一点击这个圆角，看这个四个角就变成这个圆弧形的了啊同时呢，你其实你还可以设置这个，每个圆弧这个大小都不一样，都可以同时这个背景色设置这个红颜色啊，这个我们可以设置啊，也可以不要，同时这个边框啊，这个蓝色的边框，诶这也是我们设置上去的啊，这个是也可以选择不要啊接下来呢，我们就开始实现这个呃，这个代码，那么这个布局啊啊同样我们还是不画了啊，我们直接粘贴一下啊，非常非常简单嘛，下面是一个t bar中间呢这一块是这个，呃，一个这个simple啊啊下面是分别是两个button啊，我就不画了。

找到我们这个代码啊，圆形和圆角又一个inent里面传一个三下文。卡activity，点接下来里面呢，来一个卡circle。And。Activity。二加回车启动跳转，将你探的进来，创建一下这个。牛街牛。

这个呢，就是这个啊，圆形圆角页面啊进来进来之后呢，我们把这个布局啊粘过来，布局找到这。看A，看C。这看那我们在啊对折代码啊，再看一下这布局整体呢，是一个这个线性布局啊，垂直方向的下面呢，这个是这个t bar啊也是它啊，再往下呢，就是这个simple啊这张图片，这也是free啊啊再往下面分别是两个button是圆形图片和圆角图片。嗯，好，接下来呢，我们，嗯，对这个。对象啊，View的对象进行一下处理，找到这个界面。Out shift加s generate生成一下。

然后呢，这里面看看button button暂时不要。和分下。顺手画一下标题，Nit奥加。Set test这个名称是什么呢？看一下圆形和圆角图片。啊，这是标题啊，标题处理完之后，接下来就是你点击这个设置圆形图片，那么这张图片啊，我要用这个采用圆形的方式啊去设置，要是点击这个圆角，那么是采用圆角的方式去设置啊，那分别处理一下两个button艾啊click。里面查一个r.id.BT fris卡。我们看一下这个ID。

第一个circle。VID粘贴一下click。里面传一个这个view。好，这是搞定一个，接下来下一个弹下。这个呢是设置圆形图片。下一个呢是设置圆角图片。啊，设置圆角图片，那接下来啊，在写代码之前啊，我们先看一下这个官网上啊，这个也是FS卡啊，他给我们提供的这个啊样例，包括这个圆角啊，圆圈啊啊等等进行设置啊进行设置。

啊，你看这些代码详细代码啊都有啊，这里面呢，我就不带大家读了啊，看一下我们给大家提供好的这个代码。首先呢，是这个圆形图片啊，你就直接粘过来就可以了啊，那在里面先看一下大家让大家分析一下啊，你可以从下往上看啊，首先呢，它需要的是加载一张图片啊，Set这个em image URL，也就是这个SDV啊，你当前这个view，那么这个UR啊，UI是怎么生成的呢？UI是这啊UI pass，这个就是这张图片的这个网络路径啊，拿后它拿到它之后啊，其实你就能设置这张图片了，那么怎么将这张图片设置成这个圆形图片呢？你需要对它进行进一步的修改啊，那修改它的前提是首先要有这么一个build啊generate啊builder拿到这个builder之后啊，builder.set round PS啊，也就是圆形的参数设置啊，那圆形参数设置里面需要传递一个palms啊，也是参数，具体这个圆型设置什么样的啊，你要是纯就是个。

行，那就是running palms there as磁口啊，就直接搞定了啊，同时别忘了把它传递到这个啊，Send hurricane啊，Hurrica这里面啊就可以了，那接下来呢，我们实现一下这个代码啊，设置圆形图片。到这同样首先拿到这个对象。第2SET em image ul啊，那就是U啊，需要一个。这个U，我们把它变成这个啊，统一的全局的，那就是uri等于uri PS里面传递这个图片的路径啊，我们复制一下这个路径。

啊，这也是这个图片的路径啊，正常情况下。这就可以了，把它变成全局的out shift的加F啊，就能加载一张图片了，那么我要想将这张图片设置成圆形的，那你还需要进一步的一些啊处理，首先呢，你有一个三瑞。Builder，创建一个builder里面呢，传一个resource get resource。二加灰色拿到这个build。将它变成全局的啊，全局的拿到build之后，Build。点盖上。点set。G。

Round啊，Palms里面呢，需要一个palms。A me，然后呢？后面别忘了来一个builder。啊，贾菲特生成这个hi瑞Y啊瑞Y，那么这个我们需要对它进行进一步的设计。啊。RO。Run palms for吗？Center啊radious，这就是设置一个圆角啊，圆角的大小，我们再来一个5CF啊，接下来呢，对这个palms进行进一步的设置啊，可设置也可以不设置啊点好这个呢，其实我们这个是圆呃圆形图片啊，那这个呢是呃设成圆角了，那我们把它设置成这个圆形的啊直接。

As circle啊就搞定了，下面的那个才是圆角的啊，这就是设置圆形。圆形图片。啊，这个参数呢，将这个图片设置成圆形的，然后得到一个hiriy，啊，那么怎么把这个huriy设置到这里面呢？这有一个方法，点that还Ricky，将它传进来。这样呢啊，就将这个图片啊配置好了，配置好之后呢，我们运行一下啊，看看效果能不能实现。啊，找到这个F卡。然后第三个圆形和圆角，点击第一个button，哎，这样呢，就加载一张啊圆形的图片啊，下面呢，我们开始设置这个啊圆角的图片啊，那设置之前呢，我们还是先看一下，带大家看一下这个代码。

这个是圆角的图片啊，这同样上面呢有这个图片的URL地址啊，接下来呢，还是有这个builder，这都是一样的，往下面下面这也是同样同样的去设置这加载这张图片啊，而这个地方呢，还是设置这个啊healthy hurricane啊hurricane通过这个running palms，也就是圆形的参数palms啊那跟上一个哪个地方有区别呢啊，才能把这张图片变成这个圆形的啊，圆角呢，其实就是这个palm这个参数啊，Palm参数也是刚才写错了，那地方啊，就是running palms.from circle run啊设这个圆角啊，然后下面这个地方呢，是设置这个是否有覆盖物，也就是背景的一个红颜色啊，让它有没有，你不设置也可以，下面这个呢，是设置这个边框啊，边框呢这个是啊五。

呃，再往下呢，是这个是否设成圆形啊，这你要是设成圆形，那么你就看不到这个啊圆角的效果了啊圆角效果好，接下来呢，我们还是先写一下这个代码。等这。第一步还是从这开始写啊设置。UU啊，这图片的路径呢啊，跟上一个路径是一样的啊，这都是加载图片。加载图片之后啊，接下来正常应该创建这么一个builder对吧？哎，那么就拿到这个builder，这个共用一个。build.set。Round PAL啊，圆形的参数设置里面传递一个pals，那么如果想用这么一个，那也可以把它变成全局的啊。

拿到它之后。第builder啊，加会啊啊这个是还啊hurriy好一点，那么hurriy同样用这个将它设置一下set。其实写到这是不是这个圆圆角和上面这个圆形啊，都一样啊啊，那么哪个地方不一样呢？接下来哎，就是这个。帕等于round。啊palms.from4口这个圆角，那么圆角这里面设置成啊50大小啊50，你设置60啊也行啊，都没问题，这样呢，其实就有那个圆角了，我们可以预习一下看看效果。

点击这个FS。第三个。哎，点击下面那个。看正常的这张图片就已经有这个圆角了啊，那么我还还要设置什么呢？比如说我要设置这个，大家看看一下这地方，我设置的它覆盖物啊，也就是覆盖层，最后底层那个啊红颜色那也可以是晒的这个over overlay color啊，同时呢，你可以晒这个棒子啊，也就这个边框啊都行啊，我给它粘过来带着大家看一下这个效果，看这。啊，这个是啊，啊帕斯好，那我们看一下跟上一次有什么区别。

来到这个F卡。圆形圆角啊，点击圆角看后面有一个这个红颜色的背景啊，你看这个red light吧，啊背景是，然后呢，包括这个边框啊，也就是个蓝颜色这个边框啊，它是这个啊5DP啊5PS啊五个像素啊好，那么这个呢，就实现了这个圆角啊和圆形图片。