iOS仿微信、支付宝首页下拉菜单选择视图

心之所向.jpg

效果图展示、自动优化位置（上拉、下拉、左偏、右偏）

ZWPullMenu.gif

下拉菜单组件化封装的需求

项目开发初期、需求并不明确、没有统一的下拉菜单样式。多人协作开发、封装了多个组件模板且没有与具体业务隔离。下拉菜单位置不定，导致需要左偏、右偏、下拉、上拉多种显示模式出现。

• 显示模式多样性、类似微信、支付宝首页下拉更多菜单页面。除此之外，允许根据参数自定义样式。
• 调用方式简单方便、支持多样式调用方法。自动判断文字、图标文字等显示内容模板。
• 自动优化显示区域、根据入参锚点、自动判断偏移半区、自动计算上拉/下拉显示模式。支持TableViewCell中滚动点击显示位置依赖不偏移。

ZWPullMenuView自动优化位置显示、箭头指向

• ZWPullMenuView初始化仅提供anchorView或者anchorPoint参数来确定PullMenu的箭头指向位置。
• 上半区：箭头指示点所属上半区、PullMenuView下拉菜单显示。
• 下半区：箭头指示点所属下半区、PullMenuView上拉菜单显示。
• 左半区：箭头指示点所属左半区、PullMenuView右偏移、自动规避围栏越界。
• 右半区：箭头指示点所属右半区、PullMenuView左偏移、自动规避围栏越界。

ZWPullMenuView初始化方法

• 根据点击事件视图anchorView自动计算最优的菜单显示位置。推荐初始化方法
  • anchorView：箭头指向视图、一般以点击按钮视图作为参数。
  • titleArray：文字显示数组。
  • imageArray：icon图标name数组、仅支持本地图片。
  • menuArray：ZWPullMenuModel图文数组Model。

/**
 *  anchorView：下拉依赖视图[推荐初始化]
 *  箭头指向依赖视图
 *  titleArray:文字
 *  imageArray:icon
 *  menuArray:图文Model
 */
+ (instancetype)pullMenuAnchorView:(UIView *)anchorView;
+ (instancetype)pullMenuAnchorView:(UIView *)anchorView titleArray:(NSArray *)titleArray;
+ (instancetype)pullMenuAnchorView:(UIView *)anchorView titleArray:(NSArray *)titleArray imageArray:(NSArray *)imageArray;
+ (instancetype)pullMenuAnchorView:(UIView *)anchorView menuArray:(NSArray *)menuArray;

• 根据自定义箭头依赖点anchorPoint初始化、自动计算最优菜单显示位置。
  • anchorPoint：自定义箭头依赖点位置。
  • titleArray：文字显示数组。
  • imageArray：icon图标name数组、仅支持本地图片。
  • menuArray：ZWPullMenuModel图文数组Model。

/**
 *  anchorView：下拉依赖绝对坐标
 *  指定坐标下拉
 *  箭头指向点
 *  titleArray:文字
 *  imageArray:icon
 *  menuArray:图文Model
 */
+ (instancetype)pullMenuAnchorPoint:(CGPoint)anchorPoint;
+ (instancetype)pullMenuAnchorPoint:(CGPoint)anchorPoint titleArray:(NSArray *)titleArray;
+ (instancetype)pullMenuAnchorPoint:(CGPoint)anchorPoint titleArray:(NSArray *)titleArray imageArray:(NSArray *)imageArray;
+ (instancetype)pullMenuAnchorPoint:(CGPoint)anchorPoint menuArray:(NSArray *)menuArray;

ZWPullMenuView自定义参数设置

• 核心参数zwPullMenuStyle设置

typedef NS_ENUM(NSInteger, ZWPullMenuStyle) {
    PullMenuDarkStyle = 0,  //类微信、黑底白字
    PullMenuLightStyle      //类支付宝、白底黑字
};

/** 
 *  pullMenu样式
 */
@property (nonatomic, assign) ZWPullMenuStyle zwPullMenuStyle;

/**
 *  相关配置
 */
@property (nonatomic, strong) ZWPullMenuConfig *zw_menuConfg;

• 可配置的其他相关参数

#define MenuContentMargin       15          //默认文本图片边距
#define MenuImageWidth          30          //默认图片最小尺寸
#define MenuBorderMinMargin     10          //默认下拉框边界围栏
#define MenuTitleFontSize       15          //默认文本字体大小

@interface ZWPullMenuConfig : NSObject
//文本图片边距
@property (nonatomic, assign) CGFloat zw_menuContentMargin;
//图片最小尺寸
@property (nonatomic, assign) CGFloat zw_menuImageWidth;
//下拉框边界围栏
@property (nonatomic, assign) CGFloat zw_menuBorderMinMargin;
//文本字体大小
@property (nonatomic, assign) CGFloat zw_menuTitleFontSize;

• 其他参数自定义样式
  • coverBgColor ：自定义蒙层视图背景色。
  • menuBgColor ：自定义Menu视图背景色。
  • menuCellHeight ：自定义Menu行高。
  • triangleHeight ：自定义指示小箭头高度。
  • menuMaxHeight : 自定义Menu最大展示高度。
  • lineColor: 自定义分割线颜色

Menu点击事件

• Block实现点击事件、参数menuRow

/**
 *  click
 */
@property (nonatomic, copy) BlockSelectedMenu blockSelectedMenu;

selected.png

ZWPullMenuView调用方法

基本用法.png

如何使用SDK

强烈建议您使用pod导入，节省导入依赖的时间。

• 使用cocoaPods导入(搜索不到请更新本地仓库)

pod 'ZWPullMenuView'

• 直接将文件ZWPullMenuView拖入工程中

#import "ZWPullMenuView.h"

源码

源码放在GitHub上，欢迎指正，记得star哦！