美文网首页iOS开发资料收集iOS
淘宝下拉菜单的实现

淘宝下拉菜单的实现

作者: 悦思 | 来源:发表于2016-05-05 14:42 被阅读427次
1.pic.jpg

工程中有需要做成这种下拉效果的菜单,走了很多弯路,分享几种解决方法:
1 xib
仔细观察淘宝,发现它并不是一个UITableView啊,不可以滑动的。枉我还找了那么多第三方什么UITableView加在UIView上啊,废了很多时间。如果是固定死的菜单直接xib就好了。

Paste_Image.png

2 方法2 找到合适的第三方:
KxMenu LKPopupMenu 之类的 CocoaChina Github Code4App 上有大把。

3 iOS 8 以后有系统自带的方法。
3.1 自定义一个UITableView 用来展示下拉数据

#import "WMPopoverController.h"

@interface WMPopoverController ()
@property (nonatomic, strong) NSMutableArray *addArray;
@end

@implementation WMPopoverController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.tableView.scrollEnabled = NO;
    self.addArray = [[NSMutableArray alloc] initWithObjects:@"扫一扫",@"搜一搜", @"创建讨论组",@"发送到电脑", @"面对面快传",@"收钱", nil];
    
    
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.addArray.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *identifer = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifer];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifer];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"%@", self.addArray[indexPath.row]];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    
    NSInteger number = indexPath.row;
    switch (number) {
        case 0:
            NSLog(@"扫一扫");
            break;
            
        case 1:
            NSLog(@"搜一搜");
            break;
            
        default:
            break;
    }
    
}

//重写preferredContentSize,返回popover的大小
- (CGSize)preferredContentSize {
    if (self.presentingViewController && self.tableView != nil) {
        CGSize tempSize = self.presentingViewController.view.bounds.size;
        tempSize.width = 150;
        CGSize size = [self.tableView sizeThatFits:tempSize];  //sizeThatFits返回的是最合适的尺寸,但不会改变控件的大小
        return size;
    }else {
        return [super preferredContentSize];
    }
}

@end

3.2 设置导航控制器的右点击事件

- (void)viewDidLoad {
   [super viewDidLoad];
   // 右边
   self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(rightBarAction)];
}

3.3 点击按钮的调用方法

@interface ViewController ()<UIPopoverPresentationControllerDelegate>
/** WMPopoverController */
@property (nonatomic, strong) WMPopoverController *itemPopVC;

@end


// 菜单  点击按钮调用的方法
- (void)rightBarAction {
    
    self.itemPopVC = [[WMPopoverController alloc] init];
    self.itemPopVC.modalPresentationStyle = UIModalPresentationPopover;
    self.itemPopVC.popoverPresentationController.barButtonItem = self.navigationItem.rightBarButtonItem;
    //箭头方向
    self.itemPopVC.popoverPresentationController.permittedArrowDirections = UIPopoverArrowDirectionAny;
    //代理
    self.itemPopVC.popoverPresentationController.delegate = self;
    [self presentViewController:self.itemPopVC animated:YES completion:nil];
}
- (UIModalPresentationStyle)adaptivePresentationStyleForPresentationController:(UIPresentationController *)controller {
    NSLog(@"%@",controller);
    return  UIModalPresentationNone;
}

但是实现起来的效果箭头圆滑并且颜色虚化。

Paste_Image.png

相关文章

  • 淘宝下拉菜单的实现

    工程中有需要做成这种下拉效果的菜单,走了很多弯路,分享几种解决方法:1 xib仔细观察淘宝,发现它并不是一个UIT...

  • react-native山寨美团下拉菜单实现

    山寨美团下拉菜单实现目标 山寨美团下拉菜单主要实现以下几个功能:1、在下拉的时候有动画过度效果2、�下拉菜单出现后...

  • day07

    A:今天学到的内容 一、实现下拉菜单(运用float,position) B:学会了什么 一、实现下拉菜单(运用f...

  • 总结《茶韵》中踩的坑(已解决)

    一.index页面 1.基于jquery的三级导航菜单。 ①先实现二级普通下拉菜单,动态下拉菜单实现步骤: (1)...

  • 如何通过AS实现单击式下拉菜单

    1.需要实现的目标 通过点击按钮,实现下拉菜单的放出与收回效果如图所示:单击式下拉菜单.gif 2.实现该菜单所需...

  • SJPullDownMenu下拉菜单框架使用

    SJPullDownMenu 快速集成类似淘宝筛选下拉菜单 Getting Started【开始使用】 Manua...

  • Bootstrap - 菜单2

    下拉菜单(对齐方式) 实现右对齐方法: Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容...

  • day07

    A.今天学了什么 1.实现一个下拉菜单 2.css常用样式的讲解 B今天学到了什么 1.实现一个下拉菜单 2.cs...

  • 前端学习代码实例-CSS3动画效果下拉导航菜单效果

    分享一段代码示例,它实现了简单的下拉菜单效果。 但是下拉菜单具有3D旋转效果,代码实例如下:

  • Excel多级下拉菜单制作

     今天来上一个Excel大招,绝对的大招!——多级下拉菜单。 多级下拉菜单这个问题,在Excel里面并不容易实现,...

网友评论

  • 3fe40fe75d88:请问有没有像上面淘宝效果的demo呢。。
    悦思:@_林lin 不好意思 没做
  • 还有什么没有注册的:之前也用了tableView来做下拉菜单。。。然后改需求了,一个设置的tableView里面,有好几个cell。。然后可以弹出下拉菜单的。。。再这样写下去真的是恐怖如斯

本文标题:淘宝下拉菜单的实现

本文链接:https://www.haomeiwen.com/subject/cdedrttx.html