一款簡單的面包屑導(dǎo)航欄

這個Demo是在日常開發(fā)中的一個需求抽出來的,每個項目都要自己的需求,所以本文只是提供一些思路,如果你的項目也有類似的需求,你也可以直接用我的方法來做。

Demo的GitHub地址:[GitHub](https://github.com/attackFromCat/LXBreadcrumbNavigation)

項目效果:


Breadcrumb.gif

首先談?wù)勎业捻椖啃枨笫窃鯓拥模覀兊捻椖渴且豢钷k公協(xié)同App,需要管理公司的部門結(jié)構(gòu)或者是行政機(jī)構(gòu),所以我們的項目提供自行創(chuàng)建部門,例如,一個公司分幾個機(jī)構(gòu),一個機(jī)構(gòu)又分為幾個部門,部門里面又有不同的小組等。那么面包屑導(dǎo)航就能在相關(guān)管理者管理層級結(jié)構(gòu),或者公司員工查找人員就能起到導(dǎo)向作用。

現(xiàn)在來談?wù)剬崿F(xiàn)的思路,導(dǎo)航欄可以繼承UIView或者UITableViewCell都可以,不過如果繼承UITableViewCell可能就會在以后UITableView的顯示帶來一些小麻煩,需要判斷cell的展示,所以就采用繼承UIView,然后把它設(shè)置為UITableView的HeaderView,這樣也能到達(dá)我們的效果。

#import <UIKit/UIKit.h>

@interface LXBreadcrumbView : UIView

/**
 面包屑導(dǎo)航展示的數(shù)組
 */
@property (nonatomic, strong) NSMutableArray *crumbs;

/**
 點擊面包屑導(dǎo)航傳出被點擊的按鈕的Tag值,可以在block中進(jìn)行其他操作
 */
@property (nonatomic, strong) void(^clickBlock)(NSInteger);
@end

通過傳入的數(shù)組去創(chuàng)建需要多少個按鈕,由于我們服務(wù)器會幫我們傳回每個點擊后的父子層級關(guān)系,所以就采用數(shù)組來記錄點擊的路徑。

- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // 給面包屑View添加一個內(nèi)容滾動視圖,以滿足超過屏幕寬度的情況下可以左右滑動
        UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScrollViewHeight)];
        scrollView.showsHorizontalScrollIndicator = NO;
        [self addSubview:scrollView];
        _scrollView = scrollView;
        self.backgroundColor = [UIColor colorWithRed:0.922 green:0.929 blue:0.941 alpha:1.000];
        
        _btnArray = [NSMutableArray array];
    }
    return self;
}

剩下就是根據(jù)外界傳入的數(shù)組來創(chuàng)建標(biāo)題按鈕并進(jìn)行相應(yīng)的初始化,比較常規(guī)就不多說了,就是在計算它們的x值得時候。

    //利用此方法獲得前一個空間的最大x值
    maxX = CGRectGetMaxX(btn.frame) + margin;

來說說在這個Demo中的是如何使用的這個小部件的,首先我的頭文件中定義了個屬性,方便重用這個控制器。

@interface ViewController : UIViewController

@property (nonatomic, strong) NSString *titleStr;  // 傳入進(jìn)來的主題

@end

點擊cell進(jìn)入這個方法,因為沒有服務(wù)器給我傳值,所以我就在這個方法弄了一點假數(shù)據(jù),然后點擊后隨機(jī)產(chǎn)生主題傳入準(zhǔn)備push的控制器。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSArray *crumbList = @[
                           @"新聞",@"體育",@"足球",@"國際足球",@"西甲",@"皇家馬德里"
                           ];
    ViewController *vc = [[ViewController alloc] init];
    int value = arc4random_uniform(6);
    vc.titleStr = crumbList[value];
    
    // 記錄面包路徑數(shù)組,存入沙盒,模擬從服務(wù)器獲取數(shù)據(jù)
    _crumbList = [self getCrumbListData];
    [_crumbList addObject:vc.titleStr];
    [self saveCrumbListData];
    
    [self.navigationController pushViewController:vc animated:YES];
}

最后就是實現(xiàn)面包屑的block就完成了,請看下面的代碼。

    __weak __typeof(self) weakSelf  = self;
    [_crumView setClickBlock:^(NSInteger btnTag) {
        // 將導(dǎo)航控制器棧的控制拷貝下來
        NSMutableArray *arr = weakSelf.navigationController.viewControllers.mutableCopy;
        // 根據(jù)按鈕傳回來的Tag值找到該Tag對應(yīng)的控制器,然后把之后的控制器刪除
        [arr removeObjectsInRange:NSMakeRange(btnTag + 1, arr.count - btnTag - 1)];
        
        // 刪除數(shù)組多余的數(shù)據(jù)
        weakSelf.crumbList = [weakSelf getCrumbListData];
        [weakSelf.crumbList removeObjectsInRange:NSMakeRange(btnTag + 1, weakSelf.crumbList.count - btnTag - 1)];
        [weakSelf saveCrumbListData];

        // push或pop到棧頂控制器
        [weakSelf.navigationController setViewControllers:arr animated:YES];
        
    }];

如果你們服務(wù)器兄弟幫你解決了關(guān)系層級問題,那就可輕松多了。我也不知道還要說些什么,第一次寫這種文章,還有很多不知道怎么去說,有問題可以在GitHub上push我或者在這給我留言,我會盡力去解決,也希望大家相互學(xué)習(xí)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,323評論 4 61
  • 1.屬性readwrite,readonly,assign,retain,copy,nonatomic 各是什么作...
    曾令偉閱讀 1,130評論 0 10
  • 世間萬事萬物,絕大多數(shù)人,都鮮有時間回顧往事,酸甜苦辣都是人生的一種體驗,少了哪一樣,都不足夠完整。 經(jīng)...
    孜然味summer閱讀 960評論 1 4
  • 想必在銀行扎堆招聘的十月 十一月 十二月,你一定拿了好幾家銀行的offer了吧 你最后選擇了哪家?出于什么原因呢...
    慧魚閱讀 916評論 0 1
  • 游戲規(guī)則:每度代表不一樣的速度。其中三度代表正常速度,1-5度速度依次遞增。游戲者根據(jù)指令調(diào)整速度,自由行走。注意...
    JennyHua閱讀 548評論 0 0

友情鏈接更多精彩內(nèi)容