iOS开发——封装自己的下拉菜单

效果图

思路

1、图片的拉伸:

UIImage *image = [UIImage imageNamed:@"popover_background"];
        image = [image resizableImageWithCapInsets:UIEdgeInsetsMake(24, 0, 24, 0) resizingMode:UIImageResizingModeStretch];

-resizableImageWithCapInsets:resizingMode 方法的第二个参数,调整模式分为两种,平铺与拉伸。这里采用拉伸,可以保证背景的带箭头的框框按照内容大小正确地将其包围。

2、圆形过渡动画

具体实现方式可以参考这篇博客: iOS开发——圆形过渡动画。这里把代码摆上

    CGRect originalRect = CGRectMake(point.x, point.y, 1, 1);

    self.startPath = [UIBezierPath bezierPathWithOvalInRect:originalRect];

    CGPoint extremePoint = CGPointMake(point.x, point.y + contentView.frame.size.height);
    CGFloat radius = sqrtf(extremePoint.x * extremePoint.x + extremePoint.y * extremePoint.y);
    UIBezierPath *endPath = [UIBezierPath bezierPathWithOvalInRect:
                             CGRectInset(originalRect, -radius, -radius)];

    self.shapeLayer = [CAShapeLayer layer];
    self.shapeLayer.path = endPath.CGPath;
    self.layer.mask = self.shapeLayer;

    if (animated) {
        CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
        animation.fromValue = (__bridge id)(self.startPath.CGPath);
        animation.toValue = (__bridge id)(endPath.CGPath);
        animation.duration = 0.3f;
        [self.shapeLayer addAnimation:animation forKey:@"begin"];
    }

3、其他

①view的层级关系:

主要有两个控件,contentView为用户传入的view,一般是一个表给,用户需要自己规定这个contentView的宽高。

另一个是imageView充当背景图片,同时该imageView会作为用户传入的contentView的容器,

整个控件为一个View,背景透明,做mask用,当菜单处于打开状态时用户点击背景会使菜单收回。

当用户传入contentView后,重设其原点,同时更新imageView的大小使其将整个contentView包围。

最后,将这个整体加到window中,保证菜单处于最上层。

②坐标系转换

由用户传入一个控件来决定该菜单显示在哪时,需要用到坐标系转换。关于坐标系转换,之前的博客中也有记录,在此留一个简单的结论:

[viewA convertRect:viewA.bounds toView:viewB]—得到viewA在viewB坐标系下的bounds。

③CAAnimationDelegate中区分多个animation对象

首先在添加animation时为其设置标志key:

[self.shapeLayer addAnimation:animation forKey:@"end"];

在代理方法中根据layer的方法拿:

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    if (anim == [self.shapeLayer animationForKey:@"end"]) {
        self.shapeLayer.path = self.startPath.CGPath;
        [self removeFromSuperview];
    }

}

代码

源代码

时间: 2024-10-27 12:58:32

iOS开发——封装自己的下拉菜单的相关文章

iOS开发项目篇—30下拉刷新

iOS开发项目篇—30下拉刷新 一.网络监控 当应用所处的网络环境不好的时候,获取不到相应的网络数据,考虑到用户对应用的使用体验,有必要对网络的状况进行监听. 在程序启动完的时候,监控网络 YYAppDelegate.m文件代码: 1 // 2 // YYAppDelegate.m 3 // 4 5 #import "YYAppDelegate.h" 6 #import "YYOAuthViewController.h" 7 #import "YYCont

iOS快速集成搜索界面下拉菜单框架

前言 这次推出的控件,比较常用,搜索界面下拉菜单,如果喜欢我的文章,可以关注我微博:吖了个峥,也可以来小码哥,了解下我们的iOS培训课程.后续还会更新更多内容,有任何问题,欢迎简书留言峥吖... Demo效果: 效果图.gif Demo演示: 1.创建下拉菜单 YZPullDownMenu *menu = [[YZPullDownMenu alloc] init]; menu.frame = CGRectMake(0, 20, YZScreenW, 44); [self.view addSubv

iOS开发-UITableView顶部图片下拉放大

关于顶部图片下拉放大,在用户展示的个人中心显示用户个人头像信息,设置UITableView的headerView实现,UITableView继承自UIScrollView,同样的设置UIScrollView的顶部图片也可以实现同样的效果,简单看一下实现的效果: 控制器中设置需要的属性变量: @property (strong,nonatomic) UITableView *tableView; @property (strong,nonatomic) NSArray *data; @proper

学习笔记:对下拉菜单的简单封装

第一部分  实现效果 当我们点击一下标题按钮时,就弹出一个下拉菜单,点一下其他地方,下拉菜单退出或者从屏幕上消失 效果如下图: 当我们点击一下首页的时候,弹出下拉菜单,效果如下图(当然图片还未做处理) 第二部分  封装思路 当我们点击标题按钮时,会弹出菜单,而且有文字,有图片,那么这个控件应该就是按钮,它既可以响应点击事件,也可以设置图片文字. 那么,这个下拉菜单应该是个什么控件好了,也就是应该继承自那个控件好了?作为其他控件的容器,选UIVIew是最合适的了,选好了容器.接下来就是它的实际需求

iOS下拉菜单效果实现

原文链接: iOS下拉菜单效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158

【android开发】使用PopupWindow实现页面点击顶部弹出下拉菜单

没有太多花样,也没有很复杂的技术,就是简单的PopupWindow的使用,可以实现点击弹出一个自定义的view,view里可以随便设计,常用的可以放一个listview. demo中我只是一个点击展示,简单的使用了fade in out的动画效果,也没有精美的图片资源,看着也丑,不过这么短的时间,让你掌握一个很好用的技术,可以自己扩展,不很好么? 废话不说了,直接上代码: MainActivity.java [java] view plaincopy public class MainActiv

flutter 下拉菜单封装

直接上代码,简单的下拉菜单封装 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_app/utils/CXColors.dart'; class DropDownSelect extends StatelessWidget { final String label; String value; final List<DropdownMen

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

Demo地址:https://github.com/chenfanfang/CollectionsOfExampleFFDropDownMenu框架地址:https://github.com/chenfanfang/FFDropDownMenu 老样子,先附上两张效果图 customMenuStyle.gif customMenuStyle.png 首先自定义一个继承于FFDropDownMenuBasedModel的菜单模型.h文件 #import <FFDropDownMenuBasedMo

IOS 下拉菜单复用

由于之前曾经用到过下拉菜单,所以现在花一些时间回过头来细细整理了一下,逐步完善这个下拉菜单,并提供一些比较基本的功能,以便日后如果有需要的话可以进行复用,并提供给需要的人参考.下拉菜单同样分为数据源和代理方法,提供以下方法: 1 // 2 // XWDropdownMenu.h 3 // XWReusableCodeLib 4 // 5 // Created by xiao on 15/10/30. 6 // Copyright © 2015年 xiao. All rights reserved