01.項目實戰(zhàn) 百思不得姐 項目界面框架搭建

@(iOS 項目實戰(zhàn))[項目實戰(zhàn)]


目錄

  • 1.項目環(huán)境搭建
    • 工程項目配置
  • 2.項目框架
    • 項目總體框架圖,效果圖
  • 3.自定義TabBar
    • 自定義TabBar的原因
    • 自定義TabBar步驟
  • 4.自定義TabBarController
    • 設(shè)置UIWindow的根控制器
    • 自定義TabBarController步驟

1.項目環(huán)境搭建

工程項目配置

  • 工程項目環(huán)境配置

    • 設(shè)置Boundle Identifier
    • 配置部署環(huán)境,運行在ios7及以上版本
    • 設(shè)置設(shè)備支持方向
    • 啟動桌面隱藏狀態(tài)欄
    • 設(shè)置桌面圖標和啟動圖片
  • 工程項目配置圖

工程項目配置圖

2.項目框架

項目總體框架圖,效果圖

  • 項目框架圖


    項目框架圖
  • 初步運行效果圖


    不得姐效果圖.gif

3.自定義TabBar

自定義TabBar的原因

需在TabBar中間添加按鈕,系統(tǒng)的UITabBar不能滿足需求.所以使用自定義TabBar

  • 分析: 系統(tǒng)TabBar為什么顯示不了加號按鈕

    • 判斷下發(fā)布圖片和其他圖片區(qū)別(尺寸不一樣)
    • 發(fā)布圖片太大,導(dǎo)致顯示不出來
      • 1.改圖片尺寸不符合需求
      • 系統(tǒng)的UITabBarButton不能滿足需求
  • 解決方案

    • 1.直接往tabBar中間添加一個發(fā)布按鈕(1.多了一個控制器不安全,有可能系統(tǒng)UITabBarButton把你的按鈕覆蓋)
    • 2.自定義TabBar控件 (重寫layoutSubviews,懶加載加號按鈕,并在布局子控件的時候添加到自定義TabBar中間
  • 注意: 系統(tǒng)是在viewWillAppear:方法中把所有的UITabBarButton添加到UITabBar中.

自定義TabBar步驟

  • 1.懶加載加號按鈕(加號按鈕只需加載一次)
#pragma =======================================================================
#pragma mark - 懶加載
// ----------------------------------------------------------------------------
// 加號按鈕
- (UIButton *)plusButton
{
    if (_plusButton == nil) {
        UIButton *plusButton = [[UIButton alloc] init];
        [plusButton setImage:[UIImage imageNamed:@"tabBar_publish_icon"] forState:UIControlStateNormal];
        [plusButton setImage:[UIImage imageNamed:@"tabBar_publish_click_icon"] forState:UIControlStateHighlighted];
        // 設(shè)置尺寸
        [plusButton sizeToFit];
        _plusButton = plusButton;
        
        [self addSubview:plusButton];
    }
    return _plusButton;
}
  • 2.重新布局tabBar子控件
    • tabBar的子控件不止只有UITabBarButton,所以需過濾UITabBarButton,可以使用以下兩種方法過濾.
    • 1.[view isKindOfClass:NSClassFromString(@"UITabBarButton")]
    • 2.[@"UITabBarButton" isEqualToString:NSStringFromClass([view class])]
#pragma =======================================================================
#pragma mark - 布局子控件
// ----------------------------------------------------------------------------
// 重新布局tabBar子控件
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // 1.定義frame屬性
    NSInteger count = self.items.count;
    CGFloat itemX = 0;
    CGFloat itemY = 0;
    CGFloat itemW = self.wx_width / (count + 1);
    CGFloat itemH = self.wx_height;
    
    // 2.遍歷子控件(過濾UITabBarButton), UITabBarButton是私有屬性
    NSInteger index = 0;
    for (UIView *view in self.subviews) {
        // 2.1 過濾UITabBarButton
        // 可以用兩張方式判斷
        // 1.[view isKindOfClass:NSClassFromString(@"UITabBarButton")]
        // 2.[@"UITabBarButton" isEqualToString:NSStringFromClass([view class])]
        if ([view isKindOfClass:NSClassFromString(@"UITabBarButton")]) {
            
            // 2.2 計算x值,并設(shè)置frame
            itemX = index * itemW;
            view.frame = CGRectMake(itemX, itemY, itemW, itemH);
            
            index++;
            // 判斷如果是是第二個batBarButton,空一格
            if (index == 2) {
                index++;
            }
        }
    }
    
    // 3.設(shè)置加號按鈕
    self.plusButton.center = CGPointMake(self.wx_width * 0.5, self.wx_height * 0.5);
}

4.自定義TabBarController

設(shè)置UIWindow的根控制器

  • 在AppDelegate.m中設(shè)置UIWindow的根控制器為自定義TabBarController
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    
    // 1.創(chuàng)建window
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
    // 2.設(shè)置window的根控制器
    self.window.rootViewController = [[WXTabBarController alloc] init];
    
    // 3.讓window成為主窗口,并顯示
    [self.window makeKeyAndVisible];
    
    return YES;
}

自定義TabBarController步驟

  • 1.添加所有子控制器
// ----------------------------------------------------------------------------
// 添加所有子控制器
- (void)setupAllChildViewController
{
    // 精華
    [self setupOneChildViewController:[[WXEssenceViewController alloc] init]];
    
    // 新帖
    [self setupOneChildViewController:[[WXNewViewController alloc] init]];
    
    // 發(fā)布
//    [self setupOneChildViewController:[[WXPublishViewController alloc] init]];
    
    // 關(guān)注
    [self setupOneChildViewController:[[WXFriendTrendViewController alloc] init]];
    
    // 我
    [self setupOneChildViewController:[[WXMeViewController alloc] init]];
}

// ----------------------------------------------------------------------------
// 添加一個子控制器
- (void)setupOneChildViewController:(UIViewController *)viewController
{
    // 1.包裝導(dǎo)航控制器
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
    [self addChildViewController:nav];
}
  • 2.設(shè)置所有tabBarButton
    • 設(shè)置圖片不被渲染兩種方式
    • 方法一: 在Assets.xcassets直接設(shè)置圖片Render As為Original Image,記得1x,2x,3x都要選中.
    • 方法二: 使用imageWithRenderingMode:方法抽取生成不被渲染圖片的分類.
// ----------------------------------------------------------------------------
// 設(shè)置所有tabBarButton
- (void)setupAllTabBarButton
{
    // 精華tabBarItem設(shè)置
    [self setupOneTabBarButtonVcIndex:0 titile:@"精華" imageName:@"tabBar_essence_icon" selectedImageName:@"tabBar_essence_click_icon"];
    
    // 新帖tabBarItem設(shè)置
    [self setupOneTabBarButtonVcIndex:1 titile:@"新帖" imageName:@"tabBar_new_icon" selectedImageName:@"tabBar_new_click_icon"];
    
    // 關(guān)注tabBarItem設(shè)置
    [self setupOneTabBarButtonVcIndex:2 titile:@"關(guān)注" imageName:@"tabBar_friendTrends_icon" selectedImageName:@"tabBar_friendTrends_click_icon"];
    
    // 我tabBarItem設(shè)置
    [self setupOneTabBarButtonVcIndex:3 titile:@"我" imageName:@"tabBar_me_icon" selectedImageName:@"tabBar_me_click_icon"];
}

// ----------------------------------------------------------------------------
// 設(shè)置一個tabBarButton信息
- (void)setupOneTabBarButtonVcIndex:(NSInteger)vcIndex titile:(NSString *)title imageName:(NSString *)imageName selectedImageName:(NSString *)selectedImageName
{
    // 1.獲取子控制器(UINavigationController),并設(shè)置標題和圖片
    WXNavigationController *nav = self.childViewControllers[vcIndex];
    
    nav.tabBarItem.title = title;
    nav.tabBarItem.image = [UIImage imageNamed:imageName];
    nav.tabBarItem.selectedImage = [UIImage imageWithOriginalRender:selectedImageName];
}
  • 3.設(shè)置自定義tabBar
    • 將系統(tǒng)的tabBar換成自定義tabBar,系統(tǒng)的tabBar是readOnly,用KVC設(shè)置
// ----------------------------------------------------------------------------
// 設(shè)置自定義tabBar
- (void)setupTabBar
{
    WXTabBar *tabBar = [[WXTabBar alloc] init];
    // 1.將系統(tǒng)的tabBar換成自定義tabBar,系統(tǒng)的tabBar是readOnly,用KVC設(shè)置
    [self setValue:tabBar forKey:@"tabBar"];
}
  • 4.統(tǒng)一設(shè)置TabBarItem的文字屬性
    • 1.iOS7之前(在UIStringDrawing.h中可以找到)

      • 比如UITextAttributeFont\UITextAttributeTextColor
      • 規(guī)律:UITextAttributeXXX
    • 2.iOS7開始(在NSAttributedString.h中可以找到)

      • 比如NSFontAttributeName\NSForegroundColorAttributeName
      • 規(guī)律:NSXXXAttributeName
      1. initialize方法在第一次使用當(dāng)前類或者它的子類的時候調(diào)用,在initialize方法統(tǒng)一設(shè)置必須判斷是不是當(dāng)前類,如果在initialize方法統(tǒng)一設(shè)置時,沒判斷是否是當(dāng)前類,其子類的TabBarItem也會被統(tǒng)一設(shè)置.建議在load方法中統(tǒng)一設(shè)置,之后會對使用load方法設(shè)置進行解析.
// ----------------------------------------------------------------------------
// 第一次使用當(dāng)前類或者它的子類的時候調(diào)用
+ (void)initialize
{
    // 一次性設(shè)置設(shè)置tabBarItem字體顏色
    // 1.判斷是否是WXTabBarController
    if (self == [WXTabBarController class]) {
        // 1.1 獲取item
        UITabBarItem *item = [UITabBarItem appearanceWhenContainedIn:self, nil];
        
        NSDictionary *attrNormal = @{NSForegroundColorAttributeName : [UIColor redColor]};
        [item setTitleTextAttributes:attrNormal forState:UIControlStateSelected];
        NSDictionary *attrHigh = @{NSForegroundColorAttributeName : [UIColor grayColor]};
        [item setTitleTextAttributes:attrHigh forState:UIControlStateNormal];
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市病瞳,隨后出現(xiàn)的幾起案子揽咕,更是在濱河造成了極大的恐慌,老刑警劉巖套菜,帶你破解...
    沈念sama閱讀 217,084評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件亲善,死亡現(xiàn)場離奇詭異,居然都是意外死亡笼踩,警方通過查閱死者的電腦和手機逗爹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,623評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嚎于,“玉大人掘而,你說我怎么就攤上這事∮诠海” “怎么了袍睡?”我有些...
    開封第一講書人閱讀 163,450評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長肋僧。 經(jīng)常有香客問我斑胜,道長,這世上最難降的妖魔是什么嫌吠? 我笑而不...
    開封第一講書人閱讀 58,322評論 1 293
  • 正文 為了忘掉前任止潘,我火速辦了婚禮,結(jié)果婚禮上辫诅,老公的妹妹穿的比我還像新娘凭戴。我一直安慰自己,他們只是感情好炕矮,可當(dāng)我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布么夫。 她就那樣靜靜地躺著者冤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪档痪。 梳的紋絲不亂的頭發(fā)上涉枫,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天,我揣著相機與錄音腐螟,去河邊找鬼愿汰。 笑死,一個胖子當(dāng)著我的面吹牛乐纸,可吹牛的內(nèi)容都是我干的尼桶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锯仪,長吁一口氣:“原來是場噩夢啊……” “哼泵督!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起庶喜,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤小腊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后久窟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體秩冈,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年斥扛,在試婚紗的時候發(fā)現(xiàn)自己被綠了入问。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,773評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡稀颁,死狀恐怖芬失,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情匾灶,我是刑警寧澤棱烂,帶...
    沈念sama閱讀 35,470評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站阶女,受9級特大地震影響颊糜,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜秃踩,卻給世界環(huán)境...
    茶點故事閱讀 41,080評論 3 327
  • 文/蒙蒙 一衬鱼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧憔杨,春花似錦鸟赫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,713評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至妖啥,卻和暖如春霉颠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荆虱。 一陣腳步聲響...
    開封第一講書人閱讀 32,852評論 1 269
  • 我被黑心中介騙來泰國打工蒿偎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人怀读。 一個月前我還...
    沈念sama閱讀 47,865評論 2 370
  • 正文 我出身青樓诉位,卻偏偏與公主長得像,于是被迫代替她去往敵國和親菜枷。 傳聞我的和親對象是個殘疾皇子苍糠,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,689評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載自:https://github.com/Tim9Liu9/TimLiu-iOS 目錄 UI下拉刷新模糊效果A...
    袁俊亮技術(shù)博客閱讀 11,923評論 9 105
  • 現(xiàn)在寫這個挺尷尬的——既不是什么搶先看也不是經(jīng)典重溫,不管怎么樣啤誊,就是不能如你所愿岳瞭,不然你會誤以為掌控一切。 我明...
    梨叔吧閱讀 705評論 11 12
  • 現(xiàn)在移民德國主要有三個方向: 婚姻移民蚊锹、工作移民瞳筏、投資移民 1. 婚姻移民。這個簡單易懂牡昆,與德籍人士結(jié)婚姚炕,獲得8年...
    李怡然閱讀 538評論 0 3
  • Stephen_N閱讀 113評論 0 0
  • 又過了一天,望望下午四點掩在陰云下的日頭丢烘,嗯柱宦,閑極無聊的一天,想朋友們的熱鬧了播瞳。不知道是不是歲數(shù)長了一點捷沸,心就空...
    乙等閱讀 359評論 1 11