当前位置：移动技术网 > IT编程>移动开发>IOS > IOS--聊天界面底部菜单栏

IOS--聊天界面底部菜单栏

2018年03月29日 | 移动技术网IT编程 | 我要评论

周云峰打人,太仓感知网校,不厚事件

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];
    }];
    

    
}

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

iOS实现H5支付(微信、支付宝)原生封装

前言支付分app支付、h5支付、扫码支付等。app支付一般在app中使用，并且需要集成相应的支付sdk，h5支付多用于网页。如果你的app不想集成支付sdk,又... [阅读全文]
iOS APP实现微信H5支付示例总结

微信h5支付流程1、发起下单请求（调用统一下单接口）注：交易类型trade_type=mweb2、统一下单接口返回支付相关参数给商户后台，如支付跳转url（参数... [阅读全文]
iOS实现图片自动切换效果

本文实例为大家分享了ios实现图片自动切换的具体代码，供大家参考，具体内容如下#import "viewcontroller.h"#define imagevi... [阅读全文]
iOS新版微信底部工具栏遮挡问题完美解决

一、问题描述：苹果设备（ios）微信中打开h5页面，从首页跳转到其他页面后，页面的底部会出现一个带有前进和后退按钮工具栏，而该工具栏会遮挡住面底部的内容，影响页... [阅读全文]
iOS新版微信底部返回横条问题的解决

之前没有怎么接触过微信开发，只是对h5比较熟。最近维护一个微信公众号的项目，遇到了ios端返回键的坑。描述一下：从公众号打开页面后，底部有个返回的小横条，恰好也... [阅读全文]
ios中getTime()的兼容性实例代码

时间格式为：2017-12-12 12:00:00在苹果上获取时间戳有兼容性问题需要转换成2017/12/12 12:00:00 才可以正确获取到时间戳 l... [阅读全文]
iOS 使用UITextField自定义搜索框实现用户输入完之后“实时搜索”功能

注：csdn的代码块有点捞，如果浏览器窗口较窄，一行代码占了两行的位置，后面的代码就看不到了，大家可以把浏览器窗口拉大一点ui小姐姐设计的搜索框经常是五花八门，... [阅读全文]
IOS 屏幕适配方案实现缩放window的示例代码

背景：公司有个ipad项目（只支持横屏），是11年开发的，那时的ipad只有1024x768的分辨率，所以没有屏幕适配的问题，frame都是写死的。后来不同尺寸... [阅读全文]
iOS UICollectionView实现标签选择器

近来，在项目中需要实现一个类似兴趣标签的选择器。由于标签的文字长度不定，所以标签的显示长度就不定。为了实现效果，就使用了uicollectionview来实现了... [阅读全文]
SwiftUI如何仿写微信APP的首页列表视图

最近在学习 SwiftUI ，我一般都是先去学习界面布局，所以就想着仿写一下经常使用的软件的界面，所以先拿微信开刀。因为不想一次性发太多的内容，所以只好... [阅读全文]

网友评论


验证码：

IOS--聊天界面底部菜单栏

2018年03月29日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论