簡介
一年前自己自學iOS入門可謂艱辛歷程,偶然得到raywenderlich的基本教程便開始琢磨起來蹋笼,廢話不多說直接上圖喂走。
正面.png
說明.png
下面主要講我學到了什么:
一、基本控件
UILabel, UIButton, UISlider, UIWebView
重點知識:
- 為slider設置thumbImage
UIImage *thumbImageNormal = [UIImage imageNamed:@"SliderThumb-Normal"];
UIImage *thumbImageHighlighted = [UIImage imageNamed:@"SliderThumb-Highlighted"];
[self.slider setThumbImage:thumbImageNormal forState:(UIControlStateNormal)];
[self.slider setThumbImage:thumbImageHighlighted forState:(UIControlStateHighlighted)];
- 為slider設置trackImage茄唐,此處用到拉伸圖片,通過edgeInsets得到圖片的一個像素點蝇更,用此像素點平鋪拉伸得到
UIEdgeInsets insets = UIEdgeInsetsMake(0, 14, 0, 14);
UIImage *trackLeftImage = [[UIImage imageNamed:@"SliderTrackLeft"] resizableImageWithCapInsets:insets];
UIImage *trackRightImage = [[UIImage imageNamed:@"SliderTrackRight"] resizableImageWithCapInsets:insets];
[self.slider setMinimumTrackImage:trackLeftImage forState:(UIControlStateNormal)];
[self.slider setMaximumTrackImage:trackRightImage forState:(UIControlStateNormal)];
- 用webView加載本地html
NSString *path = [[NSBundle mainBundle] pathForResource:@"BullsEye" ofType:@"html"];
NSData *data = [NSData dataWithContentsOfFile:path];
NSURL *baseURL = [NSURL URLWithString:[NSBundle mainBundle].bundlePath];
[self.webView loadData:data MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];
- 彈出一個alertController
NSString *message = [[NSString alloc] initWithFormat:@"You scored %ld points", points];
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:title message:message preferredStyle:(UIAlertControllerStyleAlert)];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"OK" style:(UIAlertActionStyleDefault) handler:^(UIAlertAction * _Nonnull action) {
[self startNewRound];
[self updateLabel];
}];
[alertController addAction:action];
[self presentViewController:alertController animated:YES completion:nil];
- 界面元素的值改變時添加過渡動畫 Crossfade
- (IBAction)startOver:(id)sender {
[self startNewGame];
[self updateLabel];
CATransition *transition = [[CATransition alloc] init];
transition.type = kCATransitionFade;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transition.duration = 1;
[self.view.layer addAnimation:transition forKey:nil];
}
Crossfade.png
總結
雖然這個小游戲灰郴Ρ啵灰常簡單,其中還用到AutoLayout年扩,所以在任何尺寸屏幕下運行都是一樣的蚁廓。讓我感觸最深的是最后的Crossfade動畫,簡單幾行代碼就有了如上的效果常遂,amazing纳令,以此也給了我往下學的動力挽荠。
源代碼傳送門
臥薪藏膽克胳,三千越甲可吞吳。