欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-20 19:58:10
-本安全出自个人小项目仿boss直聘当中的聊天信息界面: 实现的思路主要是:约束动画。 实现较简单,这里直接上代码: 。h文件: #import <...

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

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

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

实现较简单,这里直接上代码:

。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实现聊天界面底部菜单栏效果,希望对大家有所帮助

上一篇:

下一篇: