IOS-自訂鋸齒形背景view，使用quartz2d

IOS-自訂鋸齒形背景view，使用quartz2d

由於項目需要，UI設計了一個鋸齒形狀的背景圖，程式開發效果如：

<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+1eLTw7W9wctRdWFydHoyRLvmzbyjrM7StcTLvMK3ysejrLutwb249sjnz8LNvLXEvuKz3XZpZXejujwvcD4KPHA+PGltZyBzcmM9"http://www.2cto.com/uploadfile/Collfiles/20150104/20150104091147176.jpg" alt="\">

然後兩個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

/**
* 鋸齒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 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 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了