第一個完整的iOS小demo：引導

標籤：

斷斷續續地熟悉了一些常用的控制項的動態建立方式，也就是用純程式碼建立，不用Interface Builder來拖放控制項，也動手一一去實現了。基礎的東西熟悉之後還是覺得很迷惘，不知道可以做些啥，領導建議讓我直接查看公司現有的App源碼，讓我把那個引導功能給仿出來~

有了目標，接下來就要分析怎麼去實現了，不用第三方庫，最簡單的大概就是用UIScrollView來實現了，主要有這麼幾點：

1. 4個頁
2. 每頁上面都有一張大圖
3. 每頁上面都有顯示當前頁的標識（頁碼）
4. 最後一頁應該有個跳過的按鈕

先放上成品圖，然後再放出下面的實現步驟。

 

首先，聲明必要的一些屬性，連著委託也一併加上了

@interface GuideViewController ()<UIScrollViewDelegate>@property (nonatomic, strong) UIScrollView *scrollView;@property (nonatomic, strong) NSArray *images;@property (nonatomic, strong) UIPageControl *pageControl;@end

定義一個總頁數的常量

// 定義總頁數static const NSInteger pages = 4;

定義螢幕的尺寸常量

#define ScreenHeight [[UIScreen mainScreen] bounds].size.height#define ScreenWidth [[UIScreen mainScreen] bounds].size.width

建立一個UIScrollView，並將它添加到view中，這裡需要注意的是UIScrollView的一些屬性，下面代碼中都有注釋加以說明

// 初始化scrollview- (void)initScrollView{    // scrollview的大小應該與螢幕大小相等    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];        // scrollview的寬度應該是4p大    self.scrollView.contentSize = CGSizeMake(ScreenWidth * pages, ScreenHeight);        // 橫向滾動    self.scrollView.alwaysBounceHorizontal = YES;        // 開啟分頁模式    self.scrollView.pagingEnabled = YES;        // 隱藏捲軸    self.scrollView.showsHorizontalScrollIndicator = NO;        self.scrollView.delegate = self;        [self.view addSubview:self.scrollView];}

接下來就要在UIScrollView的每一頁中填入內容，其實也就是一堆圖片和按鈕，還有用於顯示頁碼的UIPageControl，動態建立UIImageView、UIButton、UIPageControl我覺得都還OK了，相對容易，問題出在給UIButton綁定點擊事件這兒，寫好的點擊事件方法根本沒響應，千萬別忘記設定圖片的“userInteractionEnabled”屬性。

 1 - (void)viewDidLoad { 2     [super viewDidLoad]; 3     // Do any additional setup after loading the view. 4      5     [self initScrollView]; 6      7     // 處理低解析度下的圖片與scrollview的尺寸 8     CGFloat height = (ScreenHeight == 480) ? 568 : ScreenHeight; 9     CGFloat width = (ScreenHeight == 480) ? 320 : ScreenWidth;10     11     // 鋪開圖片並添加到scrollview上12     for (int i = 0; i < pages; i++) {13 14         UIImageView *guideImage = [[UIImageView alloc] initWithFrame:CGRectMake(width * i, 0, width, height)];15         NSString *img = [[NSString alloc] initWithFormat:@"guide_%d", i+1];16         guideImage.image = [UIImage imageNamed:img];17         18         // 如果不指定，在它上面的按鈕響應不了事件19         guideImage.userInteractionEnabled = YES;20         21         [self.scrollView addSubview:guideImage];22         23         24         // 在最後一頁上建立“進入”按鈕25         if (i == pages - 1) {26             UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];27             28             NSInteger btnWidth = 100;29             CGFloat paddingLeft = (ScreenWidth - 100) / 2;30             CGFloat paddingTop = (ScreenHeight > 480) ? (ScreenHeight - 90) : ScreenHeight;31             btn.frame = CGRectMake(paddingLeft, paddingTop, btnWidth, 36);32             btn.backgroundColor = [UIColor orangeColor];33             btn.layer.cornerRadius = 18.0;34             [btn addTarget:self action:@selector(onButtonClicked:) forControlEvents:UIControlEventTouchUpInside];35             [btn setTitle:@"立即體驗" forState:UIControlStateNormal];36             btn.layer.borderColor = [UIColor whiteColor].CGColor;37             btn.layer.borderWidth = 2.0;38             39             [guideImage addSubview:btn];40         }41         42 43         if (ScreenHeight == 480 && i == 0) {44             NSLog(@"為了讓第一張圖上面的文字與後面圖片上的文字在同一水平線上對齊，y軸需要向上移動20點 %d", i);45             guideImage.frame = CGRectMake(0, 20, width, height);46         }47     }48     49     // 將就圖片，4、4s低解析度向下移動scrollview的位置，盡量讓圖片內容顯示完整50     if (ScreenHeight == 480) {51         self.scrollView.frame = CGRectMake(0, -64, width, height);52     }53     54     55     // 繪製分頁標識56     CGFloat pointPaddingTop = ScreenHeight > 480 ? ScreenHeight - 50 : ScreenHeight - 35;57     self.pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, pointPaddingTop, ScreenWidth, 40)];58     self.pageControl.numberOfPages = pages;59     [self.pageControl addTarget: self action: @selector(pageControlClicked:) forControlEvents: UIControlEventValueChanged];60     [self.view addSubview:self.pageControl];61 }

 

最後再實現一下按鈕和PageControl的點擊回應程式法、UIScrollView的委託方法scrollViewDidEndDecelerating。

 1 - (void)onButtonClicked:(UIButton *)sender{ 2     UIAlertView *msg = [[UIAlertView alloc] initWithTitle:nil message:@"引導頁完成" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil]; 3     [msg show]; 4     NSLog(@"done."); 5 } 6  7 // 響應分頁點擊 8 - (void)pageControlClicked:(UIPageControl *)thePageControl 9 {10     [_scrollView setContentOffset:CGPointMake(ScreenWidth*thePageControl.currentPage, _scrollView.contentOffset.y) animated:YES];11 }12 13 #pragma mark - UIScrollViewDelegate14 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView15 {16     NSInteger page = scrollView.contentOffset.x / ScreenWidth;17     self.pageControl.currentPage = page;18 }

 

放上源碼 :guide.zip

第一個完整的iOS小demo：引導