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

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

程序员文章站 2022-07-10 12:12:22
IOS--聊天界面底部菜单栏。 实现的思路主要是:约束动画。 实现较简单,这里直接上代码: 。h文件: #import @protocol ShowMore...

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

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

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

    
}