前言 操作按钮常常需要设置视图圆角，比如注册页面的注册按钮。...它有什么作用 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元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
