ios自定義中間凸出 UITabBar，so easy……

阿新 • • 發佈：2019-01-02

IOS 自定義UITabBar ，中間按鈕凸出

很多專案中都有中間凸出的UI設計，這個不規則的設計才坑爹，必須要自定義。在安卓上做這個也是坑，現在只說ios的實現。

示意圖：
demo示意圖

問題和難點：

橫線，凸出部分上的黑色半圓線;
超出UITabbr部分的點選事件;
UITabBar 隱藏後，上面自定義的凸出按鈕隱藏。
按鈕點選事件傳遞。

方案：

自定義UITabBar；
重寫UITabBar的layoutSubviews，重新排列底部的UITabBarButton,並在中間加入自定義的按鈕,新增點選監聽，處理點選事件。
自定義UITabBarController ，通過kvc 替換自己的UITabBar；

解決：

解決示意圖

我的解決方法：
1、中間的是一個圓形圖片按鈕，下面是一個UIlabel，組成了中間的按鈕。
2、在自定義的UITab 上自己畫一條橫線，流出中間部分不畫。
3、在中間加入一個自定義的UIView，在UIView中畫半圓，設定UIView 的masksToBounds為YES；設定layer的cornerRadius 為他的寬高的一半，這樣他就是一個白色的半圓，並有一個黑色半圓。

1.自定義半圓UIView

//H 檔案：

#define SINGLE_LINE_WIDTH           (1 / [UIScreen mainScreen].scale)
#define SINGLE_LINE_ADJUST_OFFSET   ((1 / [UIScreen mainScreen].scale) / 2) 


@interface GBArcView : UIView

@end

//M 檔案：
#import "GBArcView.h"
#import "UIView+Extension.h"// 用了其他程式碼，這個大家自己找一下

@implementation GBArcView



//繪製半圓
- (void)drawRect:(CGRect)rect {


    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, RGB_COLOR(200, 200 
, 200).CGColor);


    CGContextSetLineWidth(context, SINGLE_LINE_WIDTH);
    CGContextBeginPath(context);
    CGFloat lineMargin =self.width*0.5f;

    //1px線，偏移畫素點
    CGFloat pixelAdjustOffset = 0;
    if (((int)(1 * [UIScreen mainScreen].scale) + 1) % 2 == 0) {
        pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;
    }




    CGFloat yPos = self.width*0.5f - pixelAdjustOffset;

     CGFloat xPos = self.width*0.5f - pixelAdjustOffset;

    CGContextAddArc(context, xPos, yPos, self.width*0.5f, M_PI, 0, 0);


    CGContextStrokePath(context);


}

2、自定義UITabbar

//H 檔案
#import <UIKit/UIKit.h>

@class GBTabBar;

//自定義按鈕點選事件代理
@protocol GBTabBarViewDelegate <NSObject>

- (void) mainTabBarViewDidClick : (GBTabBar *)hBTabBarView;


@end

@interface GBTabBar : UITabBar

@property(nonatomic,weak) id<GBTabBarViewDelegate> tabbarDelegate;

@end



//M 檔案


#import "GBTabBar.h"
#import <UIKit/UIKit.h>
#import "UIView+Extension.h"
#import "GBArcView.h"




@interface GBTabBar()

@property (nonatomic,strong) UIButton *addButton;//自定義圓形圖片按鈕

@property (nonatomic,strong) UILabel *titleLabel;//中間自定義文字
@property (nonatomic,strong) GBArcView *view; //半圓View

@property(assign,nonatomic)int index;//UITabBar子view的索引
@end

@implementation GBTabBar


//繪製橫線
- (void)drawRect:(CGRect)rect {


    //中間的按鈕寬度是UItabBar的高度，其他按鈕的寬度就是，(self.width-self.height)/4.0

    CGFloat buttonW = (self.width-self.height)/4.0;


    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, RGB_COLOR(200, 200, 200).CGColor);


    CGContextSetLineWidth(context, SINGLE_LINE_WIDTH);
    CGContextBeginPath(context);
    CGFloat lineMargin =0;

  //1PX線，畫素偏移
    CGFloat pixelAdjustOffset = 0;
    if (((int)(1 * [UIScreen mainScreen].scale) + 1) % 2 == 0) {
        pixelAdjustOffset = SINGLE_LINE_ADJUST_OFFSET;
    }


    CGFloat yPos = lineMargin - pixelAdjustOffset;

    //第一段線
    CGContextMoveToPoint(context, 0, yPos);
    CGContextAddLineToPoint(context, buttonW*2+SINGLE_LINE_WIDTH*2, yPos);
    CGContextStrokePath(context);

    //第二段線

    CGContextMoveToPoint(context, buttonW*2+self.height-SINGLE_LINE_WIDTH*2, yPos);
    CGContextAddLineToPoint(context, self.bounds.size.width, yPos);

    CGContextSetStrokeColorWithColor(context, RGB_COLOR(200, 200, 200).CGColor);
    CGContextStrokePath(context);



}

//自定義的按鈕點選事件處理，如果點選的點在自定義的按鈕中，就返回自定義按鈕處理事件。如果不處理，那麼按鈕只有在UITabrBar 中的 一半可以被點選，有點選事件響應。
-(UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event{

    //判斷點是否在按鈕上，如果是就讓按鈕處理事件
    if(CGRectContainsPoint(self.addButton.frame, point)){
        return self.addButton ;
    }



   return  [super hitTest:point withEvent:event];

}


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {


    }
    return self;
}

//重新初始化方法，從stroyboard 中載入，會呼叫
-(instancetype)initWithCoder:(NSCoder *)aDecoder{



    if (self = [super initWithCoder:aDecoder]) {

        self.backgroundColor=[UIColor whiteColor];
        self.clipsToBounds=NO;//不裁剪子控制元件
        self.index=0;//初始化索引

        //設定tabBaritem 的文字顏色
        [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:RGB_COLOR(74, 74, 74), UITextAttributeTextColor, nil] forState:UIControlStateNormal];

        [[UITabBarItem appearance] setTitleTextAttributes:                                                         [NSDictionary dictionaryWithObjectsAndKeys:RGB_COLOR(0, 147, 197),UITextAttributeTextColor, nil]forState:UIControlStateSelected];

    }
    return self;
}
//自定義按鈕的懶載入
-(UIButton *)addButton{


    if(!_addButton){


        UIButton *button=[[UIButton alloc] init];
        self.addButton = button;
        [self.addButton setImage:[UIImage imageNamed:@"tab_open"] forState:UIControlStateNormal];
        [self.addButton addTarget:self action:@selector(addClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.addButton];
    }


    return _addButton;
}



//自定義半圓View的懶載入
-(UIView *)view{


    if(!_view){

       CGFloat buttonW = (self.width-self.height)/4.0;


        GBArcView *view = [[GBArcView alloc]initWithFrame:CGRectMake(buttonW*2, -self.height*0.5f, self.height, self.height)];


        view.backgroundColor=[UIColor whiteColor];

        view.layer.masksToBounds=YES;
        view.layer.cornerRadius=self.height*0.5f;


        _view=view;

        [self addSubview:view];



    }


    return _view;

}



-(UILabel *)titleLabel{

    if(!_titleLabel){


        UILabel *titleLabel=[[UILabel alloc] init];

        titleLabel.text[email protected]"開門";
        titleLabel.textColor=[UIColor blackColor];

        titleLabel.font=[UIFont systemFontOfSize:12.0];
        [titleLabel sizeToFit];

       _titleLabel = titleLabel;

        [self addSubview:titleLabel];
    }


    return _titleLabel;
}



//重寫layoutSubviews，重新排布子View

-(void)layoutSubviews{

    self.index=0;
    [super layoutSubviews];



    CGFloat buttonW = SCREEN_WIDTH * 0.2 ;//SCREEN_WIDTH * 0.2

    for (int i = 0; i < self.subviews.count; i ++) {
        UIView *view = self.subviews[i];


        if ([view isKindOfClass:NSClassFromString(@"UITabBarButton")]) {

            CGRect rect=view.frame;
            rect.size.width=buttonW;

            rect.size.height=self.frame.size.height;
            rect.origin.y=0;

            view.frame =rect;

            if(self.index<2){
             view.x=self.index*buttonW;

            }else if(self.index>=2){

                view.x=self.index*buttonW +buttonW;

            }
            self.index++;

        }
    }



    //懶載入 等所有控制元件排布後，然後 設定自定義的view，這裡注意順序，先設定背景的半圓view的Frame，然後設定按鈕的Frame，否則半圓view會擋住按鈕。
    self.view.x=2 * (self.width-self.height)/4.0;
    self.addButton.width = self.height;
    self.addButton.height = self.height;
    self.addButton.y = -self.height*0.5f;
    self.addButton.x = 2 * (self.width-self.height)/4.0;

    self.titleLabel.center=CGPointMake(self.width*0.5f, CGRectGetMaxY(self.addButton.frame)+self.titleLabel.bounds.size.height*0.5f);

}



-(void)setHidden:(BOOL)hidden{


    [super setHidden:hidden];


    //手動設定UITabBar 隱藏時，我們要將自定義的按鈕和背景隱藏
    [self.view setHidden:hidden];

    [self.addButton setHidden:hidden];


}
//******核心部分******
//當配置  hidesBottomBarWhenPushed 的viewController ,隱藏UITabBar時，會改變其frame，就是將UITabBar 的Y值設為螢幕最大的y值，就不可見。我們重寫這個方法，判斷當frame的y小於螢幕的高度 ，那麼UITabBar就是被隱藏了，這時候我們將自定的控制元件隱藏。相反的，我們就顯示我們的自定義控制元件。
-(void)setFrame:(CGRect)frame{
     [super setFrame:frame];

    if(frame.origin.y>=[UIScreen mainScreen].bounds.size.height){

        [self.view setHidden:YES];

        [self.addButton setHidden:YES];
    }else{
        [self.view setHidden:NO];
        [self.addButton setHidden:NO];

    }
}


- (void)addClick
{

//代理點選事件
    if ([self.tabbarDelegate respondsToSelector:@selector(mainTabBarViewDidClick:)]) {
        [self.tabbarDelegate mainTabBarViewDidClick:self];
    }
}

補一個圖，這個是UITabbar隱藏的時候，擷取的，可以看出被移動到螢幕最下方。

UItabbar隱藏

3、自定義UITabBarController

這裡比較簡單了，就是替換系統的UItabbr 為自己的UItabbar；
由於我的專案是stroyboard 寫的,替換比較簡單。


@interface HomeTabBarController ()<GBTabBarViewDelegate>

@property (nonatomic, strong) NSArray *items;
@end

@implementation HomeTabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

   //tabBar是UITabBarController的只讀成員變數（屬性），是不讓修改的
   //kvc 替換系統的tabbar
  //  GBTabBar *tabBar = [[GBTabBar alloc] init];
  //  [self setValue:tabBar forKeyPath:@"tabBar"];


   //已經替換的UItabbar 設定代理為當前控制器
    [self.tabBar setValue:self forKey:@"tabbarDelegate"];


}


//代理方法 ，自定義按鈕點選
-(void)mainTabBarViewDidClick:(GBTabBar *)hBTabBarView{


}

ios自定義中間凸出 UITabBar，so easy……

IOS 自定義UITabBar ，中間按鈕凸出很多專案中都有中間凸出的UI設計，這個不規則的設計才坑爹，必須要自定義。在安卓上做這個也是坑，現在只說ios的實現。示意圖：問題和難點：橫線，凸出部分上的黑色半圓線;超出UITabbr部分的點選事件;UIT

IOS 自定義軟鍵盤功能，修改換行鍵為傳送鍵

IOS專案是使用混合模式開發，在開發聊天功能時；發現軟鍵盤不能像QQ、微信那樣，換行鍵不能變為傳送；網上說是因為輸入框類別導致；嘗試過以後，還是不行；然後想到用IOS native解決；先說一下，原生APP 設定軟鍵盤換行鍵為傳送鍵： textField.returnKeyType = U

iOS 自定義中間帶突起圓形的tabbar

概述在正常的使用場景中，我們處理了比較多的矩形區域內觸控事件，比如UIButton、UIControl。一般來說，這些控制元件的圖形以及觸控區域都是矩形或者圓角矩形的。但是在一些特殊應用場景中我們有時不得不面對這樣一種比較嚴苛的需求，比如要求程式只對某個圓形

ios 自定義返回按鈕時，如何新增手勢返回

在父檢視上加上如下程式碼： self.navigationItem.hidesBackButton = YES; self.navigationController.interactivePopGestureRecognizer.delegate = self; sel

iOS自定義多變數函式，如何獲取多變數

- (instancetype)initWithTitle:otherButtonTitles, ... { NSMutableArray *buttonTitleArray = [NSMuta

iOS 深入瞭解自定義物件深拷貝，多層次深拷貝

關於iOS的深拷貝，淺拷貝已經有很多文章，不必在過多贅述。有關係統常見可變物件和不可變物件的copy 和 mutableCopy網上有很多文章，一張圖基本上可以說明那麼本文著重要研究的是自定義物件的拷貝問題，特別比如說自定義物件裡面有屬性可以一、物件持有另一個本類的例項物件，

iOS開發之自定義鍵盤（數字，字母型別等隨意切換）

專案開發很多時候用系統給的鍵盤不是很滿足自身實際需求，那就自定義一個吧：方法其實很簡單，重新定義一個view，繼承UItextfield，把UI設計好的需求鍵盤加入新的otherKeyboardView，然後執行程式碼： self.inputView =self.oth

IOS自定義圖片瀏覽器，支援瀏覽多張圖片，點選，雙擊，兩手指縮放操作，並顯示載入進度條

圖片瀏覽器Controller的主要思路是：新建一個 JZAlbumViewController，在這個controller裡主要顯示一個UIScrollView，這個UIScrollView用來顯

iOS開發之仿微博視訊邊下邊播之自定義AVPlayer播放器，邊下邊播解剖。視訊處理流程，建立連線-請求資料-統籌資料-解碼資料-視訊呈現

Tips：這次的內容分為兩篇文章講述 01、[iOS]仿微博視訊邊下邊播之封裝播放器講述如何封裝一個實現了邊下邊播並且快取的視訊播放器。 02、[iOS]仿微博視訊邊下邊播之滑動TableView自動播放講述如何實現在tableView中滑動播放視訊，並且是流暢，不阻塞

iOS自定義UISearchBar，簡單、方便、好用

本文首發地址可惡的UI非要搞一個和系統的UISearchBar的不一樣的效果，但是系統自帶的用實現不了效果，就自能自定義了。把一個UISearchBar放到UINavigationBar上。並且還要有搜尋的結果在整個頁面上。。。先看看效果圖 H

iOS 自定義UITabbar新增系統毛玻璃效果

UIImageView *backView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, TabBar_Height_1)]; backView.image = [UIIm

iOS 自定義導航欄pop返回手勢，全屏右滑返回

- (void)viewDidLoad { [superviewDidLoad]; //重新給interactivePopGestureRecognizer.delegate掛代理

ios 自定義彈出輸入框（支援自動新增分隔符，字數限制等功能）

非常感謝大家利用自己寶貴的時間來閱讀我的文章 , 今天給大家帶來的是一個自定義的彈出輸入框，支援自定義標題、各控制元件顏色、自動新增分隔符、字數限制等功能。並添加了pods匯入支援，如果需要的話希望能幫到你 , 當然, 有任何不妥的地方歡迎指正。喜歡的可以關注一下我的簡

iOS自定義導航欄，側滑返回卡死情況的解決辦法

側滑返回是iOS7新增的一個特性，如果自定義了導航欄，那麼側滑返回這個功能就會失效。雖然在自定義導航欄的viewDidLoad方法中新增self.interactivePopGestureRecognizer.delegate = (id)self;一行程式碼就

iOS 自定義scrollView寬度，分頁滑動

[scrollerView setPagingEnabled:YES]; [scrollerView setClipsToBounds:NO]; //讓280到320之間的View顯示出來我的scrollView寬度是280，需要重寫280到40得點選事件 -

jQuery基礎（常用插件表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）

此外 cookie值添加圖標 tor 列表需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali

ios 自定義鍵盤的return鍵以及鍵盤的其他一些屬性

variable 位置 arch ext ddr gin character 觸發 hone //初始化textfield並設置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(20

IOS 自定義按鈕（代碼實現）＋九宮格

uifont 排列 end uiview height iyu void rec name 在一些下載應用裏整個頁面都是按鈕，有好多好多，但是仔細觀察不難發現他們很有規律。就像下面一樣?? 很有規律的排列在屏幕上，那麽這需要我們怎麽去做能。正如標題，我們需要了解兩個知

IDEA自定義代碼模板，讓開發更快更快樂

ideaIDEA自定義代碼模板，讓開發更快更快樂IDEA中有個Live Template選項，就是用來自定義代碼模板，來提高編碼效率。1、創建模板，並做基本的變量配置，例如：@Service() $INTER$Impl $INTER${ Logger log = Logger.getLogger($I

織夢dede自定義內容分頁，datalist運用實例

專家 list 默認記錄 ext 列表 include 分頁讀取在/plus文件夾中新建一個ceshi.php文件。。<?php require(dirname(__FILE__)."/../include/common.inc.php"); require_o

ios自定義中間凸出 UITabBar，so easy……

IOS 自定義UITabBar ，中間按鈕凸出

很多專案中都有中間凸出的UI設計，這個不規則的設計才坑爹，必須要自定義。在安卓上 做這個也是坑，現在只說ios的實現。

問題和難點：

方案：

解決：

1.自定義半圓UIView

2、自定義UITabbar

補一個圖，這個是UITabbar隱藏的時候，擷取的，可以看出被移動到螢幕最下方。

3、自定義UITabBarController

相關推薦

很多專案中都有中間凸出的UI設計，這個不規則的設計才坑爹，必須要自定義。在安卓上做這個也是坑，現在只說ios的實現。