iOS 带箭头菜单选项弹窗LFPopupMenu

一、效果图

由于是模拟器缩得比较小,一些细线可能显示不出来,不是bug哈。

二、用法

LFPopupMenuItem *item1 = [LFPopupMenuItem createWithTitle:@"小视频" image:[UIImage imageNamed:@"icon_menu_record_normal"]];
    LFPopupMenuItem *item2 = [LFPopupMenuItem createWithTitle:@"拍照" image:[UIImage imageNamed:@"icon_menu_shoot_normal"]];
    LFPopupMenuItem *item3 = [LFPopupMenuItem createWithTitle:@"相册" image:[UIImage imageNamed:@"icon_menu_album_normal"]];
self.items = @[item1, item2, item3];

LFPopupMenu *menu = [[LFPopupMenu alloc] init];
[menu configWithItems:self.items
                   action:^(NSInteger index) {
                       NSLog(@"点击了第%zi个",index);
                   }];

[menu showArrowToView:sender];

更多方法见.h文件,有详细注释

//
//  LFPopupMenu.h
//  LFPopupMenu
//
//  Created by 张林峰 on 2017/8/20.
//  Copyright ? 2017年 张林峰. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, PopupMenuDirection) {
    PopupMenuDirection_Auto,    //箭头自动确定朝上还是下
    PopupMenuDirection_Up,      //箭头朝上
    PopupMenuDirection_Down     //箭头朝下
};

@interface LFPopupMenuItem : NSObject

@property (nonatomic, strong) NSString *title;
@property (nonatomic, strong) UIImage *image;

/** 生成选项对象,标题和图片至少要传一个参数*/
+ (LFPopupMenuItem *)createWithTitle:(NSString *)title image:(UIImage *)image;

@end

@interface LFPopupMenu : UIView

/*******下面全是可选属性,都有默认值**********/
@property (nonatomic, strong) UIView *maskView;//半透明遮罩层,默认透明,可自行设置
@property (nonatomic, strong) UIImage *imgBG;//背景图,设置了这个就不用画带箭头的框了。
@property (nonatomic, strong) UIView *containerView;//容器,用于自定义弹窗内视图
@property (nonatomic, assign) CGFloat rowHeight;//行高,默认60
@property (nonatomic, assign) CGFloat arrowH;//箭头形高,默认9
@property (nonatomic, assign) CGFloat arrowW;//箭头形宽,默认9
@property (nonatomic, assign) CGFloat minWidth;//弹窗最小宽度,默认0
@property (nonatomic, assign) CGFloat popupMargin;//窗口距屏幕边缘最小距离,默认5
@property (nonatomic, assign) CGFloat leftEdgeMargin;//左边距窗口的距离,默认16
@property (nonatomic, assign) CGFloat rightEdgeMargin;//右边距窗口的距离,默认16
@property (nonatomic, assign) CGFloat textMargin;//文字距图标的距离,默认8
@property (nonatomic, assign) CGFloat lineMargin;//分割线左边距,默认0
@property (nonatomic, assign) CGFloat cornerRadius;//弹窗圆角,默认6
@property (nonatomic, assign) CGFloat arrowCornerRadius;//箭头的圆角,默认0
@property (nonatomic, strong) UIColor *lineColor;//分割线颜色、边框色,默认系统灰色
@property (nonatomic, strong) UIFont *textFont;//默认15
@property (nonatomic, strong) UIColor *textColor;//默认黑色
@property (nonatomic, strong) UIColor *fillColor;//带箭头框的填充色,默认白色
@property (nonatomic, assign) BOOL needBorder;//是否要边框
@property (nonatomic, assign) CGPoint anchorPoint;//设置背景图的情况使用,背景图的三角在背景图的位置比例,如左上角(0,0),右下角(1,1),下边中间(0.5,1)以此类推

@property (nonatomic, strong) UIView *menuSuperView;//本菜单弹窗的父视图,默认在Window上
@property (nonatomic, assign) PopupMenuDirection direction;

@property (nonatomic, copy) void(^dismissComplete)(void);//消失的回调

/**
 配置选项,注意:设置上面属性之后调用

 @param items 含文字和标题的对象数组
 @param action 点击回调,根据index判断点击的第几个
 */
- (void)configWithItems:(NSArray<LFPopupMenuItem *>*)items action:(void(^)(NSInteger index))action;

/**完全自定义菜单弹窗*/
- (void)configWithCustomView:(UIView *)customView;

/**
 显示菜单窗,有imgBG的情况下调用
 @param point 本控件“左上角”位置,相对window
 */
- (void)showInPoint:(CGPoint)point;

/**
 显示菜单窗,无imgBG的情况下调用
 @param point 箭头顶点位置,相对window
 */
- (void)showArrowInPoint:(CGPoint)point;

/**
 显示菜单窗,无imgBG的情况下调用(推荐)

 @param view 箭头对准的view
 */
- (void)showArrowToView:(UIView*)view;

- (void)dismiss;

@end

这只是LFKit的一个子库,LFKit地址https://github.com/zhanglinfeng/LFKit

只需LFPopupMenu的 pod ‘LFKit/LFPopupMenu‘

需要LFKit中所有自定义控件的pod ‘LFKit/Component‘

需要总库的 pod ‘LFKit‘

原文地址:https://www.cnblogs.com/zhanglinfeng/p/8252798.html

时间: 2024-10-11 06:39:41

iOS 带箭头菜单选项弹窗LFPopupMenu的相关文章

Android自定义ViewGroup(一)——带箭头的圆角矩形菜单

今天要做一个带箭头的圆角矩形菜单,大概长下面这个样子: 要求顶上的箭头要对准菜单锚点,菜单项按压反色,菜单背景色和按压色可配置. 最简单的做法就是让UX给个三角形的图片往上一贴,但是转念一想这样是不是太low了点,而且不同分辨率也不太好适配,干脆自定义一个ViewGroup吧! 自定义ViewGroup其实很简单,基本都是按一定的套路来的. 一.定义一个attrs.xml 就是声明一下你的这个自定义View有哪些可配置的属性,将来使用的时候可以自由配置.这里声明了7个属性,分别是:箭头宽度.箭头

iOS重写drawRect方法实现带箭头的View

创建一个UIView的子类,重写drawRect方法可以实现不规则形状的View,这里提供一个带箭头View的实现代码: ArrowView.h #import <UIKit/UIKit.h> @interface ArrowView : UIView @end ArrowView.m #import "ArrowView.h" @implementation ArrowView /* // Only override drawRect: if you perform cu

iOS 带IAP提交注意事项及无法submit for review的解决方案

原文地址:http://blog.sina.com.cn/s/blog_71ce775e0101dl4a.html 最近项目接触到了苹果的程序内购(IAP),碰到不少问题,参考了很多帖子才得以解决.在此总结一下,多少可以为初次接触IAP的童鞋一些帮助,面对苹果严格的审核少费一点脑筋.闲话不多说,刚接触时的纠结我懂得.. 关于如何新建IAP我在这里就不多说了.重点说一下,大多数人会遇到的问题以及解决方法. 第一次,新建好IAP,然后沙盒测试完了,以为没有问题就提交了,结果等了7天,结果是被苹果给拒

popover带箭头弹框

我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Present As Popover 2.我们看下segue的属性: 3.重写prepareforsegue方法: 1 override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 2 // 1.判断跳转控制器的类型 3 if seg

使用Less制作带箭头提示框

这里使用Less来制作带箭头的提示框,跟css比起来,方便多了,可以剩下很多的代码,别的不扯了,先看看效果吧. 这里我实现了4个方向的提示框,下面是具体实现代码: 提示框代码: <div class="top_prompt"> <div class="top_triangle"> <span class="line"></span> <span class="back"&g

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层

鼠标悬浮弹出跟随鼠标移动的带箭头的信息层:很多网站,当鼠标悬浮在一个元素上的时候能够弹出一个信息说明层,并且此层能够跟随鼠标移动,同时弹出的层带有箭头,此箭头指向鼠标悬浮的元素,下面就通过实例代码简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

7.4 箭头菜单

本例的目标是实现带有两侧箭头的菜单效果,如图1所示.这里的箭头效果没有使用任何背景图像文件,而是完全依靠CSS代码实现的. 图1 箭头菜单效果 该实例文件位于网页学习网CSS教程资源的“第7章\04\arrow-navi.htm”. 一.基本思路 既然这里不允许使用背景图像来制作这个三角形的样式,那么如何产生这两个三角形,并放到适当的位置上呢? 读者可以回忆一下7.2节的案例双斜角横线菜单的制作方法.那个案例中通过相邻边框的颜色区分实现了斜角效果.在这里.就继续挖掘它的潜力. 1.三角形效果:

div+css制作带箭头提示框效果图(原创文章)

一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的时候发现,哇!原来这么简单,我这脑袋瓜咋没反应过来呢,所以整理了下顺便简化了分享出来,希望对大家有帮助. <div class="demo"></div> <style>.demo{    width:0;    height:0px;    borde