iOS开发——UI篇&下拉弹出列表选择项效果

下拉弹出列表选择项效果

右边菜单中的按键，点击弹出一个列表可选择，选择其中一个，响应相应的事件并把文字显示在右边的菜单上；弹出下拉效果使用LMDropdownView插件，可以用POD进行加载pod ‘LMDropdownView’；LMDropdownView是把想要的视图赋给它；

源代码地址：https://github.com/JxbSir/YiYuanYunGou

效果如下：

1：在主页面先定义按键跟绑定视图（没写全的都是属性中定义了比如btnRigth,dropdownView等）：

btnRigth = [UIButton buttonWithType:UIButtonTypeCustom];
    [btnRigth addTarget:self action:@selector(btnRightAction) forControlEvents:UIControlEventTouchUpInside];
    if(![OyTool ShardInstance].bIsForReview)
    {
        [self actionCustomNavBtn:btnRigth nrlImage:@"" htlImage:@"" title:@"全部分类▽"];
    }
    else
    {
        [self actionCustomNavBtn:btnRigth nrlImage:@"" htlImage:@"" title:[dicTypeName.allValues objectAtIndex:0]];
    }
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:btnRigth];

    AllProTypeView* tview = [[AllProTypeView alloc] initWithFrame:self.view.bounds];
    tview.delegate = self;
    //赋于下拉的里效果视图
    dropdownView = [[LMDropdownView alloc] init];
    dropdownView.menuBackgroundColor = [UIColor whiteColor];
    dropdownView.menuContentView = tview;

2：其中对设置按键进行的封装：

- (void)actionCustomNavBtn:(UIButton *)btn nrlImage:(NSString *)nrlImage
                  htlImage:(NSString *)hltImage
                     title:(NSString *)title {
    [btn setImage:[UIImage imageNamed:nrlImage] forState:UIControlStateNormal];
    if (hltImage) {
        [btn setImage:[UIImage imageNamed:hltImage] forState:UIControlStateHighlighted];
    } else {
        [btn setImage:[UIImage imageNamed:nrlImage] forState:UIControlStateNormal];
    }
    if (title) {
        btn.titleLabel.font = [UIFont boldSystemFontOfSize:13];
        [btn setTitle:title forState:UIControlStateNormal];
        [btn setTitle:title forState:UIControlStateHighlighted];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [btn setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];
    }
    [btn sizeToFit];
}

3：其中btnRightAction响应事件内容（主要用于显示跟隐藏下拉效果）：

- (void)btnRightAction
{
    if ([dropdownView isOpen])
    {
        [dropdownView hide];
    }
    else
    {
        //[tbViewType reloadData];
        [dropdownView showInView:self.view withFrame:CGRectMake(0, 0, mainWidth, self.view.bounds.size.height)];
    }

}

4：AllProTypeView下拉内容的视图代码如下（是一个列表）：

.h文件内容

#import <UIKit/UIKit.h>

@protocol AllProTypeViewDelegate
- (void)selectedTypeCode:(int)code;
@end

@interface AllProTypeView : UIView
@property(nonatomic,weak)id<AllProTypeViewDelegate> delegate;
@end

.m文件内容

@interface AllProTypeView ()<UITableViewDataSource,UITableViewDelegate>
{
    UITableView     *tbView;

    NSArray         *arrOfType;
    NSArray         *arrOfTypeImage;
    NSInteger       indexType;

    __weak id<AllProTypeViewDelegate> delegate;
}
@end

@implementation AllProTypeView
@synthesize delegate;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        self.backgroundColor = [UIColor redColor];

        tbView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, mainWidth, frame.size.height) style:UITableViewStyleGrouped];
        tbView.delegate = self;
        tbView.dataSource = self;
        tbView.backgroundColor = [UIColor whiteColor];
        tbView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
        tbView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
        [self addSubview:tbView];

        if(![OyTool ShardInstance].bIsForReview)
        {
            arrOfType = @[@"全部分类",@"手机数码",@"电脑办公",@"家用电器",@"化妆个护",@"钟表首饰",@"其他商品"];
            arrOfTypeImage = @[@"sort0",@"sort100",@"sort106",@"sort104",@"sort2",@"sort222",@"sort312"];
        }
        else
        {
            arrOfType = @[@"家用电器",@"化妆个护",@"钟表首饰",@"其他商品"];
            arrOfTypeImage = @[@"sort104",@"sort2",@"sort222",@"sort312"];
        }
    }
    return self;
}

#pragma mark - tableview
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

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

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 44;
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 0.1;
}

- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
    return 0.1;
}

- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell =  nil;//(UITableViewCell*)[tableView  dequeueReusableCellWithIdentifier:CellIdentifier];
    if(cell == nil)
    {
        cell = [[UITableViewCell alloc] init];
    }
    cell.textLabel.text = [NSString stringWithFormat:@"        %@", [arrOfType objectAtIndex:indexPath.row]];
    NSString* name = [arrOfTypeImage objectAtIndex:indexPath.row];

    if(indexPath.row == indexType)
    {
        name = [NSString stringWithFormat:@"%@_checked",name];
        cell.textLabel.textColor = mainColor;

        UIImageView* imgOK = [[UIImageView alloc] initWithFrame:CGRectMake(mainWidth - 32, 14, 20, 16)];
        imgOK.image = [UIImage imageNamed:@"screening_select"];
        [cell addSubview:imgOK];
    }
    else
    {
        name = [NSString stringWithFormat:@"%@_normal",name];
    }
    UIImageView* img = [[UIImageView alloc] initWithFrame:CGRectMake(16, 10, 24, 24)];
    img.image = [UIImage imageNamed:name];
    [cell addSubview:img];

    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    indexType = indexPath.row;
    [tbView reloadData];

    if(delegate)
    {
        NSString* code = [[arrOfTypeImage objectAtIndex:indexPath.row] stringByReplacingOccurrencesOfString:@"sort" withString:@""];
        [delegate selectedTypeCode:[code intValue]];
    }
}

@end

注意：列表有绑定是否是被选择，它显示的效果是不一样的，在触发行时对标识符进行重新赋值，把通过delegate把它传回主视图控件器里；

5：主控制器里响应上面delegate的内容为：

- (void)selectedTypeCode:(int)code
{
    iCodeType = code;
    [dropdownView hide];

    NSString* key = [NSString stringWithFormat:@"%d",code];
    NSString* name = [dicTypeName objectForKey:key];

    [self actionCustomNavBtn:btnRigth nrlImage:@"" htlImage:@"0" title:name];

   //重新绑定列表显示内容
    __weak typeof (self) wSelf = self;
    curPage = 1;
    [self getData:^{
        __strong typeof (wSelf) sSelf = wSelf;
        sSelf->listNew = nil;
    }];
}