仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自定义菜单样式(非xib)

先给大家推荐下MJ的视频教程哈,有兴趣的小伙伴可以了解下,提升下自己的技术。

《仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自定义菜单样式(非xib)》

附上课程的链接

恋上数据结构与算法:链接https://m.ke.qq.com/course/385223?saleToken=638162&from=appso

从入门到精通Swift课程:链接https://m.ke.qq.com/course/392094?saleToken=961697&from=appso

C++和外挂实战:链接https://m.ke.qq.com/course/336509?saleToken=939081&from=appso

再给大家推荐一部电子书《iOS开发高手课》,相信对大家的进步很有帮助

《仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自定义菜单样式(非xib)》

附上课程链接地址:
《iOS 开发高手课》:链接http://gk.link/a/102yH

最近写了这个框架: FFDropDownMenu,类似手机QQ下拉菜单。
github地址:
https://github.com/chenfanfang/FFDropDownMenu
更多的使用方法的demo地址:
https://github.com/chenfanfang/CollectionsOfExample
更多的使用方法的博客地址:
http://www.jianshu.com/notebooks/5552428/latest

若觉得框架自带的菜单样式不够好看,或者布局不是自己想要的效果,那么,你可以自定义菜单选项的cell,自己给每个菜单选项cell添加子控件,自己对其进行任意样式的布局。这篇博客将介绍如何自定义菜单选项cell。

先来看下效果图

《仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自定义菜单样式(非xib)》 仿QQ下拉菜单自定义菜单样式.gif
《仿手机QQ下拉菜单框架(FFDropDownMenu) -- 自定义菜单样式(非xib)》 仿QQ下拉菜单自定义菜单样式.png

框架自带的菜单选项样式是左边是图标,右边是标题,上面的效果图是左边标题,右边图标。你也可以自定义任何样式,添加更多的控件。

<a id=”Installation”></a> Installation【安装】

From CocoaPods【使用CocoaPods】

pod  FFDropDownMenu

Manually【手动导入】

  • Drag all source files under floder FFDropDownMenu to your project.【将FFDropDownMenu文件夹中的所有源代码拽入项目中】

  • FFDropDownMenu文件夹里面的文件有

FFDropDownMenuBasedCell.h        FFDropDownMenuBasedCell.m
FFDropDownMenuBasedModel.h       FFDropDownMenuBasedModel.m
FFDropDownMenuCell.h             FFDropDownMenuCell.m
FFDropDownMenuModel.h            FFDropDownMenuModel.m
FFDropDownMenuTriangleView.h     FFDropDownMenuTriangleView.m
FFDropDownMenuView.h             FFDropDownMenuView.m


【开始使用】

先导入头文件

//若使用CocoaPods
#import <FFDropDownMenuView.h>

//若使用手动导入
#import "FFDropDownMenuView.h"

自定义继承于FFDropDownMenuBasedCell类的菜单cell

自定义菜单cell 的.h文件

#import <FFDropDownMenuBasedCell.h>

@interface FFDropDownMenuCustomCell : FFDropDownMenuBasedCell

@end

自定义菜单cell 的.m文件

#import "FFDropDownMenuCustomCell.h"

//model
#import "FFDropDownMenuModel.h"

@interface FFDropDownMenuCustomCell ()

/** 图片 */
@property (weak, nonatomic) UIImageView *customImageView;

/** 标题 */
@property (weak, nonatomic) UILabel *customTitleLabel;

/** 底部分割线 */
@property (nonatomic, weak) UIView *separaterView;
@end

@implementation FFDropDownMenuCustomCell

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //初始化子控件
        UIImageView *customImageView = [[UIImageView alloc] init];
        customImageView.contentMode = UIViewContentModeScaleToFill;
        [self addSubview:customImageView];
        self.customImageView = customImageView;
        
        UILabel *customTitleLabel = [[UILabel alloc] init];
        customTitleLabel.font = [UIFont systemFontOfSize:15];
        [self addSubview:customTitleLabel];
        self.customTitleLabel = customTitleLabel;
        
        UIView *separaterView = [[UIView alloc] init];
        separaterView.backgroundColor = [UIColor colorWithRed:25 / 255.0 green:168 / 255.0 blue:243 / 255.0 alpha:0.3];
        [self addSubview:separaterView];
        self.separaterView = separaterView;
    }
    return self;
}

- (void)layoutSubviews { //这个方法的主要任务是进行子控件frame的赋值
    [super layoutSubviews];
    //frame的赋值
    CGFloat separaterHeight = 1; //底部分割线高度
    
    //图片 customImageView
    CGFloat imageViewMargin = 3;
    CGFloat imageViewH = self.frame.size.height - 2 * imageViewMargin;
    self.customImageView.frame = CGRectMake(10, imageViewMargin, imageViewH, imageViewH);
    
    //标题
    CGFloat labelX = CGRectGetMaxX(self.customImageView.frame) + 10;
    self.customTitleLabel.frame = CGRectMake(labelX, 0, self.frame.size.width - labelX, self.frame.size.height - separaterHeight);
    
    //分割线
    self.separaterView.frame = CGRectMake(0, self.frame.size.height - separaterHeight, self.frame.size.width, separaterHeight);
}

/** 重写setMenuModel---对控件进行赋值 */
- (void)setMenuModel:(id)menuModel {
    _menuModel = menuModel;
    
    FFDropDownMenuModel *realMenuModel = (FFDropDownMenuModel *)menuModel;
    self.customTitleLabel.text = realMenuModel.menuItemTitle;
    //给imageView赋值
    self.customImageView.image = [UIImage imageNamed:realMenuModel.menuItemIconName];
}

@end

若自定义了cell,框架自带的模型FFDropDownMenuModel里面的属性不够用,可以自定义一个继承于FFDropDownMenuBasedModel的模型,自己添加属性。本篇博客的例子用框架自带的模型FFDropDownMenuModel是够用的,所以不自定义菜单模型。自定义菜单模型在这篇博客中有介绍http://www.jianshu.com/p/6a42a35ae2db

到此为止,自定义菜单样式就已经完成,接下来就是如何创建菜单了。

获取下拉菜单模型数组


/** 获取下拉菜单模型数组 */
- (NSArray *)getDropDownMenuModelsArray {
    __weak typeof(self)weakSelf = self;
    
    
    //若 模型FFDropDownMenuModel里面的属性不够用,可以自定义继承于FFDropDownMenuBasedModel的模型
    
    //菜单模型0
    FFDropDownMenuModel *menuModel0 = [FFDropDownMenuModel new];
    menuModel0.menuItemTitle = @"Twitter";
    menuModel0.menuItemIconName = @"menu0";
    menuModel0.menuBlock = ^ {
        UIViewController *vc = [UIViewController new];
        [weakSelf.navigationController pushViewController:vc animated:YES];
    };
    
    //菜单模型1
    FFDropDownMenuModel *menuModel1 = [FFDropDownMenuModel new];
    menuModel1.menuItemTitle = @"Line";
    menuModel1.menuItemIconName = @"menu1";
    menuModel1.menuBlock = ^ {
        //do something
    };
    
    //菜单模型2
    FFDropDownMenuModel *menuModel2 = [FFDropDownMenuModel new];
    menuModel2.menuItemTitle = @"QQ";
    menuModel2.menuItemIconName = @"menu2";
    menuModel2.menuBlock = ^ {
        //do something
    };
    
    NSArray *menuModelArr = @[menuModel0, menuModel1, menuModel2....];
    
    return menuModelArr;
}

创建下拉菜单

- (void)createDropdownMenu {
    NSArray *menuModelsArr = [self getDropDownMenuModelsArray];
    
    self.dropDownMenu = [FFDropDownMenuView new];
    self.dropDownMenu.menuModelsArray = menuModelsArr;
    self.dropDownMenu.cellClassName = @"FFDropDownMenuCustomCell";
    self.dropDownMenu.menuItemBackgroundColor = FFColor(255, 255, 255, 0.7);
    self.dropDownMenu.triangleColor = FFColor(255, 255, 255, 0.7);
    [self.dropDownMenu setup];
}

显示下拉菜单

[self.dropDownMenu showMenu];

期待

  • 如果在使用过程中遇到BUG,希望你能在 简书私信我,或者在我简书专题的博客进行评论。谢谢(或者尝试下载最新的框架代码看看BUG修复没有)
  • 如果在使用过程中发现功能不够用,希望你能在 简书私信我,或者在我简书专题的博客进行评论。我非常想为这个框架增加更多好用的功能,谢谢
  • 如果你想和我一起完善FFDropDownMenu,请Pull Requests我

http://www.jianshu.com/users/80fadb71940d/latest_articles

    原文作者:chenfanfang
    原文地址: https://www.jianshu.com/p/eead6fe4d59f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞