前言 操作按钮常常需要设置视图圆角,比如注册页面的注册按钮。...它有什么作用 masksToBounds指在设置子layer在超出父layer时是否被裁剪,YES表示裁剪,NO表示不裁剪,默认是NO;通常在通过设置layer.cornerRadius属性实现圆角效果时要设置...masksToBounds和clipsToBounds是不同的,前者指子layer层在超出父layer时是否被裁剪(masksToBounds是CALayer的属性),而后者指子view在超出父view...表格视图(UITableView)主要用来罗列展示数据项如果数据量很大,那么表格中将需要同样多的cell视图来显示,而cell的大量创建和初始化会造成内存压力,影响界面的流畅性,因此对表格视图的加载优化十分重要...⑤ 尽量手动Drawing视图提升流畅性,而不是直接子类化UITableViewCell,然后覆盖drawRect方法,因为cell中不是只有一个contentview。
在这里插入图片描述 I 、 iOS设置视图的cornerRadius属性失效的解决方案 1.1 解决步骤 1、尝试设置_numberLab.clipsToBounds = YES;2、尝试设置 [self.numberLab...它有什么作用 masksToBounds指在设置子layer在超出父layer时是否被裁剪,YES表示裁剪,NO表示不裁剪,默认是NO;通常在通过设置layer.cornerRadius属性实现圆角效果时要设置...masksToBounds和clipsToBounds是不同的,前者指子layer层在超出父layer时是否被裁剪(masksToBounds是CALayer的属性),而后者指子view在超出父view...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath...*maskLayer = [[CAShapeLayer alloc] init]; maskLayer.frame = self.bounds; maskLayer.path = maskPath.CGPath
endPoint; /* 渲染风格 iOS中只支持一种默认的kCAGradientLayerAxial,我们无需手动设置 */ @property(copy) NSString *type; 用如下代码创建一个度过视图的效果...三、CAReplicatorLayer CAReplocatorLayer是拷贝视图容器,我们可以通过它,将其中的子layer进行拷贝,并进行一些差异处理,其中常用属性方法如下: //拷贝的次数...四、CAShapeLayer CAShapeLayer是图形layer层,我们可以自定义这个层的形状。.../ @property(copy) NSString *fillRule; //设置线条颜色 @property(nullable) CGColorRef strokeColor; //设置线条的起点与终点...kCATruncationEnd; 截断中间 NSString * const kCATruncationMiddle; */ @property(copy) NSString *truncationMode; /* 设置文字对齐模式
CALayer是个与UIView很类似的概念,同样有layer,sublayer......它根据父动画组的持续时间,指定了开始播放动画的时间。...默认的是 0.0.组 TimeOffset 如果一个时间偏移量是被设定,动画不会真正的可见,直到根据父动画组中的执行时间得到的时间都流逝了。...#define定义的常量 kCATransitionFade 交叉淡化过渡 kCATransitionMoveIn 新视图移到旧视图上面 kCATransitionPush...新视图把旧视图推出去 kCATransitionReveal 将旧视图移开,显示下面的新视图 2.用字符串表示 pageCurl 向上翻一页
* 其他 下面详细讲下drawRect优化和图片优化 drawRect优化 * 首选使用CAShapeLayer替代drawRect,在大多数场景下,都可以使用CAShapeLayer替代drawRect...\* CAShapeLayer不会出现像素化,通过矢量图绘制而不是bitmap \* CAShapeLayer有很多属性可以方便的做动画,比如使用strokeStart和strokeEnd可以做出了很漂亮的动画...视图或图片的点数(point),不能换算成整数的像素值(pixel),导致显示视图的时候需要对没对齐的边缘进行额外混合计算,影响性能。...* 字节对齐,如果数据没有字节对齐,Core Animation会再拷贝一份数据,进行字节对齐,也是十分消耗CPU。...常用优化手段 * 减少视图数量和层次,可把多个视图预先渲染为一张图片 * 不要让图片和视图超过GPU可渲染的最大尺寸 * 视图不透明 * 防止离屏渲染 OpenGL 中,GPU 屏幕渲染有以下两种方式
饼状图.gif 大家都知道这是通过 CAShapeLayer 和 CABasicAnimation 结合起来实现的,可是其中还是有需要注意的地方,实现的步骤大致如下: 绘制一个 CAShapeLayer...不用指定大小,_pieLayer = [CAShapeLayer layer]; 绘制三个 彩色的扇形CAShapeLayer 并加载在 _pieLayer 上。...绘制一个 遮盖住 这三个 CAShapeLayer 的 CAShapeLayer 并赋值给 _pieLayer.mask ,我们都知道 maskLayer的颜色是不会印象视图的显示的,视图的显示只跟maskLayer...cellModel.ClickCount,cellModel.likeCount]; self.subTitle.textColor = GrayTextColor; } 3.UIButton中文字图片对齐方式的设置...Paste_Image.png 不过这里是另一种实现思路,也挺不错的:iOS在cell中使用倒计时的处理方法 6.列表和网格视图的相互切换 ?
最后需要完成的效果: 首先要做的就是用CAShapeLayer画一个圆。...这里先创建一个路径,把圆的中心放在视图的中心,半径设为100,然后设置起始角度和结束角度,并将clockwise设为true。...这里改变strokeEnd的时候需要放在主线程,否则视图不会发生改变。...创建一个UILabel让VC持有,文字为Start,文字居中对齐,字体大小为加粗32号,字体颜色为黑色。...percentageLabel为视图的子view,设置好label的frame,并将其放在视图中心。
iOS开发CoreAnimation解读之二——对CALayer的分析 一、UIView中的CALayer属性 1.Layer专门负责view的视图渲染 每一个UIView的对象中都有一个...2.自定义view默认layer属性的类 UIView是很多视图类的父类,根据功能不同,会分出UIImageView,UIScrollerView,UITableView等,CALayer...6.CAShapeLayer CAShapeLayer可以让我们在layer层是直接绘制出自定义的形状。 7.CATextLayer CATextLayer可以通过字符串进行文字的绘制。...8.CATiledLayer CATiledLayer类似瓦片视图,可以将绘制分区域进行,常用于一张大的图片的分不分绘制。...当你设置了Layer的内容后,例如设置了一张图片,内容的尺寸不一定会刚好和layer的尺寸合适,我们可以对其位置的调整,使其达到我们想要的效果,contentsGravity属性决定了内容对齐与填充方式
同时对横竖方向的CAShapeLayer做动画,就会出现如图所示的效果。...设置渐变图层的 mask(遮罩层)为一个CAShapeLayer maskLayer = [CAShapeLayer layer]; maskLayer.strokeColor = [...(3) 开始弹性动画,设置子视图的终点,X坐标跟曲线上点的X坐标一样,Y坐标的值跟曲线上点的Y坐标一样。 ,在 completion 中对 CADisplayLink定时器暂停。...(4) 在弹性动画的执行期间,定时器会不断的获取某一时刻的所有的子视图的 坐标 ,并修改 曲线上的点的位置的坐标,并根据 currentLinePathForWave 这个方法绘制出 渐变图层的 mask...得到每一个环外小圆的中心点坐标后,根据该点的X坐标值跟当前页面中心点的X坐标进行比较,确定小圆尾部的线的朝向以及字体的对其方向(在左侧字体向左对齐,在右边字体向右对齐) 环外圆点和直线使用CoreGraphics
前言 有时你会看到很多镂空的试图或者是镂空视图的动画效果,感觉很酷炫,其实只要掌握其中实现的原理,想实现怎样的效果就能实现怎样的镂空效果。 原理解析 UIView的maskView属性。...使用自定义形状的CAShapeLayer作为mask也可以达到使图层显示出镂空的效果。同样的,图层显示出来的区域是 CAShapeLayer的外形。...(2) 当CAShapeLayer的backgroundColor不是clearColor的时候,CAShapeLayer的显示区域就是它本身的Frame,跟它的path区域就没关系了。...(3) CAShapeLayer的path区域不能超出CAShapeLayer的Frame,超出部分不会对图层的显示起作用。 例子 叶子状进度条 ?...的path动态绘制实现的,先了解更多的可以看我的其他两篇文章: 绘图-视图遮罩MaskView的使用 绘图-类似百度外卖波浪效果的实现与关键点解析 叶子状裁图 ?
开发者需要为其添加一些规则进行约束,这些规则大致包括2类: 第1类 与父视图之间位置关系的规则: 此类规则包括在父视图中的居中、左对齐、右对齐、上对齐、下对齐等。...public static final int ALIGN_PARENT_LEFT //约束当前视图与父视图上侧对齐 public static final int ALIGN_PARENT_TOP...//约束当前视图与父视图上侧对齐 public static final int ALIGN_PARENT_RIGHT //约束当前视图与父视图下侧对齐 public static final int...ALIGN_PARENT_BOTTOM //约束当前视图与父视图居中对齐 public static final int CENTER_IN_PARENT //约束当前视图与父视图水平居中 public...static final int CENTER_HORIZONTAL //约束当前视图与父视图垂直居中 public static final int CENTER_VERTICAL //约束当前视图与父视图起始对齐
先上个示例代码,将一个视图往上移动一段距离: ?...可与上面两个属性组合出不同效果。 timingFunction 动画的运动是匀速线性的还是先快后慢等,类似UIView动画的opitions。...通过与代理方法结合使用,可以用多段动画组合成一个完整动画。...有三种方式:1、直接使用UIBezierPath的方法;2、使用CoreGraphics绘制;3、利用CAShapeLayer绘制。 示例代码如下,绘制一个右侧为弧型的视图: ?...进度条.gif 上图这样的视图是用UIBezierPath用多个CAShapeLayer制作出来的,而动画效果只需要改变进度的layer的strokeEnd和修改下面代表水面进度的视图位置即可。
Image、FlatButton以及Column这三个控件,与父容器Row之间存在一定的间距,因此我们还需要在最左边的Image与最右边的FlatButton上包装一层Padding,用以留白填充。...与上半部分类似,这两个文本与父容器之间存在些间距,因此在Column的最外层还需要用Padding控件给包装起来,设置父容器间距。...同样地,通常情况下这两个文本并不能完全填满下部空间,因此我们还需要设置对齐格式,即按照水平方向上居左的方式对齐。...Flutter提供了组装与自绘两种自定义Widget的方式,来满足我们对视图的自定义需求。 以组装的方式构建UI,我们需要将目标视图分解成各个UI小元素。...无论是组合还是自绘,在自定义UI时,有了目标视图整体印象后,我们首先需要考虑的事情是如何将它化繁为简,把视觉元素拆解细分,变成自己立即可以着手去实现的一个小控件,然后再思考如何将这些小控件串联起来。
---- 在UIView中有一个maskView属性,我们可以利用这个属性很方便的做出一些有意思的效果 这个属性在iOS8之后开始使用,用来表示视图的遮罩。 ?...当一个view设置了maskView后,那么它只会显示与maskView重叠部分,即在此图中只会显示maskView部分(maskView跟view没有层次,可以理解maskView嵌在View里) 对于...maskView与View重叠部分怎么显示 如果你的maskView 就是不起作用,请设置一下 maskView的背景颜色。...滑动.gif 此处只做思路的介绍,查看具体源码可以参看这篇文章: http://www.jianshu.com/p/f0c198e8de91 当然也可以结合CAShapeLayer用来实现自己想要的任意效果...path); [shapeLayer setPath:path]; CFRelease(path); self.layer.mask = shapeLayer;//layer的mask,顾名思义, } 视图初始化的时候调用即可
以下是源码解析 使用 Core Graphics 和 定时器 实现环形进度动图 圆环进度.gif 核心源码 # 使用 [self setNeedsDisplay]; 会触发drawRect 方法达到刷新视图的效果...CGPointMake(maxWidth/2.0, maxWidth/2.0); CGFloat radius = maxWidth/2.0-_strokeWidth/2.0-1;//留出一像素,防止与边界相切的地方被切平...} } 使用 CAShapeLayer 和 CABasicAnimation 实现环形进度动图 进度.gif 核心源码 # 橘红色的背景 CAShapeLayer *shapeLayer11...=[CAShapeLayer layer]; UIBezierPath*path12=[UIBezierPath bezierPathWithOvalInRect:CGRectMake(89, 299,...*shapeLayer1 = [CAShapeLayer layer]; UIBezierPath *path1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake
老司机带你走进Core Animation 之图层的透视、渐变及复制 老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制 ---- 呐,老司机之前说过会来讲CALayer...由于老司机这个想起来啥说啥的特点,CALayer与UIView的一些关系以及CALayer的一些重要属性,早在老司机CoreAnimation系列第一章里面就已经做了很系统的介绍。...重点是这里有一个初学者经常会犯的错误,同学们在绘制曲线的时候经常会以layer在父图层中的相对位置去绘制曲线,这是错的!!!应该以layer自身的坐标系划线。...这里介绍一下分别是如何判断的 kCAFillRuleNonZero 从该点向任意方向画一条射线,若顺时针穿过该射线的条数与逆时针穿过该射线的条数不相等,则表示该点在区域内部,否则在外部。...这个属性指的是实线与虚线长度交替的数组。注意奇数位为实线,偶数位为虚线,单位像素。系统会按照给定数组自动重复设置虚线。 lineDashPhase这个属性是告诉系统从多少开始计算这个距离。
对齐方式:RelativeLayout支持多种对齐方式来控制子视图的位置,包括与父容器对齐(如android:layout_alignParentTop)、与其他视图对齐(如android:layout_toRightOf...textView.setLayoutParams(textParams); 三 RelativeLayout常见属性及方法 常见属性: android:layout_alignParentTop:将视图与父容器的顶部对齐...android:layout_alignParentBottom:将视图与父容器的底部对齐。 android:layout_alignParentLeft:将视图与父容器的左侧对齐。...android:layout_alignParentRight:将视图与父容器的右侧对齐。 android:layout_centerVertical:在垂直方向上将视图居中对齐。...alignWithParent(boolean align):设置是否将视图与父容器边界对齐。 alignBaseline(int anchor):使视图的基线与指定视图的基线对齐。
android:layout_alignParentBottom 属性说明:设置此视图的底部边缘是否与父视图的底部边缘对齐。 是否对齐父底部。...android:layout_alignParentLeft 属性说明:设置此视图的左边缘是否与父视图的左边缘对齐。 是否对齐父左侧。...android:layout_alignParentRight 属性说明:设置此视图的右边缘是否与父视图的右边缘对齐。 是否对齐父右侧。...android:layout_alignParentStart 属性说明:设置此视图的起始边缘是否与父视图的起始边缘对齐。 是否对齐父起始侧。...android:layout_alignParentEnd 属性说明:设置此视图的结尾边缘是否与父视图的结尾边缘对齐。 是否对齐父结尾侧。
ViewGroup类是布局(layout)和视图容器(View container)的基类,此类也定义了ViewGroup.LayoutParams类,它作为布局参数的基类,此类告诉父视图其中的子视图想如何显示...” android:layout_alignParentTop 控件的顶部与父控件的顶部对齐; android:layout_alignParentBottom 控件的底部与父控件的底部对齐; android...:layout_alignParentLeft 控件的左部与父控件的左部对齐; android:layout_alignParentRight 控件的右部与父控件的右部对齐; 2、相对给定Id控件,例如...ID的控件左边缘对齐; android:layout_toRightOf 控件的左边缘与给定ID的控件右边缘对齐; android:layout_alignBaseline 控件的baseline与给定...ID的baseline对齐; android:layout_alignTop 控件的顶部边缘与给定ID的顶部边缘对齐; android:layout_alignBottom 控件的底部边缘与给定ID的底部边缘对齐
控件与控件之间的约束,控件与父视图之间的约束。...to Superview:与父视图左边界的约束 Trailing Space to Superview:与父视图右边界的约束 Top Space to Superview:与父视图上边界的约束 Bottom...Space to Superview:与父视图下边界的约束 Widehs Equally:视图等宽约束 Heights Equally:视图等高约束 2、网上的一个很简单的约束例子 了解了上面的几种约束...3距离父视图左边20px,右边20px (5)1和2水平间距20px (6)1与3垂直间距20px (7)1和2距离父视图上边距50px (8)3距离父视图下边距20px (9)3与1和2的高度一样 通过上面的约束...Centers:控件垂直水平对齐 Horizontal Center in Container:控件与其父视图水平中心对齐 Vertical Center in Container:控件与其父视图垂直中心对齐
领取专属 10元无门槛券
手把手带您无忧上云