iOS給導航欄添加類似于微信的小菊花

LabeledActivityIndicatorView

UIActivityIndicatorView with a label which can be added to UIButton and UINavigationBar.UINavigationItem

先上一張微信聊天界面導航欄表示網(wǎng)絡請求的效果圖

Wechat

再放一張最終的效果圖

UIActivityIndicatorView

以下要做的就是給UIActivityIndicatorView添加一個注釋兔辅,來實現(xiàn)微信NavigationBar上的效果,不多說,擼代碼:

  • LabeledActivityIndicatorView.h文件

      @interface LabeledActivityIndicatorView : UIView
      /**
      指定activityIndicatorView的style的初始化方式版述,也可直接[LabeledActivityIndicatorView new]創(chuàng)建
    
      @param style 只有 UIActivityIndicatorViewStyleWhite或者 UIActivityIndicatorViewStyleGray 可選广料,默認為UIActivityIndicatorViewStyleGray
      */
      - (instancetype)initWithActivityIndicatorViewStyle:(UIActivityIndicatorViewStyle)style;
    
      /**
      設置小菊花后邊的文字
    
      @param description 需要顯示的文字
      @param font 字體大小樣式(為nil時默認為第一次設置的大小钦扭,未設置過則為默認的17號字體)
      @param color 字體顏色(為nil時默認為第一次設置的顏色戒劫,未設置過則為黑色)
      */
      - (void)setDescription:(NSString *)description font:(UIFont *)font color:(UIColor *)color;
    
      /**
      開始旋轉(zhuǎn)
      */
       - (void)startRotation;
    
      /**
      停止旋轉(zhuǎn)并隱藏小菊花
      */
      - (void)stopRotation;
    
      /**
      停止旋轉(zhuǎn)嗅骄,隱藏小菊花并顯示完成圖標“success.png”
      */
      - (void)stopRotationWithDone;
    
      /**
      將該view移除胳挎,如果父視圖為button,則自動恢復button的原title
      */
      - (void)stopRotationWithFaild;
    
      @end
    
  • LabeledActivityIndicatorView.m

      @interface LabeledActivityIndicatorView()
    
      @property (nonatomic, strong) UIActivityIndicatorView *aiView;
      @property (nonatomic, strong) UILabel *label;
      @property (nonatomic, assign) CGFloat labelWidth;
    
      @property (nonatomic, weak) UIImageView *suc;
    
      @property (nonatomic, strong) NSString *buttonTitle;
    
      @end
    
      @implementation LabeledActivityIndicatorView
    
      - (instancetype)initWithFrame:(CGRect)frame {
      if (self = [super initWithFrame:frame]) {
      [self addSubViewsWithStyle:UIActivityIndicatorViewStyleGray];
      }
      return self;
      }
    
      - (instancetype)initWithActivityIndicatorViewStyle:(UIActivityIndicatorViewStyle)style {
         if (self = [super init]) {
            [self addSubViewsWithStyle:style];
         }
         return self;
      }
    
      - (void)addSubViewsWithStyle:(UIActivityIndicatorViewStyle)style {
    
      self.userInteractionEnabled = NO;
      if (style == UIActivityIndicatorViewStyleWhiteLarge) style = UIActivityIndicatorViewStyleGray;
      _aiView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:style];
      _aiView.frame = CGRectMake(0, 0, 20, 20);
      _aiView.hidesWhenStopped = YES;
      [self addSubview:_aiView];
    
      _label = [UILabel new];
      _label.backgroundColor = [UIColor clearColor];
      [self addSubview:_label];
      }
    
      - (void)setDescription:(NSString *)description font:(UIFont *)font color:(UIColor *)color {
      if ([self.superview isKindOfClass:[UIButton class]]) {
      self.buttonTitle = [((UIButton *)(self.superview)).titleLabel.text copy];
      [((UIButton *)(self.superview)) setTitle:nil forState:UIControlStateNormal];
      }
      //    else if ([self.superview isKindOfClass:[UINavigationBar class]]) {
      //        self.buttonTitle = ((UINavigationBar *)(self.superview)).items.firstObject.title;
      //    } // 暫時不適配導航欄 需要手動回復title
      _label.text = description;
      if (font) _label.font = font;
      if (color) _label.textColor = color;
      [self updateLayout];
      }
    
      - (void)updateLayout{
          CGFloat superViewWidth = self.superview.frame.size.width;
          CGRect rect = self.frame;
          rect.size.height = _aiView.frame.size.height;
          CGFloat aiViewWidth = _aiView.hidden ? 0 :          _aiView.frame.size.width + 3;
          CGFloat sucWidth = _suc ? 23 : 0;
          rect.size.width = aiViewWidth + self.labelWidth + sucWidth;
          if (rect.size.width > superViewWidth && superViewWidth > 0) {
           rect.size.width = superViewWidth;
          }
          self.frame = rect;
          self.center = CGPointMake(superViewWidth * 0.5, self.superview.frame.size.height * 0.5);
          _label.frame = CGRectMake(aiViewWidth + sucWidth, 0, rect.size.width - aiViewWidth - sucWidth, _aiView.frame.size.height);
          [self setNeedsLayout];
      }
    
      - (CGFloat)labelWidth {
          NSString *str = _label.text;
          NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
          attrs[NSFontAttributeName] = _label.font;
          CGFloat width =  [str boundingRectWithSize:CGSizeMake(0, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size.width;
          return width;
      }
    
      - (void)startRotation {
          _aiView.hidden = NO;
          [_suc removeFromSuperview];
          _suc = nil;
          [self.aiView startAnimating];
          [self updateLayout];
      }
    
      - (void)stopRotation {
          [_aiView stopAnimating];
          [self updateLayout];
      }
    
      - (void)stopRotationWithDone {
          [_suc removeFromSuperview];
          UIImageView *suc = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
          suc.image = [UIImage imageNamed:@"success.png"];
          self.aiView.hidden = YES;
          [self addSubview:suc];
          _suc = suc;
          [self updateLayout];
      }
    
      - (void)stopRotationWithFaild {
          if ([self.superview isKindOfClass:[UIButton class]]) {
              [(UIButton *)self.superview setTitle:self.buttonTitle forState:UIControlStateNormal];
          }
      //    else if ([self.superview isKindOfClass:[UINavigationBar class]]) {
      //        ((UINavigationBar *)(self.superview)).items.firstObject.title =       self.buttonTitle;
      //    } // 暫時不適配導航欄
          [self removeFromSuperview];
      }
    
      @end
    
  • 最后放上GitHub鏈接Camoufleur掸读,喜歡的給個Star吧.

最后編輯于
?著作權(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é)果婚禮上,老公的妹妹穿的比我還像新娘缩幸。我一直安慰自己壹置,他們只是感情好,可當我...
    茶點故事閱讀 67,370評論 6 390
  • 文/花漫 我一把揭開白布表谊。 她就那樣靜靜地躺著蒸绩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪铃肯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,274評論 1 300
  • 那天传蹈,我揣著相機與錄音押逼,去河邊找鬼步藕。 笑死,一個胖子當著我的面吹牛挑格,可吹牛的內(nèi)容都是我干的咙冗。 我是一名探鬼主播,決...
    沈念sama閱讀 40,126評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼漂彤,長吁一口氣:“原來是場噩夢啊……” “哼雾消!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挫望,我...
    開封第一講書人閱讀 38,980評論 0 275
  • 序言:老撾萬榮一對情侶失蹤立润,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后媳板,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桑腮,經(jīng)...
    沈念sama閱讀 45,414評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,599評論 3 334
  • 正文 我和宋清朗相戀三年蛉幸,在試婚紗的時候發(fā)現(xiàn)自己被綠了破讨。 大學時的朋友給我發(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
  • 正文 我出身青樓累舷,卻偏偏與公主長得像浩考,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子被盈,可洞房花燭夜當晚...
    茶點故事閱讀 44,689評論 2 354

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