iOS左右滑動(dòng)標(biāo)簽頁(yè)導(dǎo)航的設(shè)計(jì)
iOS中左右滑動(dòng)切換,滑動(dòng)標(biāo)簽頁(yè)導(dǎo)航的設(shè)計(jì)思路,具體內(nèi)容如下
iOS開(kāi)發(fā)中經(jīng)常(幾乎每個(gè)APP都含有這樣的頁(yè)面吧,幾乎!UI設(shè)計(jì)師也都是這樣抄來(lái)抄去…..)
demo見(jiàn)Github:SliderTab
估計(jì)很多人都會(huì)說(shuō),直接用第三方就可以了,很多人封裝過(guò),很好用。而且這樣的頁(yè)面用第三方2分鐘搞定,省時(shí)省力。
筆者也曾用過(guò)第三方,但是屢屢出bug。而且不好修改。所以只能自己寫(xiě),bug少,代碼通俗易懂,童叟無(wú)欺。
這里介紹一個(gè)第三方DLSlideView,Github地址:DLSlideView,目前達(dá)到200多個(gè)star。但是中間出了一次bug,說(shuō)是tableView左滑動(dòng)刪除有問(wèn)題,后來(lái)這個(gè)原作者更新了版本,修復(fù)了這個(gè)bug。但是我使用的過(guò)程中又發(fā)現(xiàn)一個(gè)新bug,就是里面放UIScrollView的時(shí)候也有問(wèn)題。
所以此文章不對(duì)代碼進(jìn)行封裝,僅提供思路和代碼。這樣才能真正適配光大開(kāi)發(fā)者(授之以魚(yú)不如授之以漁),因?yàn)楣P者認(rèn)為每個(gè)頁(yè)面都有不同,我們需要掌握思路,這樣萬(wàn)變不離其宗,任何復(fù)雜的UI頁(yè)面都可以用這個(gè)思路去寫(xiě)出來(lái)。下面我們來(lái)實(shí)現(xiàn)這樣的一個(gè)比較時(shí)髦的效果,在導(dǎo)航上面加三個(gè)tab(其實(shí)就是三個(gè)button),支持手勢(shì)切換,支持點(diǎn)擊tab切換。
1.理論分析
先觀察這個(gè)效果圖,三個(gè)UIButton和一個(gè)滑動(dòng)的UILabel,UILabel給一個(gè)動(dòng)畫(huà),讓他的frame跟隨某一個(gè)UIButton就可以了。至于跟蹤哪個(gè)UIButton,當(dāng)然是點(diǎn)擊到的那個(gè)UIButton了,那么沒(méi)點(diǎn)擊只是滑動(dòng)怎么辦?UIScrollView的代理里面獲取當(dāng)前獲得焦點(diǎn)的UIButton就可以了。三個(gè)UIButton分別對(duì)應(yīng)不同的頁(yè)面,每個(gè)頁(yè)面可能邏輯很多很復(fù)雜,這樣的話如果寫(xiě)在一個(gè)VC里面就顯得臃腫了,我們要想辦法分離代碼,易于維護(hù),并把邏輯分離,這樣的話,就要對(duì)應(yīng)3個(gè)ViewController。既然支持手勢(shì)滑動(dòng),我們想到的就是UIScrollView,它有分頁(yè)效果,很6 很87。我們可以把三個(gè)vc中的view拿出來(lái),分別貼到UIScrollView上面去(就是addSubView)。理論到此完畢,下面上代碼。
2.代碼實(shí)現(xiàn)
我們要在HomeViewController里面放一個(gè)UIScrollView,然后初始化三個(gè)VC,分別拿到三個(gè)VC.view,最后把VC.view貼到UIScrollView上面,實(shí)現(xiàn)UIScrollView的分頁(yè)滑動(dòng)。
代碼:
#import "HomeViewController.h" #import "NearbyViewController.h" #import "SquareViewController.h" #import "RecommendViewController.h" @interface HomeViewController ()<UIActionSheetDelegate,UIScrollViewDelegate>{ UIBarButtonItem *leftButton; NearbyViewController *nearbyVC; SquareViewController *squareVC; RecommendViewController *recommendVC; UIScrollView *mainScrollView; UIView *navView; UILabel *sliderLabel; UIButton *nearbyBtn; UIButton *squareBtn; UIButton *recommendBtn; } @end @implementation HomeViewController //懶加載三個(gè)VC -(NearbyViewController *)nearbyVC{ if (nearbyVC==nil) { nearbyVC = [[NearbyViewController alloc]init]; } return nearbyVC; } -(SquareViewController *)squareVC{ if (squareVC==nil) { squareVC = [[SquareViewController alloc]init]; } return squareVC; } -(RecommendViewController *)recommendVC{ if (recommendVC==nil) { recommendVC = [[RecommendViewController alloc]init]; } return recommendVC; } //初始化三個(gè)UIBtton和一個(gè)滑動(dòng)的UILabel,命名為sliderLabel,三個(gè)btn放倒一個(gè)UIView上面navView。 -(void)initUI{ navView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 40)]; nearbyBtn = [UIButton buttonWithType:UIButtonTypeCustom]; nearbyBtn.frame = CGRectMake(0, 0, kScreenWidth/4, navView.frame.size.height); nearbyBtn.titleLabel.font = [UIFont boldSystemFontOfSize:19]; [nearbyBtn addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside]; [nearbyBtn setTitle:@"附近" forState:UIControlStateNormal]; nearbyBtn.tag = 1; [navView addSubview:nearbyBtn]; squareBtn = [UIButton buttonWithType:UIButtonTypeCustom]; squareBtn.frame = CGRectMake(nearbyBtn.frame.origin.x+nearbyBtn.frame.size.width, nearbyBtn.frame.origin.y, kScreenWidth/4, navView.frame.size.height); squareBtn.titleLabel.font = [UIFont systemFontOfSize:16]; [squareBtn addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside]; [squareBtn setTitle:@"廣場(chǎng)" forState:UIControlStateNormal]; squareBtn.tag = 2; [navView addSubview:squareBtn]; recommendBtn = [UIButton buttonWithType:UIButtonTypeCustom]; recommendBtn.frame = CGRectMake(squareBtn.frame.origin.x+squareBtn.frame.size.width, squareBtn.frame.origin.y, kScreenWidth/4, navView.frame.size.height); recommendBtn.titleLabel.font = [UIFont systemFontOfSize:16]; [recommendBtn addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside]; [recommendBtn setTitle:@"推薦" forState:UIControlStateNormal]; recommendBtn.tag = 3; [navView addSubview:recommendBtn]; sliderLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 40-2, kScreenWidth/4, 4)]; sliderLabel.backgroundColor = kBackgroundColor; [navView addSubview:sliderLabel]; self.navigationItem.titleView = navView; leftButton = [[UIBarButtonItem alloc]initWithTitle:@"篩選" style:UIBarButtonItemStylePlain target:self action:@selector(leftBarButtonItemPressed:)]; leftButton.tintColor = [UIColor whiteColor]; self.navigationItem.leftBarButtonItem = leftButton; } -(UIButton *)theSeletedBtn{ if (nearbyBtn.selected) { return nearbyBtn; }else if (squareBtn.selected){ return squareBtn; }else if (recommendBtn.selected){ return recommendBtn; }else{ return nil; } } - (void)viewDidLoad { [super viewDidLoad]; [self initUI]; [self setMainScrollView]; } //初始化UIScrollView -(void)setMainScrollView{ mainScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight-kTabBarHeight)]; mainScrollView.delegate = self; mainScrollView.backgroundColor = [UIColor whiteColor]; mainScrollView.pagingEnabled = YES; mainScrollView.showsHorizontalScrollIndicator = NO; mainScrollView.showsVerticalScrollIndicator = NO; [self.view addSubview:mainScrollView]; NSArray *views = @[self.nearbyVC.view, self.squareVC.view,self.recommendVC.view]; for (int i = 0; i < views.count; i++){ //添加背景,把三個(gè)VC的view貼到mainScrollView上面 UIView *pageView = [[UIView alloc]initWithFrame:CGRectMake(kScreenWidth * i, 0, mainScrollView.frame.size.width, mainScrollView.frame.size.height)]; [pageView addSubview:views[i]]; [mainScrollView addSubview:pageView]; } mainScrollView.contentSize = CGSizeMake(kScreenWidth * (views.count), 0); } -(UIButton *)buttonWithTag:(NSInteger)tag{ if (tag==1) { return nearbyBtn; }else if (tag==2){ return squareBtn; }else if (tag==3){ return recommendBtn; }else{ return nil; } } -(void)sliderAction:(UIButton *)sender{ [self sliderAnimationWithTag:sender.tag]; [UIView animateWithDuration:0.3 animations:^{ mainScrollView.contentOffset = CGPointMake(kScreenWidth * (sender.tag - 1), 0); } completion:^(BOOL finished) { }]; } -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ double index_ = scrollView.contentOffset.x / kScreenWidth; [self sliderAnimationWithTag:(int)(index_+0.5)+1]; } #pragma mark - sliderLabel滑動(dòng)動(dòng)畫(huà) - (void)sliderAnimationWithTag:(NSInteger)tag{ nearbyBtn.selected = NO; squareBtn.selected = NO; recommendBtn.selected = NO; UIButton *sender = [self buttonWithTag:tag]; sender.selected = YES; //動(dòng)畫(huà) [UIView animateWithDuration:0.3 animations:^{ sliderLabel.frame = CGRectMake(sender.frame.origin.x, sliderLabel.frame.origin.y, sliderLabel.frame.size.width, sliderLabel.frame.size.height); } completion:^(BOOL finished) { nearbyBtn.titleLabel.font = [UIFont systemFontOfSize:16]; squareBtn.titleLabel.font = [UIFont systemFontOfSize:16]; recommendBtn.titleLabel.font = [UIFont systemFontOfSize:16]; sender.titleLabel.font = [UIFont boldSystemFontOfSize:19]; }]; } @end
好,思路和代碼都有了??梢宰约喝?shí)現(xiàn)了,真的不難,真的不需要用第三方。其實(shí)我本可以封裝一個(gè)給大家用的,但是我沒(méi)有封裝,目的是讓每個(gè)iOS都能對(duì)付UI設(shè)計(jì)師的這樣的頁(yè)面設(shè)計(jì)!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Flutter之TabBarView組件項(xiàng)目實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Flutter之TabBarView組件項(xiàng)目實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10iOS開(kāi)源一個(gè)簡(jiǎn)單的訂餐app UI框架
這篇文章主要介紹了iOS開(kāi)源一個(gè)簡(jiǎn)單的訂餐app UI框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10iOS App開(kāi)發(fā)中的UIStackView堆疊視圖使用教程
UIStackView是iOS9以來(lái)新增加的組件,使我們能夠?qū)IView子類(lèi)對(duì)象進(jìn)行靈活排版,這里我們就來(lái)看一下iOS App開(kāi)發(fā)中的UIStackView堆疊視圖使用教程2016-07-07IOS開(kāi)發(fā)中NSURL的基本操作及用法詳解
NSURL其實(shí)就是我們?cè)跒g覽器上看到的網(wǎng)站地址,這不就是一個(gè)字符串么,為什么還要在寫(xiě)一個(gè)NSURL呢,主要是因?yàn)榫W(wǎng)站地址的字符串都比較復(fù)雜,包括很多請(qǐng)求參數(shù),這樣在請(qǐng)求過(guò)程中需要解析出來(lái)每個(gè)部門(mén),所以封裝一個(gè)NSURL,操作很方便2015-12-12IOS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(一)
這篇文章主要介紹了IOS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能,點(diǎn)擊獲取驗(yàn)證碼,進(jìn)入時(shí)間倒計(jì)時(shí),感興趣的小伙伴們可以參考一下2016-01-01iOS用UITextField切換明文/密文顯示時(shí)末尾空白的問(wèn)題解決
最近在工作中遇到一個(gè)問(wèn)題,利用UITextField切換明文/密文顯示時(shí)發(fā)現(xiàn)字符串后面會(huì)出現(xiàn)一段空白,所以下面這篇文章主要給大家介紹了iOS用UITextField切換明文/密文顯示時(shí)末尾空白問(wèn)題的解決方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-05-05