iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b

Demo地址:
https://github.com/chenfanfang/CollectionsOfExample
FFDropDownMenu框架地址:
https://github.com/chenfanfang/FFDropDownMenu

老样子,先附上两张效果图

customMenuStyle.gif

customMenuStyle.png


  • 首先自定义一个继承于FFDropDownMenuBasedModel的菜单模型
    .h文件
#import <FFDropDownMenuBasedModel.h>
@interface FFDropDownCustomMenuStyle1Model : FFDropDownMenuBasedModel
/** 主标题的背景颜色 */
@property (nonatomic, strong) UIColor *mainTitleBgColor;
/** 主标题 */
@property (nonatomic, copy) NSString *mainTitle;
/** 副标题 */
@property (nonatomic, copy) NSString *subTitle;
//菜单模型创建的属性用于自定义菜单cell,所以需要什么属性,自己定义

@end

.m文件

#import "FFDropDownCustomMenuStyle1Model.h"
@implementation FFDropDownCustomMenuStyle1Model
@end

  • 其次自定义一个继承于FFDropDownMenuBasedCell的cell

FFDropDownCustomMenuStyle1Cell.h

#import <FFDropDownMenuView.h>
/**  
 *  自定义菜单效果1 菜单 cell  
 */
@interface FFDropDownCustomMenuStyle1Cell : FFDropDownMenuBasedCell
@end

FFDropDownCustomMenuStyle1Cell.m

#import "FFDropDownCustomMenuStyle1Cell.h"
//model
#import "FFDropDownCustomMenuStyle1Model.h"
@interface FFDropDownCustomMenuStyle1Cell ()
@property (weak, nonatomic) IBOutlet UILabel *mainTitle_Label;
@property (weak, nonatomic) IBOutlet UILabel *subTitle_Label;
@[email protected] FFDropDownCustomMenuStyle1Cell
- (void)setMenuModel:(id)menuModel {      
    _menuModel = menuModel;    
    //在这里将模型转成自定义的模型    
    FFDropDownCustomMenuStyle1Model *realModel = (FFDropDownCustomMenuStyle1Model *)menuModel;    
    self.mainTitle_Label.backgroundColor = realModel.mainTitleBgColor;    
    self.mainTitle_Label.text = realModel.mainTitle;    
    self.subTitle_Label.text = realModel.subTitle; }
@end

cell的xib布局图如下

Snip20160915_1.png


  • 最后就可以创建下拉菜单了
#import "FFDropDownCustomMenuStyle1VC.h"
//controller
#import "FFDropDownMenuNextPageVC.h"
//view
#import <FFDropDownMenuView.h>
//model
#import "FFDropDownCustomMenuStyle1Model.h"
@interface FFDropDownCustomMenuStyle1VC ()
/** 下拉菜单 */
@property (nonatomic, strong) FFDropDownMenuView *dropDownMenu;
@[email protected] FFDropDownCustomMenuStyle1VC
- (void)viewDidLoad {    
    [super viewDidLoad];      
    [self createDropdownMenu];      
    [self setupNav];
}
- (void)createDropdownMenu {    
    NSArray *menuModelsArr = [self getDropDownMenuModelsArray];    
    self.dropDownMenu = [FFDropDownMenuView new];    
    //设置动画效果,可以根据项目需求设置自己所需要的动画效果
    self.dropDownMenu.menuAnimateType = FFDropDownMenuViewAnimateType_FallFromTop;    
    //若不需要灰色透明蒙板,下面的两个透明度可以设置为0     self.dropDownMenu.bgColorbeginAlpha = 0;    
    self.dropDownMenu.bgColorEndAlpha = 0;    
    //设置下拉菜单的宽度为整个屏幕的宽度     self.dropDownMenu.menuWidth = [UIScreen mainScreen].bounds.size.width;    
    //设置菜单距离屏幕右边的边距为0     self.dropDownMenu.menuRightMargin = 0;    
    //取消菜单圆角效果     self.dropDownMenu.menuCornerRadius = 0;    
    //隐藏三角形     self.dropDownMenu.triangleSize = CGSizeZero;    
    self.dropDownMenu.eachMenuItemHeight = 70;    
    self.dropDownMenu.menuModelsArray = menuModelsArr;    
    self.dropDownMenu.cellClassName = @"FFDropDownCustomMenuStyle1Cell.xib";    
    self.dropDownMenu.menuItemBackgroundColor = FFColor(255, 255, 255, 0.7);    
    [self.dropDownMenu setup]; }
/** 获取下拉菜单模型数组 */
- (NSArray *)getDropDownMenuModelsArray {    
    __weak typeof(self)weakSelf = self;      
    FFDropDownCustomMenuStyle1Model *menuModel1 = [FFDropDownCustomMenuStyle1Model new];    
    menuModel1.mainTitleBgColor = FFColor(54, 188, 37, 1);    
    menuModel1.mainTitle = @"1";    
    menuModel1.subTitle = @"First Menu Item";    
    menuModel1.menuBlock = ^ {        
        FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];        
        vc.navigationItem.title = @"First Menu Item";        
        [weakSelf.navigationController pushViewController:vc animated:YES];    
    };      
    FFDropDownCustomMenuStyle1Model *menuModel2 = [FFDropDownCustomMenuStyle1Model new];    
    menuModel2.mainTitleBgColor = FFColor(255, 199, 40, 1);    
    menuModel2.mainTitle = @"2";    
    menuModel2.subTitle = @"Second Menu Item";    
    menuModel2.menuBlock = ^ {        
        FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];        
        vc.navigationItem.title = @"Second Menu Item";        
        [weakSelf.navigationController pushViewController:vc animated:YES];    
    };      
    FFDropDownCustomMenuStyle1Model *menuModel3 = [FFDropDownCustomMenuStyle1Model new];    
    menuModel3.mainTitleBgColor = FFColor(255, 81, 31, 1);    
    menuModel3.mainTitle = @"3";    
    menuModel3.subTitle = @"Third Menu Item";    
    menuModel3.menuBlock = ^ {    
        FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];        
        vc.navigationItem.title = @"Facebook";        
        [weakSelf.navigationController pushViewController:vc animated:YES];    
    };      
    FFDropDownCustomMenuStyle1Model *menuModel4 = [FFDropDownCustomMenuStyle1Model new];    
    menuModel4.mainTitleBgColor = FFColor(18, 170, 158, 1);    
    menuModel4.mainTitle = @"4";    
    menuModel4.subTitle = @"Fourth Menu Item";    
    menuModel4.menuBlock = ^ {    
        FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];        
        vc.navigationItem.title = @"Facebook";        
        [weakSelf.navigationController pushViewController:vc animated:YES];    
    };      
    FFDropDownCustomMenuStyle1Model *menuModel5 = [FFDropDownCustomMenuStyle1Model new];    
    menuModel5.mainTitleBgColor = FFColor(0, 119, 195, 1);    
    menuModel5.mainTitle = @"5";    
    menuModel5.subTitle = @"Fifth Menu Item";    
    menuModel5.menuBlock = ^ {        
        FFDropDownMenuNextPageVC *vc = [FFDropDownMenuNextPageVC new];        
        vc.navigationItem.title = @"Facebook";        
        [weakSelf.navigationController pushViewController:vc animated:YES];    
    };    
    NSArray *menuModelArr = @[menuModel1,menuModel2,menuModel3,menuModel4,menuModel5];    
    return menuModelArr;
}
/** 初始化导航栏 */
- (void)setupNav {    
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self.dropDownMenu action:@selector(showMenu)];    
    self.navigationItem.title = @"实战:自定义菜单效果1";
}
@end
时间: 2024-08-01 07:17:35

iOS 下拉菜单 FFDropDownMenu自定义下拉菜单样式实战-b的相关文章

自定义控件基础01_菜单轮__viewPager_下拉框_自定义开关

1,自定义控件分类: 1.1组合控件:由安卓中原生的控件组合起来,配合动画达成的效果 1.2自定义控件 1.3组合控件案例演示: 案例:优酷菜单demo 三层圆环,按下menu键会通过动画效果消失在界面,点击小房子和中层圆环,最外层圆环消失 ①布局实现: 三层相对布局相互叠加(因为图片背景是透明的,所以可以叠加显示) 由于三个布局是叠加显示的,所以这个菜单选项要使用一个占据焦点比较强的(不然有可能点击不到)ImageButton控件 控件上background=”@android:color/t

Android之——自定义下拉菜单的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48101651 做过Android开发的童鞋,一般都会遇到这样一种情况,就是Android中原有的下拉控件Spinner过于单调和简单,不能够满足我们实际开发的需求了,这时候就需要我们自己自定义下拉菜单来实现相应的功能,那么,如何实现自定义下拉菜单呢?下面我就来和大家一起实现这个功能. 一.原理 我们这个下拉菜单展示的内容主要以ListView实现,在界面上放置一个文本框,文本框右

JS自定义下拉菜单select

由于系统自定的select样式的确丑到爆,所以抽空写了这么一个可以自定义下拉菜单样式的插件, 思路就是隐藏select,用一个span标签显示内容,ul标签显示下拉列表,如图: IE下存在一个BUG,设置overflow-y后,IE下设置width无效,只测试了IE9,其他版本未测试,当然如果能加入自定义样式的滚动条就完美了,时间关系以后再补吧 代码如下: 1 //自定义dropdownlist的样式, 2 //classname为模拟出来的span标签样式 3 //ulClass为下拉列表样式

简易自定义下拉菜单 与简易默认下拉html片段

简易自定义下拉选择 html片段 html: <div class="select_box province"> <div class="selected">T时代C5</div> <div class="select_list_box" style="display:none;"> <div class="select_list">T时代C5&l

自定义下拉刷新控件

一.功能效果 1.在很多app中,在信息展示页面,当我们向下拖拽时,页面会加载最新的数据,并有一个短暂的提示控件出现,有些会有加载进度条,有些会记录加载日期.条目,有些还带有加载动画.其基本实现原理都相仿,本文中将探讨其实现原理,并封装出一个简单的下拉刷新控件 2.自定义刷新工具简单的示例 二.系统提供的下拉刷新工具 1.iOS6.0以后系统提供了自己的下拉刷新的控件:UIRefreshControl .例如,refreshControl,作为UITableViewController中的一个属

Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导 航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现 导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很

Android 自定义下拉刷新ExpandableListView

自定义下拉刷新ExpandableListView,在本文的demo中做的是好友分组列表,可以通过下拉刷新数据.自定义控件是继承了ExpandableListView这个类,接口就是OnScrollListener这样来实现的.接下看看怎样调用这个自定义控件.先看效果图. 本文源码下载:点击 一.实现的效果图 二.看自定义控制类XExpandableListView package com.org.xlistview; import com.example.pullrefresh.R; impo

Android PullToRrefresh 自定义下拉刷新动画 (listview、scrollview等)

PullToRefreshScrollView 自定义下拉刷新动画,只需改一处. 以下部分转载自http://blog.csdn.net/superjunjin/article/details/45022595 一,定义刷新动画的layout 在library下的com.handmark.pulltorefresh.library.internal包中的FlipLoadingLayout和RotateLoadingLayout FlipLoadingLayout为ios风格的箭头颠倒的刷新动画

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

绪论 最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记