本文將介紹如何實現一個簡單的下拉列表按鈕，使讀者能夠更進一步掌握UIButton類和UITableView類的使用，瞭解非iOS系統自帶控制元件的初始化方法，學習列表下拉、收起的動畫效果，編寫可重用的DropDownButton類，還可以對此進行優化、擴充套件和整理，便於以後專案實戰中直接拿來進行使用。

----------------------------------------------------------------------------------------------------------我是分割線-------------------------------------------------------------------------------------------------------------- 完成效果圖
----------------------------------------------------------------------------------------------------------這裡是正文--------------------------------------------------------------------------------------------------------------

1. 建立類DropDownButton

• 在Xcode中建立一個新的Cocoa Touch Class，取名DropDownButton，繼承UIButton，使用ARC

• 開啟DropDownButton.h檔案，宣告類成員及相應方法，編寫程式碼如下：

@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSArray *list;

/**
 *  初始化DropDownButton
 *
 *  @param frame 結構
 *  @param title 標題
 *  @param list  下拉列表
 *
 *  @return DropDownButton例項
 */
- (instancetype)initWithFrame:(CGRect)frame Title:(NSString*)title List:(NSArray *)list;
 

• 開啟DropDownButton.m檔案，在頂部新增以下程式碼：

static NSString *CellIdentifier = @"DropDownCell";

@interface GYCDropDownButton () <UITableViewDataSource, UITableViewDelegate> {
    UITableView *listView;
}

@end

至此，DropDownButton類成員、類方法和相應變數宣告完成，下面開始實現。

2. 實現下拉列表

繼續在DropDownButton.m檔案中編寫程式碼：

• 設定表檢視listView的佈局、資料來源和代理

- (void)setupDefaultTable {
    //將listView放在當前按鈕下方位置，保持寬度相同，初始高度設定為0
    listView = [[UITableView alloc] initWithFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y+self.frame.size.height, self.frame.size.width, 0) style:UITableViewStylePlain];
    
    listView.dataSource = self;
    listView.delegate = self;
}

• 新增listView的下拉動畫、收起動畫方法

- (void)startDropDownAnimation {
    CGRect frame = listView.frame;
    //使listView高度在0.3秒內從0過渡到最大高度以顯示全部列表項
    frame.size.height = self.frame.size.height*self.list.count;
    [UIView animateWithDuration:0.3 animations:^{
        listView.frame = frame;
    } completion:^(BOOL finished) {
        
    }];
}

- (void)startPackUpAnimation {
    CGRect frame = listView.frame;
    //使listView高度在0.3秒內從最大高度過渡到0以隱藏全部列表項
    frame.size.height = 0;
    [UIView animateWithDuration:0.3 animations:^{
        listView.frame = frame;
    } completion:^(BOOL finished) {
        
    }];
}

• 新增按鈕點選事件，每點選一次按鈕，tag值自加1，然後根據tag值執行下拉或收起列表動畫，最後重新載入一次listView的資料，防止串改列表項後不能及時更新到listView中

- (void)clickedToDropDown {
    self.tag++;
    self.tag%2 ? [self startDropDownAnimation] : [self startPackUpAnimation];
    
    [listView reloadData];
}

• 實現listView的資料來源和代理

#pragma mark - table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    //根據成員list陣列中的元素數返回列表的行數，必須保證self.list不為nil，才會呼叫cellForRowAtIndexPath方法
    return self.list.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (nil == cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    //設定列表中的每一項文字、字型、顏色等
    cell.textLabel.text = self.list[indexPath.row];
    cell.textLabel.font = self.titleLabel.font;
    cell.textLabel.textColor = self.titleLabel.textColor;
    
    return cell;
}

#pragma mark - table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    //選擇某項後，使按鈕標題內容變為當前選項
    [self setTitle:self.list[indexPath.row] forState:UIControlStateNormal];
    //執行列表收起動畫
    [self clickedToDropDown];
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    //設定表單元高度為按鈕高度
    return self.frame.size.height;
}

• 設定DropDownButton的初始化

- (void)setup {
    [self setTitle:self.title forState:UIControlStateNormal];
    [self setupDefaultTable];
    [self setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [self addTarget:self action:@selector(clickedToDropDown) forControlEvents:UIControlEventTouchUpInside];
}

通過initWithFrame方法例項化DropDownButton物件，先必須實現事先宣告的初始化方法，由於initWithFrame時，DropDownButton物件的父檢視肯定為nil，所以還需要重寫didMoveToSuperview，當下拉列表按鈕被新增進某一檢視上後將listView一同新增到該檢視上去。

- (instancetype)initWithFrame:(CGRect)frame Title:(NSString*)title List:(NSArray *)list {
    self = [super initWithFrame:frame];
    if (self) {
        self.title = [NSString stringWithString:title];
        self.list = [NSArray arrayWithArray:list];
        
        [self setup];
    }
    
    return self;
}

- (void)didMoveToSuperview {
    [self.superview addSubview:listView];
}

通過Interface Builder直接在xib中新增DropDownButton物件，需要重寫awakeFromNib方法，將listView新增到同一父檢視上去，這裡由於xib檔案緣故，self.surperview不為nil。

- (void)awakeFromNib {
    self.title = self.titleLabel.text;
    [self setup];
    [self.superview addSubview:listView];
}

3. 除錯執行

在你的view controller中匯入DropDownButton.h檔案

• 使用程式碼

    DropDownButton *button = [[DropDownButton alloc] initWithFrame:CGRectMake(40, 268, 240, 30) Title:@"請選擇性別" List:@[@"男", @"女"]];
    [self.view addSubview:button];

• 使用Interface Builder

拖拽Xcode物件庫中的Button控制元件進入xib的相應view中，在Attributes面板進行相關設定後修改Identity面板中的Class值UIButton為DropDownButton
再新增到一個輸出口

@property (retain, nonatomic) IBOutlet DropDownButton *button;

最後在viewDidLoad方法中編寫程式碼，設定好其屬性list

    button.list = @[@"男", @"女"];

執行即可 ----------------------------------------------------------------------------------------------------------我是分割線-------------------------------------------------------------------------------------------------------------- 注：要得到列表選擇某項的內容，需要呼叫UIButton物件方法titleForState:UIControlStateNormal得到，而不是通過DropDownButton物件的屬性成員title得到，這裡的title是按鈕最初始的標題內容，讀者可以對此進行修改，也可以根據自己喜好來擴充套件此類，如新增一些表單元的樣式風格、更華麗的動畫效果、更快捷的資料獲取等。