首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS设置圆角圆形图片

方方正正的样式往往会显得很生硬,而圆角的样式会让人产生别样的亲切感,现在越来越多地用到圆角,诸如用户头像之类的图片也大都用圆形来显示,本文就介绍如何设置按钮、文本框的圆角以及制作圆形的图片。...先来看看效果图: 如效果图所示,我们制作了一个圆形的头像,一个完全半圆的圆角按钮,一个小圆角的按钮,以及一个带边框且边框为圆角的label。...对于圆形的头像,要制作正圆,我们需要首先设置UIImageView的高宽的一致的,然后我们设置其圆角角度为高度除以2即可,相当于90度,代码如下: // 圆形头像 UIImageView *avatarImgView...SCREENWIDTH - 75) / 2, 150, 75, 75)]; avatarImgView.image = [UIImage imageNamed:@"icon"]; // 图片做圆形...,我们直接设置圆角的圆度为一个数即可,数的大小决定了按钮圆角的样式,这里我们设为4: // 小圆角的按钮 UIButton *btnTwo = [[UIButton alloc] initWithFrame

1.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS编程101:如何创建圆形头像和圆角图片

    这篇短文中,我们将探讨CALayer类,以及如何运用它来创建圆形图像或圆角图像。 您可能并没有听说过CALayer类。但是,如果你曾经创建过应用程序,那么你应该以某种方式使用过它。...layer对象提供了多种属性,使用它们来控制视图的可视内容: 背景颜色 边框和边框宽度 阴影颜色,宽度等 Opacity(不透明度) 圆角半径 Corner radius就是我们用来绘制圆角圆形图像的属性...创建圆形用户头像 接下来,让我们看看如何通过改变圆角半径,使用户头像转换成一个圆形图像。...所以上面的第一行是设置layer对象(CALayer类的一个实例)的圆角半径。将方形图像变成圆形图像,半径应设置为UIImageView宽度的一半。例如,如果方形图像的宽度是100像素。...创建圆角图片 你可以使用同样的方法来创建圆角图像。关键是要改变圆角半径,并将其设置为其他值。

    2.1K20

    Android将Glide动态加载不同大小的图片切圆角圆形的方法

    @aar' compile 'com.mcxiaoke.volley:library:1.0.8' } 好了,以上就是Glide动态加载图片的方法,下面开始本文的正文: 需求 Glide下载图片并切圆角圆形...,但图片有大有小,图片不能改变,切圆还好说,但是切圆角就会发现图片小的会比图片大的要圆 搜一下 ” Glide动态加载圆形图片跟圆角图片 ” 就会出现很多文章,但这些都不能解决上面的问题 怎样能 Glide...动态加载不同大小的图片切圆形图片跟圆角图片呢?...解决很简单 既然是图片大小不一致而导致图片切出来不一样,那就把图片变的一样大小不就可以吗 申明一下我的代码也是在Glide动态加载圆形图片跟圆角图片搜出来的代码基础上修改的....<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="<em>圆形</em>图片

    3.5K20

    Border-radius 50% vs 100%

    image.png 通常我们都是用 CSS 的 border-radius 属性实现圆形:先画一个方形,然后将它的 border-radius 设置成50%。但是为什么偏偏是50%呢?...我从来没有思考过这个问题,只是单纯地认为把顶角的半径设置成方形的高度或者宽度的一半就可以得到一个圆形。 这是一个 150px x 150px 大小的方形,将它的四个角的半径都设置成 50%。...根据 W3C border-radius 的规范定义,如果 border-radius 的值是百分比的话,就是相对于 border box 的宽度和高度的百分比。...image.png border-radius 的工作原理 但是有时候我看到有的人会用 border-radius: 100%; 实现圆形的效果,在前段时间的一个项目中我想都没想就这么使用了,看起来和...如果左上角的圆角半径被设置成了100%,那么圆角就会从这个方形左下角跨到右上角,相当于把圆角半径设置成为150px(也就是方形的大小)。

    1.1K10

    【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )

    文章目录 一、盒子模型圆角边框 二、代码示例 1、代码示例 - 正常矩形边框 2、代码示例 - 圆形边框 3、代码示例 - 圆角矩形边框 4、代码示例 - 综合对比示例 一、盒子模型圆角边框 ---...像素数值 : 设置一个 像素值 , 如 : 50px ; 百分比数值 : 设置一个 百分比数值 , 如 : 50% ; 在网页设计中 , 大量用到了圆角边框 , 如 : 购物车上的数字 : 购物车上的浮动数字...pink; } 正常矩形 展示效果 : 2、代码示例 - 圆形边框...如果 盒子模型 高度 = 宽度 , 并且 圆角矩形 的 圆角半径 为 50% 或者 高度/宽度 的一半 , 则该圆角矩形 表现就是一个圆 ; 代码示例 : <!...= 宽度 , 并且 圆角矩形 的 圆角半径 为 高度 的一半 , 则该圆角矩形 表现就是一个正常的圆角矩形 , 左右两侧是圆角 ; 代码示例 : <!

    2.3K20
    领券