All Products
Search
Document Center

Card menu

Last Updated: Mar 03, 2022

The card menu is used to pop up a selection menu when the user clicks a card on the client page. In iOS, beeviews:BEEPopMenuView needs to be replaced with AUCardMenu.h.

Sample images

  • Pop-up menu / Multi-line style

    AntUI Instance
  • Pop-up menu / Pressed effect

    Pressed effect
  • Pop-up menu / Double line

    Double lines
  • Pop-up menu + Option buttons

    Option buttons

API description

  • AUCardMenu.h

//
//  AUCardMenu.h
//  AntUI
//


@class AUMultiStyleCellView;
@class AUWindow;
/*!
 @class         AUCardMenu
 @abstract      AUWindow
 @discussion    The pop-up menu with a mask for the other part of the screen and an arrow-like corner in the upper right of the menu.
*/

@interface AUCardMenu : AUWindow
{

}

/**
 * The AUMultiStyleCellDelegate protocol needs to be implemented for cellView to respond to clicking events.
 * Assign the value in your own viewcontroller. popMenuView.cellView.delegate = self
 */
@property (nonatomic, strong) AUMultiStyleCellView *cellView;

/**
 * The initialization method (highly recommended).
 *
 * @param data      The array storage object model CellDataModel.
 * @param location  The reference point of the arrow-like corner.
 * @param offset    The offset of the arrow-like corner relative to the reference point.
 *
 *  @return self
 */

- (instancetype)initWithData:(NSArray *)data
                    location:(CGPoint)location
                      offset:(CGFloat)offset;

/**
 * Show the pop-up menu.
 *
 * @param superView superView of PopMenuView
 */
- (void)showPopMenu:(UIView *)superView;

// Hide the pop-up menu, whose calling is also recommended in the dealloc method.
- (void)hidePopMenu;

// Note: If a menu is shown with animation, the menu must be hidden with animation. If a menu is shown without animation, the menu must be hidden without animation.

// Show a menu with animation.
- (void)showPopMenu:(UIView *)superView animation:(BOOL) isAnimation;

// Hide a menu with animation.
- (void)hidePopMenuWithAnimation:(BOOL)isAnimation;

@end
  • AUCellDataModel.h

//
//  AUCellDataModel.h
//  AntUI
//

#import <Foundation/Foundation.h>

/*!
 @class       AUMultiStyleCellView
 @abstract    UIView
 @discussion  The sub-view in a menu.
 */

@interface AUCellDataModel : NSObject

@property (nonatomic, strong) NSString *iconUrl;
@property (nonatomic, strong) NSString *titleText;
@property (nonatomic, strong) NSString *descText;
@property (nonatomic, strong) NSString *checkMarkUrl;  // The check mark URL.
@property (nonatomic, strong) NSString *indicatorUrl;  // The right arrow URL.
@property (nonatomic, strong) NSArray *buttonsArray;   // NSArray<NSString>
@property (nonatomic, strong) NSDictionary *extendDic; // The extended field for the client.
@property (nonatomic, assign) BOOL selectedState;      // Whether the current model is selected. The default value is NO.

@end
  • AUMultiStyleCellView.h

//
//  AUMultiStyleCellView.h
//  AntUI
//

#import <UIKit/UIKit.h>
#import "AUCellDataModel.h"

@class AUMultiStyleCellView;
@protocol AUMultiStyleCellDelegate <NSObject>

@optional
/**
 * The clicking event callback.
 *
 * @param dataModel     The data model corresponding to the clicked view.
 * @param indexPath     The index of the clicked view in CellDataModel. (If CellDataModel.buttonsArray == nil, the default value of row is - 1.)
 */
- (void)DidClickCellView:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath;
- (void)DidClickCellButton:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath;
- (void)DidClickCellView:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath cellView:(AUMultiStyleCellView *)cellView;
@end


/**
 * cellView integrating multiple styles.
 * 1. Icon + Main title
 * 2. Icon + Main title + Subtitle below the main title
 * 3. Icon + Main title + Framed button controls in multiple lines and multiple rows
 */

@interface AUMultiStyleCellView : UIView

@property (nonatomic, weak) id<AUMultiStyleCellDelegate> delegate;
@property (nonatomic, strong) NSArray *cellDataArray;

// If cellDataArray is empty, this method is equal to the initWithFrame method.
- (instancetype)initWithFrame:(CGRect)frame
                cellDataArray:(NSArray *)cellDataArray
                     isUpward:(BOOL)isUpward;

// Process the status indicating whether cellView is selected.
- (void)updateSelectedState;


@end

Sample code

//
//  cardMenuController.m
//  AntUI
//

#import "cardMenuController.h"
#import "AUCardMenu.h"
#import "AUCellDataModel.h"
#import "AUMultiStyleCellView.h"

@interface cardMenuController ()<AUMultiStyleCellDelegate>

@property (nonatomic,strong)     AUCardMenu * popMenuView;

@end

@implementation cardMenuController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = RGB(0xF5F5F9);
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(0, 100, self.view.width, 100)];
    [button setTitle:@"Pop-up menu/Multi-line style" forState:UIControlStateNormal];
    [button setTitleColor:RGB(0x888888) forState:UIControlStateNormal];
    [button addTarget:self
               action:@selector(handleButton:)
     forControlEvents:UIControlEventTouchUpInside];
    [button.titleLabel setTextAlignment:NSTextAlignmentLeft];
    [button.titleLabel setFont:[UIFont systemFontOfSize:14]];
    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
    [button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];

    [self.view addSubview:button];

    UIButton * button2 = [UIButton buttonWithType:UIButtonTypeCustom];
    [button2 setFrame:CGRectMake(0, 220, self.view.width, 100)];
    [button2 setTitle:@"Pop-up menu/Pressed effect" forState:UIControlStateNormal];
    [button2 addTarget:self
               action:@selector(handleButton2:)
     forControlEvents:UIControlEventTouchUpInside];
    [button2.titleLabel setTextAlignment:NSTextAlignmentLeft];
    [button2 setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
    [button2 setContentMode:UIViewContentModeLeft];
    [button2 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];

    [button2 setTitleColor:RGB(0x888888) forState:UIControlStateNormal];
    [button2.titleLabel setFont:[UIFont systemFontOfSize:14]];

    [self.view addSubview:button2];

    UIButton * button3 = [UIButton buttonWithType:UIButtonTypeCustom];
    [button3 setFrame:CGRectMake(0, 320, self.view.width, 100)];
    [button3 setTitle:@"Pop-up menu/Double line" forState:UIControlStateNormal];
    [button3 addTarget:self
                action:@selector(handleButton3:)
      forControlEvents:UIControlEventTouchUpInside];
    [button3.titleLabel setTextAlignment:NSTextAlignmentLeft];
    [button3 setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
    [button3 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [button3.titleLabel setFont:[UIFont systemFontOfSize:14]];


    [button3 setTitleColor:RGB(0x888888) forState:UIControlStateNormal];

    [self.view addSubview:button3];


    UIButton * button4 = [UIButton buttonWithType:UIButtonTypeCustom];
    [button4 setFrame:CGRectMake(0, 420, self.view.width, 100)];
    [button4 setTitle:@"Pop-up Menu + Select button" forState:UIControlStateNormal];
    [button4 addTarget:self
                action:@selector(handleButton4:)
      forControlEvents:UIControlEventTouchUpInside];
    [button4.titleLabel setTextAlignment:NSTextAlignmentLeft];
    [button4 setTitleEdgeInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
    [button4 setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [button4.titleLabel setFont:[UIFont systemFontOfSize:14]];

    [button4 setTitleColor:RGB(0x888888) forState:UIControlStateNormal];

    [self.view addSubview:button4];

}

- (void)handleButton4:(UIButton *)button
{
    AUCellDataModel * model = [[AUCellDataModel alloc] init];
    model.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_dislike.png";
    model.titleText = @"Not interested";
    model.buttonsArray = @[@"Outdated",@"Have seen before",@"Bad quality"];
    model.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};


    AUCardMenu *tmpView=[[AUCardMenu alloc]initWithData:@[model] location:CGPointMake(button.width - 20, button.centerY) offset:13];
    tmpView.cellView.delegate=self;
    [tmpView showPopMenu:button animation:YES];
    self.popMenuView=tmpView;

}

- (void)handleButton3:(UIButton *)button
{
    AUCellDataModel * model = [[AUCellDataModel alloc] init];
    model.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_ignore.png";
    model.titleText = @"Ignore";
    //    model.buttonsArray = @[@"Hello",@"do you stutter?",@"I'm not hungry",@"Hello",@"I'm fine"];
    model.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};

    AUCellDataModel * model4 = [[AUCellDataModel alloc] init];
    model4.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_reject.png";
    model4.titleText = @"No longer receive this type of messages";
    model4.descText = @"Receive this type of messages less";
    model4.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCardMenu *tmpView=[[AUCardMenu alloc]initWithData:@[model,model4] location:CGPointMake(button.width - 20, button.centerY) offset:13];
    tmpView.cellView.delegate=self;
    [tmpView showPopMenu:button animation:YES];
    self.popMenuView=tmpView;

}

- (void)handleButton2:(UIButton *)button
{
    AUCellDataModel * model = [[AUCellDataModel alloc] init];
    model.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_ignore.png";
    model.titleText = @"Ignore";
    //    model.buttonsArray = @[@"Hello",@"do you stutter?",@"I'm not hungry",@"Hello",@"I'm fine"];
    model.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCellDataModel * model2 = [[AUCellDataModel alloc] init];
    model2.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_dislike.png";
    model2.titleText = @"Not interested";
    model2.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    model2.highlightState = YES;
    AUCellDataModel * model3 = [[AUCellDataModel alloc] init];
    model3.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_inform.png";
    model3.titleText = @"Report";
    model3.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCellDataModel * model4 = [[AUCellDataModel alloc] init];
    model4.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_reject.png";
    model4.titleText = @"No longer receive this type of messages";
    model4.descText = @"Receive this type of messages less";
    model4.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCardMenu *tmpView=[[AUCardMenu alloc]initWithData:@[model,model2,model3,model4] location:CGPointMake(button.width - 20, button.centerY) offset:13];
    tmpView.cellView.delegate=self;
    [tmpView showPopMenu:button animation:YES];
    self.popMenuView=tmpView;

}
- (void)handleButton:(UIButton *)button
{
    AUCellDataModel * model = [[AUCellDataModel alloc] init];
    model.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_ignore.png";
    model.titleText = @"Ignore";
//    model.buttonsArray = @[@"Hello",@"do you stutter?",@"I'm not hungry",@"Hello",@"I'm fine"];
    model.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCellDataModel * model2 = [[AUCellDataModel alloc] init];
    model2.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_dislike.png";
    model2.titleText = @"Not interested";
    model2.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCellDataModel * model3 = [[AUCellDataModel alloc] init];
    model3.iconUrl = @"APCommonUI_ForDemo.bundle/hc_popmenu_inform.png";
    model3.titleText = @"Report";
    model3.extendDic = @{@"type":@"reject",@"cardId":@"201609261515032720200000091128291606950000902688",@"CCard":@""};
    AUCardMenu *tmpView=[[AUCardMenu alloc]initWithData:@[model,model2,model3] location:CGPointMake(button.width - 20, button.centerY) offset:13];
    tmpView.cellView.delegate=self;
    [tmpView showPopMenu:button animation:YES];
    self.popMenuView=tmpView;


}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)hidePopMenu
{
    if (self.popMenuView) {
        [self.popMenuView hidePopMenuWithAnimation:YES];
        self.popMenuView.cellView.delegate = nil;
        self.popMenuView = nil;

    }
}


#pragma mark --- AUMultiStyleCellDelegate
/**
 * The clicking event callback.
 *
 * @param dataModel     The data model corresponding to the tapped view.
 * @param indexPath     The index of the tapped view in CellDataModel. (If CellDataModel.buttonsArray == nil, the default value of row is - 1.)
 */
- (void)DidClickCellView:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath
{
    [self hidePopMenu];
}
- (void)DidClickCellButton:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath
{
    [self hidePopMenu];
}
- (void)DidClickCellView:(AUCellDataModel *)dataModel ForRowAtIndexpath:(NSIndexPath *)indexPath cellView:(AUMultiStyleCellView *)cellView
{
    [self hidePopMenu];
}


- (void)dealloc
{
    self.popMenuView = nil;

}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end