IOS實(shí)現(xiàn)聊天界面底部菜單欄效果
更新時(shí)間：2017年09月08日 09:10:13 投稿：mrr
本文給大家分享的是放boss直聘當(dāng)中的聊天信息界面，主要思路是約束動畫，實(shí)現(xiàn)代碼比較簡單，下面小編通過本文給大家分享IOS實(shí)現(xiàn)聊天界面底部菜單欄效果，需要的的朋友參考下吧
-本安全出自個(gè)人小項(xiàng)目仿boss直聘當(dāng)中的聊天信息界面：
實(shí)現(xiàn)的思路主要是：約束動畫。
實(shí)現(xiàn)較簡單，這里直接上代碼：
。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; //底部隱藏部分，需要點(diǎn)擊顯示部分才能顯示出來 @property(nonatomic,weak) id<ShowMoreOptionListener> delegate; //下面更多操作菜單的的狀態(tài)代理器 @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);
}];
//設(shè)置編輯框底部線
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);
}];
//創(chuàng)建表情
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));
}];
//創(chuàng)建+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));
}];
//設(shè)置永久顯示底部線
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);
}];
// //下面開始處理隱藏部分，默認(rèn)顯示快捷消息
// 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{
//下面開始處理隱藏部分，默認(rèn)顯示快捷消息
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 實(shí)現(xiàn)觀察主題 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];
//使用約束來達(dá)到效果，下面開始添加約束 靠著底部
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];
}
//更多操作按鈕的協(xié)議監(jiān)聽接口
-(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];
}];
}
總結(jié)
以上所述是小編給大家介紹的IOS實(shí)現(xiàn)聊天界面底部菜單欄效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
iOS使用視聽媒體框架AVFoundation實(shí)現(xiàn)照片拍攝
這篇文章主要為大家詳細(xì)介紹了iOS使用視聽媒體框架AVFoundation實(shí)現(xiàn)照片拍攝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
在iOS中，也同樣支持sqlite。目前有很多第三方庫，封裝了sqlite操作，比如swift語言寫的SQLite.swift，對sqlite感興趣的小伙伴們可以參考一下2016-05-05
淺談iOS應(yīng)用中的相關(guān)正則及驗(yàn)證
下面小編就為大家?guī)硪黄獪\談iOS應(yīng)用中的相關(guān)正則及驗(yàn)證。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
本文總結(jié)了2016年比較嚴(yán)重的iOS漏洞（可用于遠(yuǎn)程代碼執(zhí)行或越獄），希望能夠?qū)Υ蠹乙苿影踩矫娴墓ぷ骱脱芯繋硪恍椭?/div> 2016-12-12
iOS中使用schema協(xié)議調(diào)用APP和使用iframe打開APP的例子
這篇文章主要介紹了iOS中使用schema協(xié)議調(diào)用APP和使用iframe打開APP的例子,用在瀏覽器中打開APP,需要的朋友可以參考下2014-08-08
IOS 中UIImageView響應(yīng)點(diǎn)擊事件
這篇文章主要介紹了IOS 中UIImageView響應(yīng)點(diǎn)擊事件的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了110.iOS10新特性適配教程XCode8新特性解析的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了IOS提醒用戶重新授權(quán)打開定位功能的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了 swift 隱式可選型實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
在開發(fā)中，我們經(jīng)常需要獲取設(shè)備的型號以進(jìn)行數(shù)據(jù)統(tǒng)計(jì)或者做不同的適配。這篇文章主要給大家介紹了關(guān)于iOS如何獲取設(shè)備型號的最新方法，需要的朋友可以參考下2018-11-11最新評論