(7/18)重學(xué)Standford_iOS7開(kāi)發(fā)_視圖、繪制、手勢(shì)識(shí)別_課程筆記

2019-11-14 18:46:28

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

第七課：

　　1、View

　　　　一般來(lái)說(shuō)，視圖是一個(gè)構(gòu)造塊，代表屏幕上一塊矩形區(qū)域，定義了一個(gè)坐標(biāo)空間，并在其中繪制及添加觸控事件等。

　　　　①視圖的層級(jí)關(guān)系

　　　　　　一個(gè)視圖只能有一個(gè)父視圖，可以有多個(gè)子視圖

1 - (void)addSubview:(UIView *)aView; // 父視圖添加子視圖 2 - (void)removeFromSuperview; // 子視圖從父視圖移除自己

　　　　②UIWindow

　　　　　　UIView的頂級(jí)視圖：一般情況下，iOS應(yīng)用程序中只有一個(gè)UIWindow，指當(dāng)前顯示的屏幕內(nèi)容。

　　　　③UIView的初始化

　　　　　　a.從storyboard中初始化：awakeFromNib

　　　　　　b.代碼初始化：alloc initWithFrame:

- (void)setup { ... }- (void)awakeFromNib { [self setup]; }- (id)initWithFrame:(CGRect)aRect{    self = [super initWithFrame:aRect];    [self setup];    return self;}

　　　　④與視圖相關(guān)的類

　　　　　　a.CGFloat

　　　　　　b.CGPoint:(CGFloat)x,(CGFloat)y

　　　　　　c.CGSize:(CGFloat)width,(CGFloat)height

　　　　　　d.CGRect:(CGPoint)origin,(CGSize)size

　　　　⑤坐標(biāo)系統(tǒng)

　　　　　　a.像素與點(diǎn)的概念：每個(gè)View都有一個(gè)只讀屬性contentScaleFactor，用以標(biāo)識(shí)一個(gè)點(diǎn)包含多少像素

　　　　　　b.坐標(biāo)系統(tǒng)屬性：（CGRect)bounds,(CGPoint)center,(CGRect)frame

　　　　　　　　對(duì)于View B:　　bounds = ((0,0),(200,250))

　　　　　　　　　　　　　　　　frame = ((140,65),(320,320))

　　　　　　　　　　　　　　　　center = (300,225)

　　　　　　　　此處理解視圖可以在父視圖中旋轉(zhuǎn)的概念。

　　　　⑥視圖的創(chuàng)建

　　　　　　storyboard：drag

　　　　　　code：alloc initWithFrame （直接使用init默認(rèn)初始化為frame = CGRectZero）

1 CGRect labelRect = CGRectMake(20, 20, 50, 30);2 UILabel *label = [[UILabel alloc] initWithFrame:labelRect]; 3 label.text = @”Hello!”;4 [self.view addSubview:label];

　　　　⑦自定義視圖

　　　　　　通過(guò)實(shí)現(xiàn)- (void)drawRect:(CGRect)aRect; 方法繪制內(nèi)容，aRect指需要優(yōu)化繪制的區(qū)域，與視圖最終性能有關(guān)（此處不作要求）

　　　　　　注意：drawRect：方法不能主動(dòng)調(diào)用，若需要重繪，可以調(diào)用- (void)setNeedsDisplay;或者- (void)setNeedsDisplayInRect:(CGRect)aRect;，系統(tǒng)會(huì)在合適的時(shí)間調(diào)用drawRect:

　　　　　　a.drawRect的實(shí)現(xiàn)過(guò)程

　　　　　　　　使用CoreGraphics： *獲取繪制內(nèi)容的上下文

　　　　　　　　　　　　　　　　　　*創(chuàng)建繪制路徑（UIBezierPath）

　　　　　　　　　　　　　　　　　　*設(shè)置繪制屬性（color，font，textures，lineWidth，linecaps）

　　　　　　　　　　　　　　　　　　*描邊（strok），填充（fill）等

　　　　　　b.UIBezierPath的使用

　　　　　　　　UIBezierPath封裝好了上下文內(nèi)容（上下文：指繪制的位置，內(nèi)容等信息）

　　　　　　　　UIKit調(diào)用DrawRect之前會(huì)處理好上下文內(nèi)容，需要獲取當(dāng)前上下文內(nèi)容時(shí)使用：CGContextRef context = UIGraphicsGetCurrentContext();

UIBezierPath *path = [[UIBezierPath alloc] init];//創(chuàng)建//繪制路徑[path moveToPoint:CGPointMake(75, 10)];[path addLineToPoint:CGPointMake(160, 150)];[path addLineToPoint:CGPointMake(10, 150]);//閉合路徑[path closePath];//設(shè)置描邊和填充[[UIColor greenColor] setFill];[[UIColor redColor] setStroke];//描邊和填充[path fill]; [path stroke];

//其他用法 path.lineWidth = 2.0;//設(shè)置繪制路徑寬度UIBezierPath *roundedRect = [UIBezierPath bezierPathWithRoundedRect:(CGRect)bounds cornerRadius:(CGFloat)radius];//繪制圓角矩形//繪制橢圓UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:(CGRect)bounds];//剪裁視圖[roundedRect addClip];//剪裁后的視圖只能在其路徑區(qū)域內(nèi)繪制，超出部分不會(huì)繪制

　　　　　　c.透明度相關(guān)

　　　　　　　　*UIColor:屬性alpha（0.0-1.0）

　　　　　　　　*UIView:（BOOL）opaque(不透明），alpha（0.0-1.0），hidden（隱藏視圖）

　　　　　　　　區(qū)別請(qǐng)看：http://blog.csdn.net/martin_liang/article/details/40739845

　　　　　　d.子視圖與父視圖轉(zhuǎn)換時(shí)上下文內(nèi)容變化的問(wèn)題

　　　　　　　　壓入（push），取出（pop）狀態(tài)

- (void)drawGreenCircle:(CGContextRef)ctxt{    CGContextSaveGState(ctxt);//保存當(dāng)前上下文    [[UIColor greenColor] setFill];    // draw my circle    CGContextRestoreGState(ctxt);//恢復(fù)保存的上下文}- (void)drawRect:(CGRect)aRect{    CGContextRef context = UIGraphicsGetCurrentContext();    [[UIColor redColor] setFill];    // do some stuff    [self drawGreenCircle:context];    // do more stuff and expect fill color to be red}

　　　　　　e.繪制文本

　　　　　　　　使用NSAttributeString

NSAttributedString *text = ...;//創(chuàng)建繪制內(nèi)容CGSize textSize = [text size];//獲取文本尺寸大小[text drawAtPoint:(CGPoint)p];//將文本繪制到指定位置（左上角），或者使用drawInRect也可以

　　　　　　f.繪制圖片

UIImage *image = [UIImage imageNamed:@“foo.jpg”];//UIImage *image = [[UIImage alloc] initWithContentsOfFile:(NSString *)fullPath];//UIImage *image = [[UIImage alloc] initWithData:(NSData *)imageData];//使用上下文繪制UIGraphicsBeginImageContext(CGSize);// draw with CGContext functionsUIImage *myImage = UIGraphicsGetImageFromCurrentContext();UIGraphicsEndImageContext();//標(biāo)準(zhǔn)繪制[image drawAtPoint:(CGPoint)p];//[image drawInRect:(CGRect)r];//[image drawaspatternInRect:(CGRect)patRect;

　　　　　　g.bounds變化時(shí)視圖的重繪

　　　　　　　　UIView屬性：@PRoperty (nonatomic) UIViewContentMode contentMode;

//位置重繪UIViewContentMode{Left,Right,Top,Right,BottomLeft,BottomRight,TopLeft,TopRight}//縮放重繪UIViewContentModeScale{ToFill,AspectFill,AspectFit} // bit stretching/shrinking //bounds變化時(shí)調(diào)用drawRect重繪UIViewContentModeRedraw // it is quite often that this is what you want

　　2、手勢(shì)識(shí)別

　　　　步驟：a.創(chuàng)建手勢(shì)識(shí)別器，添加到視圖

　　　　　　　b.實(shí)現(xiàn)手勢(shì)觸發(fā)時(shí)的調(diào)用方法

　　　　①UIGestureRecognizer

　　　　　　抽象超類，所有具體手勢(shì)類的父類

　　　　②添加手勢(shì)控制

- (void)setPannableView:(UIView *)pannableView // maybe this is a setter in a Controller{          _pannableView = pannableView;          UIPanGestureRecognizer *pangr =              [[UIPanGestureRecognizer alloc] initWithTarget:pannableView action:@selector(pan:)];//target也可是視圖控制器，pan為觸發(fā)時(shí)的調(diào)用方法，由target類實(shí)現(xiàn)          [pannableView addGestureRecognizer:pangr];//講手勢(shì)添加到視圖}

　　　　③pan手勢(shì)的例子

- (CGPoint)translationInView:(UIView *)aView;//觸摸移動(dòng)的距離- (CGPoint)velocityInView:(UIView *)aView;//移動(dòng)速度- (void)setTranslation:(CGPoint)translation inView:(UIView *)aView;

　　　　④抽象超類提供的state屬性

//UIGestureRecognizerStateBegin  連續(xù)手勢(shì)開(kāi)始//UIGestureRecognizerStateChanged  移動(dòng)//UIGestureRecognizerStateEnded//UIGestureRecognizerStateCancelled//UIGestureRecognizerStateFailed//UIGestureRecognizerStateRecognized     識(shí)別到手勢(shì)//使用舉例- (void)pan:(UIPanGestureRecognizer *)recognizer{    if ((recognizer.state == UIGestureRecognizerStateChanged) ||        (recognizer.state == UIGestureRecognizerStateEnded))     {        CGPoint translation = [recognizer translationInView:self];        // move something in myself (I’m a UIView) by translation.x and translation.y        // for example, if I were a graph and my origin was set by an @property called             origin self.origin = CGPointMake(self.origin.x+translation.x,     self.origin.y+translation.y);         [recognizer setTranslation:CGPointZero inView:self];//恢復(fù)手勢(shì)移動(dòng)距離，為下次手勢(shì)識(shí)別調(diào)用初始化?    }}

　　　　⑤其他手勢(shì)屬性

//UIPinchGestureRecognizer 捏合手勢(shì)@property CGFloat scale; // 縮放比例@property (readonly) CGFloat velocity; //速度（readonly）UIRotationGestureRecognizer  旋轉(zhuǎn)手勢(shì)@property CGFloat rotation; // 旋轉(zhuǎn)弧度@property (readonly) CGFloat velocity; //速度（readonly）UISwipeGestureRecognizer  滑動(dòng)手勢(shì)@property UISwipeGestureRecognizerDirection direction; //方向（4）@property NSUInteger numberOfTouchesRequired; // 觸控?cái)?shù)量UITapGestureRecognizer  點(diǎn)擊手勢(shì)@property NSUInteger numberOfTapsRequired; // 點(diǎn)擊次數(shù)@property NSUInteger numberOfTouchesRequired; //觸控?cái)?shù)量