下拉框选择效果的实现原理 / 憋错料

导航栏与下拉框的效果

实现的效果是在导航栏中间出现下拉框选择的效果，当选择某一个时，则上面的字也相应进行修改（此实例代码可以看Coding.net的源代码），这边有把它单独提取出来进行测试，源代码下载；接下来将简单介绍一下此实现的方式及主要代码；

1：因为我们是跟导航栏进行结合，所以这边用到的NavigationController，我们把这个页面的效果放在viewController中，弹出来的下拉列表这边是以表格的形式存在，每个则是表格的一行，行里面包括图标跟文字；

首先看一下AppDelegate.m的代码：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    ViewController *loginVC = [[ViewController alloc] init];
    [self.window setRootViewController:[[UINavigationController alloc] initWithRootViewController:loginVC]];
    [self.window makeKeyAndVisible];
    return YES;
}

接着是ViewController.h及ViewController.m的代码：

#import <UIKit/UIKit.h>
#import "UIViewController+DownMenu.h"

@interface ViewController : UIViewController

@end

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, assign) NSInteger curIndex;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    _curIndex = 0;
    [self customDownMenuWithTitles:@[[DownMenuTitle title:@"冒泡广场" image:@"nav_tweet_all" badge:nil],
                                     [DownMenuTitle title:@"好友圈" image:@"nav_tweet_friend" badge:nil],
                                     [DownMenuTitle title:@"热门冒泡" image:@"nav_tweet_hot" badge:nil],
                                     [DownMenuTitle title:@"我的冒泡" image:@"nav_tweet_mine" badge:nil]]
                   andDefaultIndex:_curIndex
                          andBlock:^(id titleObj, NSInteger index) {
                              [(DownMenuTitle *)titleObj setBadgeValue:nil];
                              _curIndex = index;
                              [self refreshFirst];
                          }];
}

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

-(void)refreshFirst
{
    NSLog(@"%ld",_curIndex);
}

@end

这边把一些内容封装到的UIViewController+DownMenu.h这个文件及实现里；

2：UIViewController+DownMenu主要代码如下：

#import <UIKit/UIKit.h>
#import "UIDownMenuButton.h"
@class DownMenuTitle;

@interface UIViewController (DownMenu)
- (UIDownMenuButton *)customDownMenuWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andBlock:(void (^)(id titleObj, NSInteger index))block;
- (UIDownMenuButton *)downMenuBtn;
@end

#import "UIViewController+DownMenu.h"

@implementation UIViewController (DownMenu)
- (UIDownMenuButton *)customDownMenuWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andBlock:(void (^)(id titleObj, NSInteger index))block{
    UIDownMenuButton *navBtn = [[UIDownMenuButton alloc] initWithTitles:titleList andDefaultIndex:index andVC:self];
    navBtn.menuIndexChanged = block;
    self.navigationItem.titleView = navBtn;
    return navBtn;
}
- (UIDownMenuButton *)downMenuBtn{
    if (self.navigationItem.titleView || [self.navigationItem.titleView isKindOfClass:[UIDownMenuButton class]]) {
        UIDownMenuButton *navBtn = (UIDownMenuButton *)self.navigationItem.titleView;
        return navBtn;
    }else{
        return nil;
    }
}
@end

注意：UIDownMenuButton这个就是上面每个行的封装，这边可以看到在其对它进行增加到nav里面；

3：UIDownMenuButton主要代码如下：

#import <UIKit/UIKit.h>
#import "NSString+Common.h"

@class DownMenuTitle;

@interface UIDownMenuButton : UIButton <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, assign) NSInteger curIndex;

- (UIDownMenuButton *)initWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andVC:(UIViewController *)viewcontroller;
@property (nonatomic,copy) void(^menuIndexChanged)(id titleObj, NSInteger index);

@end

@interface DownMenuTitle : NSObject
@property (nonatomic, strong) NSString *titleValue, *imageName, *badgeValue;
+ (DownMenuTitle *)title:(NSString *)title image:(NSString *)image badge:(NSString *)badge;
@end

#define kNavImageWidth (15.0+5.0)
#define kDownMenu_ContentLeftPading 27.0
#define kDownMenuCellHeight 50.0
#define  kNavTitleFontSize 19
#define kScreen_Bounds [UIScreen mainScreen].bounds
#define kScreen_Height [UIScreen mainScreen].bounds.size.height
#define kScreen_Width [UIScreen mainScreen].bounds.size.width
#define kKeyWindow [UIApplication sharedApplication].keyWindow

#define DEGREES_TO_RADIANS(angle) ((angle)/180.0 *M_PI)
#define RADIANS_TO_DEGREES(radians) ((radians)*(180.0/M_PI))

#import "UIDownMenuButton.h"
#import "DownMenuCell.h"

@interface UIDownMenuButton()

@property (nonatomic, strong) NSArray *titleList;
@property (nonatomic, assign) BOOL isShowing;
@property (nonatomic, strong) UIView *mySuperView, *myTapBackgroundView;
@property (nonatomic, strong) UITableView *myTableView;

@end

@implementation UIDownMenuButton

- (UIDownMenuButton *)initWithTitles:(NSArray *)titleList andDefaultIndex:(NSInteger)index andVC:(UIViewController *)viewcontroller{
    self = [super init];
    if (self) {
        _titleList = titleList;
        _curIndex = index;
        _isShowing = NO;
        _mySuperView = viewcontroller.view;

        self.backgroundColor = [UIColor clearColor];
        [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [self setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted];
        [self.titleLabel setFont:[UIFont systemFontOfSize:kNavTitleFontSize]];
        [self.titleLabel setMinimumScaleFactor:0.5];
        [self addTarget:self action:@selector(changeShowing) forControlEvents:UIControlEventTouchUpInside];
        [self refreshSelfUI];
    }
    return self;
}

- (void)refreshSelfUI{
    NSString *titleStr = @"";
    DownMenuTitle *menuObj = [self.titleList objectAtIndex:self.curIndex];
    titleStr = menuObj.titleValue;
    CGFloat titleWidth = [titleStr getWidthWithFont:self.titleLabel.font constrainedToSize:CGSizeMake(kScreen_Width, 30)];
    CGFloat btnWidth = titleWidth +kNavImageWidth;
    self.frame = CGRectMake((kScreen_Width-btnWidth)/2, (44-30)/2, btnWidth, 30);

    self.titleEdgeInsets = UIEdgeInsetsMake(0, -kNavImageWidth, 0, kNavImageWidth);
    self.imageEdgeInsets = UIEdgeInsetsMake(0, titleWidth, 0, -titleWidth);
    [self setTitle:titleStr forState:UIControlStateNormal];
    [self setImage:[UIImage imageNamed:@"nav_arrow_down"] forState:UIControlStateNormal];
}

- (void)changeShowing{
    [kKeyWindow endEditing:YES];

    if (!self.myTableView) {
        //定义其显示的位置
        self.myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,64, kScreen_Width, 0) style:UITableViewStylePlain];
        [self.myTableView registerClass:[DownMenuCell class] forCellReuseIdentifier:kCellIdentifier_DownMenu];
        self.myTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        self.myTableView.dataSource = self;
        self.myTableView.delegate = self;
        self.myTableView.alpha = 0;
        self.myTableView.scrollEnabled = NO;
    }
    if (!self.myTapBackgroundView) {
        self.myTapBackgroundView = [[UIView alloc] initWithFrame:kScreen_Bounds];
        self.myTapBackgroundView.backgroundColor = [UIColor clearColor];
        UITapGestureRecognizer *bgTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(changeShowing)];
        [self.myTapBackgroundView addGestureRecognizer:bgTap];
    }

    if (self.isShowing) {//隐藏
        CGRect frame = self.myTableView.frame;
        frame.size.height = 0;
        self.enabled = NO;
        [UIView animateWithDuration:0.3 animations:^{
            [self refreshSelfUI];
            self.myTapBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0];
            self.myTableView.alpha = 0;
            self.myTableView.frame = frame;
            self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, DEGREES_TO_RADIANS(180));
        } completion:^(BOOL finished) {
            [self.myTableView removeFromSuperview];
            [self.myTapBackgroundView removeFromSuperview];
            self.enabled = YES;
            self.isShowing = !self.isShowing;
        }];
    }else{//显示
        [[UIApplication sharedApplication].keyWindow addSubview:self.myTapBackgroundView];
        [[UIApplication sharedApplication].keyWindow addSubview:self.myTableView];
        [self.myTableView reloadData];
        CGRect frame = self.myTableView.frame;
        frame.size.height = kDownMenuCellHeight *[self.titleList count];
        self.enabled = NO;
        [UIView animateWithDuration:0.3 animations:^{
            self.myTapBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.2];
            self.myTableView.alpha = 1.0;
            self.myTableView.frame = frame;
            self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, DEGREES_TO_RADIANS(180));
        } completion:^(BOOL finished) {
            self.enabled = YES;
            self.isShowing = YES;
        }];
    }
}

#pragma mark Table M
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return [self.titleList count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    DownMenuCell *cell = [tableView dequeueReusableCellWithIdentifier:kCellIdentifier_DownMenu forIndexPath:indexPath];
    DownMenuTitle *curItem =[self.titleList objectAtIndex:indexPath.row];
    cell.curItem = curItem;
    cell.backgroundColor = (indexPath.row == self.curIndex)? [UIColor colorWithHexString:@"0xf3f3f3"] : [UIColor whiteColor];
    return cell;
}

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

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    self.curIndex = indexPath.row;
    [self changeShowing];
    if (self.menuIndexChanged) {
        self.menuIndexChanged([self.titleList objectAtIndex:_curIndex], _curIndex);
    }
}

- (void)setCurIndex:(NSInteger)curIndex{
    _curIndex = curIndex;
    [UIView animateWithDuration:0.3 animations:^{
        [self refreshSelfUI];
//        [self.myTableView reloadData];
//        [self.myTableView performSelector:@selector(reloadData) withObject:nil afterDelay:0.3];
    }];
}

- (void)dealloc
{
    self.myTableView.delegate = nil;
}

@end

@implementation DownMenuTitle
+ (DownMenuTitle *)title:(NSString *)title image:(NSString *)image badge:(NSString *)badge{
    DownMenuTitle *menuObj = [[DownMenuTitle alloc] init];
    menuObj.titleValue = title;
    menuObj.badgeValue = badge;
    menuObj.imageName = image;
    return menuObj;
}
@end

其中refreshSelfUI这个方法里面是实现的选择时，对应文字跟箭头图标的变化；重点的内容在changeShowing这个方法，它有定义列表要显示的位置，列表的创建初始化，及背景模态的出现，显示及隐藏的内容，视图的创建及删除；最后一个是实体的赋值；

4：表格单元行的布局DownMenuCell，主要代码如下：

#define kCellIdentifier_DownMenu @"DownMenuCell"

#import <UIKit/UIKit.h>
#import "UIDownMenuButton.h"
#import "UIColor+expanded.h"

@interface DownMenuCell : UITableViewCell
@property (strong, nonatomic) DownMenuTitle *curItem;
@end

#import "DownMenuCell.h"

@implementation DownMenuCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
    }
    return self;
}

- (void)awakeFromNib
{
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}
- (void)layoutSubviews{
    [super layoutSubviews];
    if (!_curItem) {
        return;
    }
    self.imageView.frame = CGRectMake(27, (50.0-25.0)/2, 25, 25);
    self.textLabel.frame = CGRectMake(65, (50.0-25.0)/2, 150, 25);
    self.textLabel.backgroundColor = [UIColor clearColor];
    self.textLabel.textColor = [UIColor blackColor];
    self.textLabel.font = [UIFont systemFontOfSize:15];

    self.imageView.image = [UIImage imageNamed:_curItem.imageName];
    self.textLabel.text = _curItem.titleValue;;
}
@end

时间： 2024-10-09 09:01:08

下拉框选择效果的实现原理

下拉框选择效果的实现原理的相关文章

下拉框选择效果的实现原理2

jQuery实现下拉框选择图片的功能

JQuery打造下拉框联动效果

分类编码下拉框选择自动带出分类名称

asp.net mvc中下拉框联动效果添加方法

下拉框选择blur与click冲突问题

Easyui多个下拉框联动效果

selenium-Python之定位下拉框选择

easyui 绑定下拉框，下拉框选择改变事件的触发方法