好長時間沒更新博客, 是時候來一波干貨分享了;APP引導頁話不多說每一個APP都會用到,分量不重但是不可缺少,不論是APP的首次安裝還是版本的更新,首先展現給用戶眼前的也就只有它了吧,當然這里講的不是APP引導頁的美化而是APP引導頁的高度集成, 一行代碼搞定APP引導頁是不是太誇張?下面我們就來看一下吧!
(一)先上GitHub連接,給大家節省時間 GitHub地址 : https://github.com/dingding3w/DHGuidePageHUD
(二)效果圖展示:
(三)一行代碼搞定APP引導頁的創建(真的是一行代碼,只要填入參數即可):
1 /** 2 * DHGuidePageHUD 3 * 4 * @param frame 位置大小 5 * @param imageArray 引導頁圖片數組 6 * @param isHidden 開始體驗按鈕是否隱藏(YES:隱藏-引導頁完成自動進入APP首頁; NO:不隱藏-引導頁完成點擊開始體驗按鈕進入APP主頁) 7 * 8 * @return DHGuidePageHUD對象 9 */ 10 - (instancetype)dh_initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray buttonIsHidden:(BOOL)isHidden;
(四)實現方式跟原理:
APP引導頁是由多張圖片組成,引導頁的圖片在美工切圖的時候會給你的這個不用擔心;並且使多張圖片實現輪番滾動,每拖動一次會跳轉到下一張引導頁圖片,那我們必定會想到可以滾動的視圖, 這里我用的是UIScrollView
(1)創建一個繼承於UIView的類;
(2)將設置引導視圖的scrollview添加到UIView上;
1 // 設置引導視圖的scrollview 2 UIScrollView *guidePageView = [[UIScrollView alloc]initWithFrame:frame]; 3 [guidePageView setBackgroundColor:[UIColor lightGrayColor]]; 4 // 根據傳入圖片數組中的個數來計算UIScrollView的contentSize 5 [guidePageView setContentSize:CGSizeMake(DDScreenW*imageArray.count, DDScreenH)]; 6 [guidePageView setBounces:NO]; 7 [guidePageView setPagingEnabled:YES]; 8 [guidePageView setShowsHorizontalScrollIndicator:NO]; 9 [guidePageView setDelegate:self]; 10 [self addSubview:guidePageView];
(3)添加引導頁右上角的跳過按鈕(因為跳過按鈕一直停留在屏幕的右上角所以這里也要添加的UIView上並且要顯示到UIScrollView的上方,以便加強用戶交互)
1 // 設置引導頁上的跳過按鈕 2 UIButton *skipButton = [[UIButton alloc]initWithFrame:CGRectMake(DDScreenW*0.8, DDScreenW*0.1, 50, 25)]; 3 [skipButton setTitle:@"跳過" forState:UIControlStateNormal]; 4 [skipButton setTitleColor:[UIColor lightGrayColor] forState:UIControlStateNormal]; 5 [skipButton setBackgroundColor:[UIColor grayColor]]; 6 [skipButton.layer setCornerRadius:5.0]; 7 // 添加點擊事件(該事件保持與開始體驗按鈕,自動跳轉APP同步;目的是減少代碼的書寫量與其他方式保持同步樣式) 8 [skipButton addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside]; 9 [self addSubview:skipButton];
(4)添加引導頁上的多張圖片(如果您設置的isHidden參數為NO的話,會在最后一張引導頁圖片上添加"開始體驗按鈕"; 如果您設置isHidden的參數為YES的話,當滑動到最后一張APP引導頁的時候會自動進入APP相關首頁)
1 // 添加在引導視圖上的多張引導圖片 2 for (int i=0; i<imageArray.count; i++) { 3 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(DDScreenW*i, 0, DDScreenW, DDScreenH)]; 4 imageView.image = imageArray[i]; 5 [guidePageView addSubview:imageView]; 6 7 // 設置在最后一張圖片上顯示進入體驗按鈕 8 if (i == imageArray.count-1 && isHidden == NO) { 9 [imageView setUserInteractionEnabled:YES]; 10 UIButton *startButton = [[UIButton alloc]initWithFrame:CGRectMake(DDScreenW*0.3, DDScreenH*0.8, DDScreenW*0.4, DDScreenH*0.08)]; 11 [startButton setTitle:@"開始體驗" forState:UIControlStateNormal]; 12 [startButton setTitleColor:[UIColor colorWithRed:164/255.0 green:201/255.0 blue:67/255.0 alpha:1.0] forState:UIControlStateNormal]; 13 [startButton.titleLabel setFont:[UIFont systemFontOfSize:21]]; 14 [startButton setBackgroundImage:[UIImage imageNamed:@"GuideImage.bundle/guideImage_button_backgound"] forState:UIControlStateNormal]; 15 [startButton addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside]; 16 [imageView addSubview:startButton]; 17 } 18 }
(5)點擊事件的實現,這里使用UIView動畫以及延時的方式來使用APP引導頁進入APP相關首頁時的淡入淡出效果:
1 - (void)buttonClick:(UIButton *)button { 2 [UIView animateWithDuration:DDHidden_TIME animations:^{ 3 self.alpha = 0; 4 dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(DDHidden_TIME * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ 5 [self performSelector:@selector(removeGuidePageHUD) withObject:nil afterDelay:1]; 6 }); 7 }]; 8 }
(6)最后在APP引導頁跳轉APP首頁的時候記得remove掉當前APP引導頁,防止產生不必要的麻煩(最好remove掉😄):
1 - (void)removeGuidePageHUD { 2 [self removeFromSuperview]; 3 }
(五)可能會用到的代碼:
這里我使用NSUserDefaults判斷程序是否第一次啟動(其他方法也可以,這里把代碼給大家粘貼出來)
1 if (![[NSUserDefaults standardUserDefaults] boolForKey:BOOLFORKEY]) { 2 [[NSUserDefaults standardUserDefaults] setBool:YES forKey:BOOLFORKEY]; 3 // 在這里寫初始化圖片數組和DHGuidePageHUD庫引導頁的代碼 4 }
(六)以上就是我對DHGuidePageHUD這個APP引導頁第三方SDK的理解與講解,全部代碼已經上傳至GitHub鏈接,希望大家相互補充相互學習;