由于项目需要，UI设计了一个锯齿形状的背景图，程序开发效果如下图：
这用到了Quartz2D绘图，我的思路是，画两个如下图的锯齿view：
然后两个view稍微重合一点，就是下边的那个view网上移动，把上边的那个view的下锯齿覆盖掉，不过结果却是让人失望的，如下图：
最后，我在下边的view上重新画了上边view颜色的锯齿view，如下图：
然后再把下边的那个锯齿view往上移动，正好把上面的那个view的下锯齿覆盖掉，就达到最终的效果图了，如
具体代码如下：
SawtoothView.h头文件代码如下：
// SawtoothView.h
//
// Created by HailongHan on 15/1/2.
// Copyright (c) 2015年 cubead. All rights reserved.
//
#import <UIKit/UIKit.h>
/**
* 锯齿view
*/
@interface SawtoothView : UIView
/**
* 设置波浪线背景颜色、波浪个数、波浪view的高度
*
* @param color 颜色
* @param topColor 顶部颜色
* @param count 波浪个数
* @param height 波浪高度
*/
- (void)setColor:(UIColor *)color topColor:(UIColor *)topColor waveCount:(int)count waveHeight:(CGFloat)height;
@end
SawtoothView.m代码如下：
//
// SawtoothView.m
// easymarketing
//
// Created by HailongHan on 15/1/2.
// Copyright (c) 2015年 cubead. All rights reserved.
//
#import "SawtoothView.h"
@interface SawtoothView (){
int waveCount;
UIColor *bgColor;
UIColor *viewTopColor;
CGFloat viewHeight;
}
@end
@implementation SawtoothView
- (instancetype)init
{
self = [super init];
if (self) {
self.backgroundColor = [UIColor whiteColor];
}
return self;
}
-(void)drawRect:(CGRect)rect{
#pragma mark - 第一步：获取上下文
//获取绘图上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
#pragma mark - 第二步：构建路径
if (waveCount <= 0) {
waveCount = 30;//默认30个
}
//单个波浪线的宽度
CGFloat itemWidth = kScreen_Width/waveCount;
//单个波浪线的高度
CGFloat itemHeight = 10;
//整个view的大小
if (viewHeight <= 0) {
viewHeight = 50;//默认50大小
}
//背景色
if (bgColor == nil) {
bgColor = [UIColor blackColor];
}
if (viewTopColor == nil) {
viewTopColor = [UIColor orangeColor];
}
//移动到起始点,从左上画到右上
CGContextMoveToPoint(ctx, 0, itemHeight);
for (int i = 0; i<waveCount; i++) {
int nextX = (i+1)*itemWidth;
CGContextAddLineToPoint(ctx, nextX - itemWidth*0.5, 0);
CGContextAddLineToPoint(ctx, nextX, itemHeight);
}
//右上移动到右下角
CGContextAddLineToPoint(ctx, kScreen_Width, viewHeight - itemHeight);
//右下角画到左下角
for(int i = waveCount+1;i > 0;i--){
int preX = (i-1)*itemWidth;
CGContextAddLineToPoint(ctx, preX - itemWidth*0.5, viewHeight);
CGContextAddLineToPoint(ctx, preX - itemWidth, viewHeight - itemHeight);
}
#pragma mark - 第三步：将路径画到view上
// CGContextSetRGBFillColor(ctx, 1, 0, 0, 1);
CGContextSetFillColorWithColor(ctx, bgColor.CGColor);
CGContextFillPath(ctx);
//开始画顶部的填充图
CGContextMoveToPoint(ctx, 0, itemHeight);
for (int i = 0 ; i<waveCount; i++) {
int nextX = (i+1)*itemWidth;
CGContextAddLineToPoint(ctx, nextX - itemWidth*0.5, 0);
CGContextAddLineToPoint(ctx, nextX, itemHeight);
}
CGContextSetFillColorWithColor(ctx, viewTopColor.CGColor);
CGContextAddLineToPoint(ctx, kScreen_Width, 0);
CGContextAddLineToPoint(ctx, 0, 0);
CGContextFillPath(ctx);
}
/**
* 设置波浪线背景颜色、波浪个数、波浪view的高度
*
* @param color 颜色
* @param topColor 顶部颜色
* @param count 波浪个数
* @param height 波浪高度
*/
-(void)setColor:(UIColor *)color topColor:(UIColor *)topColor waveCount:(int)count waveHeight:(CGFloat)height{
bgColor = color;
waveCount = count;
viewHeight = height;
viewTopColor = topColor;
[self setNeedsDisplay];
}
@end
最后在ViewController中调用代码：
//添加锯齿View
SawtoothView *sawtoothView1 = [SawtoothView new];
sawtoothView1.frame = CGRectMake(0, CGRectGetMaxY(titleLabel.frame) +10, kScreen_Width, 100);
[sawtoothView1 setColor:[UIColor warmGrayColor] topColor:[UIColor clearColor] waveCount:30 waveHeight:100];
[self.view addSubview:sawtoothView1];
SawtoothView *sawtoothView2 = [SawtoothView new];
sawtoothView2.frame = CGRectMake(0, CGRectGetMaxY(sawtoothView1.frame)-10, kScreen_Width, 200);
[sawtoothView2 setColor:[UIColor orangeColor] topColor:[UIColor clearColor] waveCount:30 waveHeight:100];
[self.view addSubview:sawtoothView2];
需要注意的是：SawtoothView2的frame的y的值为SawtoothView1的frame最大y值-10，这个10是锯齿的高度，覆盖掉就OK了
原文地址：http://blog.csdn.net/hanhailong726188/article/details/42345433
