iOS類似網(wǎng)易新聞的導航標題欄

最后的效果:



結構分析:該界面主要是有兩個UIScrollView組成踢关,上面的UIScrollView用于存放一組帶有點擊手勢的UILabel(也可以是按鈕)琢融,下面的UIScrollView用于顯示對面標題的UIViewController芋齿。
當點擊上面的UILabel(或UIButton)時扣草,下面的UIScrollView就移動到對應的位置顯示標題對應的UIController的內容谎僻。

 /**
 點擊上面的標題label
 */
- (void)respondsToTitleLabel:(UITapGestureRecognizer *)tapGR {
    // 選中l(wèi)abel
    [self selectedLabel:(UILabel *)tapGR.view];

    // 顯示對應控制器的view
    [self showContentVC:tapGR.view.tag - 200];
}

當滑動下面的UIScrollView顯示對應標題的內容時窒朋,上面的UIScrollView也移動到對應的位置,將該內容對應的UILabel(或UIButton)設為選中狀態(tài)腋粥。

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 獲取當前頁數(shù)
    CGFloat currentPage = scrollView.contentOffset.x / SCREENWIDTH;

    // 獲取當前選中l(wèi)abel
    UILabel *currentSelectedLabel = [self.titleScrollView viewWithTag:200 + currentPage];
    // 獲取上一個選中l(wèi)abel
    UILabel *lastSelectedLabel;
    if (currentPage + 1 < self.contentVCClassArray.count - 1) {
        lastSelectedLabel = [self.titleScrollView viewWithTag:201 + currentPage];
    }

    // 計算上一個選中l(wèi)abel縮放比例
    CGFloat lastSelectedLabelScale = currentPage - (NSInteger)currentPage;
    // 計算當前選中l(wèi)abel縮放比例
    CGFloat currentSelectedLabelScale = 1 - lastSelectedLabelScale;

    // 縮放
    currentSelectedLabel.transform = CGAffineTransformMakeScale(currentSelectedLabelScale * 0.3 + 1, currentSelectedLabelScale * 0.3 + 1);
    lastSelectedLabel.transform = CGAffineTransformMakeScale(lastSelectedLabelScale * 0.3 + 1, lastSelectedLabelScale * 0.3 + 1);

    // 顏色漸變
    currentSelectedLabel.textColor = [UIColor colorWithRed:currentSelectedLabelScale green:0 blue:0 alpha:1];
    lastSelectedLabel.textColor = [UIColor colorWithRed:lastSelectedLabelScale green:0 blue:0 alpha:1];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    // 選中l(wèi)abel
    [self selectedLabel:(UILabel *)[self.titleScrollView viewWithTag:200 + scrollView.contentOffset.x / SCREENWIDTH]];
}

屬性介紹:

@property (nonatomic, weak) UILabel *currentSelectedTitleLabel; // 當前選中標題Label
@property (nonatomic, strong) UIScrollView *titleScrollView;
@property (nonatomic, strong) UIScrollView *contentScrollView;

@property (nonatomic, copy) NSArray *titleArray; // 標題數(shù)組
@property (nonatomic, copy) NSArray *contentVCClassArray; // 內容控制器類名數(shù)組

懶加載:

#pragma mark - Getters And Setters
- (UIScrollView *)titleScrollView {
    if (!_titleScrollView) {
        _titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, SCREENWIDTH, 44)];
        _titleScrollView.contentSize = CGSizeMake(titleLabelWidth * self.contentVCClassArray.count, 0);
        // 隱藏水平滾動條
        _titleScrollView.showsHorizontalScrollIndicator = NO;
    }
    return _titleScrollView;
}
- (UIScrollView *)contentScrollView {
    if (!_contentScrollView) {
        _contentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, CGRectGetMaxY(self.titleScrollView.frame), SCREENWIDTH, SCREENHEIGHT - 44)];
        _contentScrollView.contentSize = CGSizeMake(SCREENWIDTH * self.contentVCClassArray.count, 0);
        // 開啟分頁
        _contentScrollView.pagingEnabled = YES;
        // 關閉回彈
        _contentScrollView.bounces = NO;
        // 隱藏水平滾動條
        _contentScrollView.showsHorizontalScrollIndicator = NO;
        // 設置代理
        _contentScrollView.delegate = self;
    }
    return _contentScrollView;
}

- (NSArray *)titleArray {
    if (!_titleArray) {
        _titleArray = @[@"紅", @"藍", @"綠", @"黃", @"紫", @"橘"];
    }
    return _titleArray;
}
- (NSArray *)contentVCClassArray {
    if (!_contentVCClassArray) {
        _contentVCClassArray = @[@"DBHRedViewController",
                                 @"DBHBlueViewController",
                                 @"DBHGreenViewController",
                                 @"DBHYellowViewController",
                                 @"DBHPurPleViewController",
                                 @"DBHOrangeViewController"];
    }
    return _contentVCClassArray;
}

方法介紹:

#pragma mark - Private Methods
/**
 添加所有子控制器對應的標題
 */
- (void)addTitleLabels {
    for (NSInteger i = 0; i < self.contentVCClassArray.count; i++) {
        UILabel *titleLabel = [[UILabel alloc] init];
        titleLabel.tag = 200 + i;
        titleLabel.frame = CGRectMake(titleLabelWidth * i, 0, titleLabelWidth, 44);
        titleLabel.text = self.titleArray[i];
        titleLabel.textAlignment = NSTextAlignmentCenter;
        titleLabel.highlightedTextColor = [UIColor redColor];
        titleLabel.userInteractionEnabled = YES;

        UITapGestureRecognizer *tapGR = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(respondsToTitleLabel:)];
        [titleLabel addGestureRecognizer:tapGR];

        // 默認選中第1個titleLabel
        if (!i) {
            [self respondsToTitleLabel:tapGR];
        }

        [self.titleScrollView addSubview:titleLabel];
    }
}
/**
 添加所有子控制器
 */
- (void)addChildViewControllers {
    for (NSInteger i = 0; i < self.contentVCClassArray.count; i++) {
        NSString *contentVCClassName = self.contentVCClassArray[i];
        UIViewController *contentVC = [[NSClassFromString(contentVCClassName) alloc] init];
        [self addChildViewController:contentVC];

        contentVC.view.frame = CGRectMake(SCREENWIDTH * i, 0, SCREENWIDTH, SCREENHEIGHT);
        [self.contentScrollView addSubview:contentVC.view];
    }
}
/**
 選中l(wèi)abel
 */
- (void)selectedLabel:(UILabel *)label {
    // 還原前一個選中l(wèi)abel的屬性
    self.currentSelectedTitleLabel.highlighted = NO;
    self.currentSelectedTitleLabel.transform = CGAffineTransformIdentity;
    self.currentSelectedTitleLabel.textColor = [UIColor blackColor];

    // 修改選中l(wèi)abel的屬性
    label.highlighted = YES;
    label.transform = CGAffineTransformMakeScale(scale, scale);

    // 更改選中的label
    self.currentSelectedTitleLabel = label;

    // 居中選中的label
    CGFloat offsetX = label.center.x - SCREENWIDTH * 0.5;
    CGFloat maxOffsetX = self.titleScrollView.contentSize.width - SCREENWIDTH;
    if (offsetX < 0) {
        offsetX = 0;
    } else if (offsetX > maxOffsetX) {
        offsetX = maxOffsetX;
    }
    [self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}

/**
 顯示選中標題對面的控制器view

 @param index 選中標題的下標
 */
- (void)showContentVC:(NSInteger)index {
    // 移動內容scrollView到指定位置
    self.contentScrollView.contentOffset = CGPointMake(SCREENWIDTH * index, 0);
}

代碼到這里就完畢了晦雨,具體使用可以參考源碼demo,這里所有的子控制器一開始就成為了當前主控制器的子控制器隘冲。因為我這里的標簽數(shù)量比較少闹瞧,所以所有子控制器的視圖當成為子控制器的時候就已經(jīng)添加到內容UIScrollView上面了,當標簽數(shù)量比較多時展辞,可以在一開始的時候只添加為子控制器奥邮,無須將子控制器的視圖加載到內容UIScrollview上,當需要顯示的時候再加上去以節(jié)省內存,不過這樣的話洽腺,當?shù)谝淮渭虞d視圖的時候會有一個明顯的空白區(qū)域脚粟,看著不大舒服。
Demo地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末蘸朋,一起剝皮案震驚了整個濱河市珊楼,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌度液,老刑警劉巖厕宗,帶你破解...
    沈念sama閱讀 222,865評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異堕担,居然都是意外死亡已慢,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評論 3 399
  • 文/潘曉璐 我一進店門霹购,熙熙樓的掌柜王于貴愁眉苦臉地迎上來佑惠,“玉大人,你說我怎么就攤上這事齐疙∧た” “怎么了?”我有些...
    開封第一講書人閱讀 169,631評論 0 364
  • 文/不壞的土叔 我叫張陵贞奋,是天一觀的道長赌厅。 經(jīng)常有香客問我,道長轿塔,這世上最難降的妖魔是什么特愿? 我笑而不...
    開封第一講書人閱讀 60,199評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮勾缭,結果婚禮上揍障,老公的妹妹穿的比我還像新娘。我一直安慰自己俩由,他們只是感情好毒嫡,可當我...
    茶點故事閱讀 69,196評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著幻梯,像睡著了一般兜畸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上礼旅,一...
    開封第一講書人閱讀 52,793評論 1 314
  • 那天膳叨,我揣著相機與錄音洽洁,去河邊找鬼痘系。 笑死,一個胖子當著我的面吹牛饿自,可吹牛的內容都是我干的汰翠。 我是一名探鬼主播龄坪,決...
    沈念sama閱讀 41,221評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼复唤!你這毒婦竟也來了健田?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,174評論 0 277
  • 序言:老撾萬榮一對情侶失蹤佛纫,失蹤者是張志新(化名)和其女友劉穎妓局,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體呈宇,經(jīng)...
    沈念sama閱讀 46,699評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡好爬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,770評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了甥啄。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片存炮。...
    茶點故事閱讀 40,918評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蜈漓,靈堂內的尸體忽然破棺而出穆桂,到底是詐尸還是另有隱情,我是刑警寧澤融虽,帶...
    沈念sama閱讀 36,573評論 5 351
  • 正文 年R本政府宣布享完,位于F島的核電站,受9級特大地震影響有额,放射性物質發(fā)生泄漏驼侠。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,255評論 3 336
  • 文/蒙蒙 一谆吴、第九天 我趴在偏房一處隱蔽的房頂上張望倒源。 院中可真熱鬧,春花似錦句狼、人聲如沸笋熬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,749評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胳螟。三九已至,卻和暖如春筹吐,著一層夾襖步出監(jiān)牢的瞬間糖耸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,862評論 1 274
  • 我被黑心中介騙來泰國打工丘薛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留嘉竟,地道東北人。 一個月前我還...
    沈念sama閱讀 49,364評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像舍扰,于是被迫代替她去往敵國和親倦蚪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,926評論 2 361

推薦閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫边苹、插件陵且、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,125評論 4 61
  • 目錄 但還是愛慕购,深藏于心 前情回顧 15 母親也是需要寵的 三個月之久,從未停止過想念茬底,但也從未遇見脓钾。人群中,每一...
    盛靳閱讀 288評論 0 0
  • 暗黑和墨綠 偶有殷紅濺落 赤身裸體 面如死灰 肋骨 如卷起敗葉 枯瘦的 似深寒中待然干柴 不見光亮 黑洞讓閃爍更加...
    南倚閑坐閱讀 251評論 0 2
  • 文/冬月之戀 最近開始找北京作家劉慶邦早年寫過的一些短篇小說來看桩警,雖然那些文章發(fā)表距今有十幾二十多年了可训,但在我看來...
    冬月之戀閱讀 742評論 8 25