IOS实现聊天界面底部菜单栏效果

-本安全出自个人小项目仿boss直聘当中的聊天信息界面：

实现的思路主要是：约束动画。

实现较简单，这里直接上代码：

。h文件：

#import <uikit/uikit.h> 
@protocol showmoreoptionlistener <nsobject> 
@optional 
-(void) onchanglistener; 
@end 
@class scrollview; 
/** 
 底部菜单视图 
 */ 
@interface bottommenuview : uiview 
@property(nonatomic,strong) uiview* showpartview;    //总是可见部分 
@property(nonatomic,strong) uiview* hiddenpartview;   //底部隐藏部分，需要点击显示部分才能显示出来 
@property(nonatomic,weak) id<showmoreoptionlistener> delegate; //下面更多操作菜单的的状态代理器 
@property(nonatomic,strong) scrollview* emojipanel; 
-(void) buildoptionmenu; 
@end 

.m文件：

#import "bottommenuview.h" 
#import "masonry.h" 
#import "quickwordsview.h" 
#import "scrollview.h" 
#import "constants.h" 
static const int quickchat = 31; 
static const int emoji = 32; 
static const int addtype = 33; 
static const int emojipanel = 34; 
static const int quickchatpanel = 34; 
@implementation bottommenuview 
-(instancetype) initwithframe:(cgrect)frame{ 
  if(self = [super initwithframe:frame]){} 
  return self; 
} 
-(void) buildoptionmenu{ 
  self.showpartview = [[uiview alloc] init]; 
  //self.showpartview.backgroundcolor = [uicolor greencolor]; 
  [self addsubview:self.showpartview]; 
  //添加showpartview约束 
  [self.showpartview mas_makeconstraints:^(masconstraintmaker *make) { 
    make.right.equalto(self).offset(0); 
    make.top.equalto(self); 
    make.left.equalto(self); 
    make.height.mas_equalto(40); 
  }]; 
  uibutton* showquickwordsbtn = [[uibutton alloc] init]; 
  [showquickwordsbtn setimage:[uiimage imagenamed:@"ic_chat_input_method"] forstate:uicontrolstatenormal]; 
  showquickwordsbtn.imageview.contentmode = uiviewcontentmodescaleaspectfit; 
  showquickwordsbtn.contenthorizontalalignment = uicontrolcontenthorizontalalignmentleft; 
  showquickwordsbtn.imageedgeinsets = uiedgeinsetsmake(0, -10, 0, 0); 
  showquickwordsbtn.tag = quickchat; 
  [showquickwordsbtn addtarget:self action:@selector(onclick:) forcontrolevents:uicontroleventtouchupinside]; 
  [self.showpartview addsubview:showquickwordsbtn]; 
  [showquickwordsbtn mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(self.showpartview).offset(0); 
    make.top.equalto(self.showpartview); 
    make.size.mas_equalto(cgsizemake(90, 40)); 
  }]; 
  //中间编辑框 
  uitextview* edittext = [[uitextview alloc] init]; 
  [self.showpartview addsubview:edittext]; 
  [edittext mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(showquickwordsbtn.mas_trailing).offset(-10); 
    make.centery.equalto(showquickwordsbtn.mas_centery); 
    make.height.mas_equalto(37); 
    make.trailing.equalto(self.showpartview).offset(-100); 
  }]; 
  //设置编辑框底部线 
  uiview* edittextbottomline = [[uiview alloc] init]; 
  edittextbottomline.backgroundcolor = [uicolor blackcolor]; 
  [self.showpartview addsubview:edittextbottomline]; 
  [edittextbottomline mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(showquickwordsbtn.mas_trailing).offset(-10); 
    make.top.equalto(showquickwordsbtn.mas_bottom); 
    make.height.mas_equalto(1.0); 
    make.trailing.equalto(self.showpartview).offset(-100); 
  }]; 
  //创建表情 
  uibutton* emojibtn = [[uibutton alloc] init]; 
  [emojibtn setimage:[uiimage imagenamed:@"ic_emoji.png"] forstate:uicontrolstatenormal]; 
  emojibtn.imageview.contentmode = uiviewcontentmodescaleaspectfit; 
  emojibtn.tag = emoji; 
  [emojibtn addtarget:self action:@selector(onclick:) forcontrolevents:uicontroleventtouchupinside]; 
  [self addsubview:emojibtn]; 
  [emojibtn mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(edittext.mas_trailing).offset(5); 
    make.centery.equalto(self.showpartview.mas_centery); 
    make.size.mas_equalto(cgsizemake(38, 38)); 
  }]; 
  //创建+btn 
  uibutton* addbtn = [[uibutton alloc] init]; 
  [addbtn setimage:[uiimage imagenamed:@"ic_gallery_add.png"] forstate:uicontrolstatenormal]; 
  addbtn.imageview.contentmode = uiviewcontentmodescaleaspectfit; 
  addbtn.tag = addtype; 
  [addbtn addtarget:self action:@selector(onclick:) forcontrolevents:uicontroleventtouchupinside]; 
  [self addsubview:addbtn]; 
  [addbtn mas_makeconstraints:^(masconstraintmaker *make) { 
    make.right.equalto(self.showpartview).offset(-10); 
    make.centery.equalto(self.showpartview.mas_centery); 
    make.size.mas_equalto(cgsizemake(38, 38)); 
  }]; 
  //设置永久显示底部线 
  uiview* bottomline = [[uiview alloc] init]; 
  bottomline.backgroundcolor = [uicolor blackcolor]; 
  [self.showpartview addsubview:bottomline]; 
  [bottomline mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(showquickwordsbtn); 
    make.top.equalto(self.showpartview.mas_bottom).offset(5); 
    make.height.mas_equalto(1.0); 
    make.trailing.equalto(self.showpartview.mas_trailing); 
  }]; 
//  //下面开始处理隐藏部分，默认显示快捷消息 
//  quickwordsview* quickwordsview = [[quickwordsview alloc] init]; 
//  quickwordsview.separatorinset = uiedgeinsetsmake(0,10,0,10); //top left right down 
//  quickwordsview.tablefooterview = [[uiview alloc] initwithframe:cgrectzero]; //删除底部多余行，及分割线 
//  quickwordsview.tag = 100; 
//  [self addsubview:quickwordsview]; 
//  [quickwordsview mas_makeconstraints:^(masconstraintmaker *make) { 
//    make.leading.equalto(self); 
//    make.trailing.equalto(self.mas_trailing); 
//    make.top.equalto(self.mas_top).offset(47); 
//    make.height.mas_equalto(210); 
//     
//  }]; 
  [self buildquickchat]; 
} 
-(void)onclick:(uibutton*) button{ 
  switch(button.tag){ 
    case quickchat:{ 
      if(self.delegate){ 
        [self.delegate onchanglistener]; 
      } 
    }break; 
    case emoji:{ 
    }break; 
    case addtype:{ 
    }break; 
  } 
} 
-(void) buildquickchat{ 
  //下面开始处理隐藏部分，默认显示快捷消息 
  quickwordsview* quickwordsview = [[quickwordsview alloc] init]; 
  quickwordsview.separatorinset = uiedgeinsetsmake(0,10,0,10); //top left right down 
  quickwordsview.tablefooterview = [[uiview alloc] initwithframe:cgrectzero]; //删除底部多余行，及分割线 
  quickwordsview.tag = quickchatpanel; 
  [self addsubview:quickwordsview]; 
  [quickwordsview mas_makeconstraints:^(masconstraintmaker *make) { 
    make.leading.equalto(self); 
    make.trailing.equalto(self.mas_trailing); 
    make.top.equalto(self.mas_top).offset(47); 
    make.height.mas_equalto(210); 
  }]; 
} 
//-------------------kvo 实现观察主题 end---------------- 
@end 

测试代码：

-(void) testbottommenu{ 
   self.menu = [[bottommenuview alloc] init]; 
  self.menu.translatesautoresizingmaskintoconstraints = no; 
  //self.menu.backgroundcolor = [uicolor redcolor]; 
  [self.menu buildoptionmenu]; 
  self.menu.delegate = self; 
  [self.view addsubview:self.menu]; 
  //使用约束来达到效果，下面开始添加约束 靠着底部 
  nslayoutconstraint* alginbottom = [nslayoutconstraint constraintwithitem:self.menu 
                                  attribute:nslayoutattributebottom 
                                  relatedby:nslayoutrelationequal 
                                   toitem:self.view 
                                  attribute:nslayoutattributebottom 
                                 multiplier:1 
                                  constant:0.0]; 
  [self.view addconstraint:alginbottom]; 
  //添加高度 
  self.bottomheightcons = [nslayoutconstraint 
               constraintwithitem:self.menu 
               attribute:nslayoutattributeheight 
               relatedby:nslayoutrelationequal 
               toitem:nil 
               attribute:0 
               multiplier:1 
               constant:260]; 
  [self.menu addconstraint:self.bottomheightcons]; 
  //添加右边约束 
  nslayoutconstraint* rightmargin = [nslayoutconstraint constraintwithitem:self.menu 
                                  attribute:nslayoutattributeright 
                                  relatedby:nslayoutrelationequal 
                                   toitem:self.view 
                                  attribute:nslayoutattributeright 
                                 multiplier:1 
                                  constant:0.0]; 
  [self.view addconstraint:rightmargin]; 
  //添加左边约束 
  nslayoutconstraint* leftmargin = [nslayoutconstraint constraintwithitem:self.menu 
                                  attribute:nslayoutattributeleft 
                                  relatedby:nslayoutrelationequal 
                                   toitem:self.view 
                                  attribute:nslayoutattributeleft 
                                 multiplier:1 
                                  constant:0.0]; 
  [self.view addconstraint:leftmargin]; 
} 
//更多操作按钮的协议监听接口 
-(void)onchanglistener{ 
  //[self.view layoutifneeded]; 
  if(self.bottomheightcons.constant == 40){ 
    self.bottomheightcons.constant = 260; 
  }else{ 
    self.bottomheightcons.constant = 40; 
  } 
  [uiview animatewithduration:0.5 animations:^{ 
    [self.view layoutifneeded]; 
  }];    
} 

总结

以上所述是小编给大家介绍的ios实现聊天界面底部菜单栏效果，希望对大家有所帮助