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

標籤：ios   quartz2d   鋸齒形狀   2d繪圖   

由於項目需要，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了

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