IOS--聊天界面底部菜单栏
程序员文章站
2022-07-10 12:12:22
IOS--聊天界面底部菜单栏。
实现的思路主要是:约束动画。
实现较简单,这里直接上代码:
。h文件:
#import
@protocol ShowMore...
IOS--聊天界面底部菜单栏。
实现的思路主要是:约束动画。
实现较简单,这里直接上代码:
。h文件:
#import @protocol ShowMoreOptionListener @optional -(void) onChangListener; @end @class ScrollView; /** 底部菜单视图 */ @interface BottomMenuView : UIView @property(nonatomic,strong) UIView* showPartView; //总是可见部分 @property(nonatomic,strong) UIView* hiddenPartView; //底部隐藏部分,需要点击显示部分才能显示出来 @property(nonatomic,weak) id 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]; }]; }