iOS中 UISearchController 搜尋欄 UI技術分享

iOS中 UISearchController 搜尋欄 UI技術分享

UISearchController 繼承自UIViewController

    // 在iOS 8.0以上版本中, 我們可以使用UISearchController來非常方便地在UITableView中添加搜尋方塊. 而在之前版本中, 我們還是必須使用UISearchBar + UISearchDisplayController的組合方式.

#import SearchViewController.h#define kTableCell @tablecell@interface SearchViewController ()@property(nonatomic,retain)NSMutableArray *items;@property(nonatomic,retain)UISearchController *searchController;@property(nonatomic,retain)NSMutableArray *searchResults;//接收資料來源結果@end

懶載入及釋放

 

@implementation SearchViewController- (instancetype)init{    self = [super init];    if (self) {        }    return self;}//懶載入- (NSMutableArray *)items{    if (!_items) {        self.items = [NSMutableArray arrayWithCapacity:0];    }    return [[_items retain]autorelease];}//懶載入- (NSMutableArray *)searchResults{    if (!_searchResults) {        self.searchResults = [NSMutableArray arrayWithCapacity:0];    }    return [[_searchResults retain]autorelease];}//釋放- (void)dealloc{    self.items = nil;    self.searchResults = nil;    self.searchController = nil;    [super dealloc];}

調用:

 

 

- (void)viewDidLoad {    [super viewDidLoad];    //導覽列    [self p_navigationController];    //調用初始化searchController    [self setSearchControllerView];        //註冊    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kTableCell];    }

 

初始化SearchController初始化

 

- (void)setSearchControllerView{    self.searchController = [[UISearchController alloc]initWithSearchResultsController:nil];    self.searchController.searchBar.frame = CGRectMake(0, 0, 0, 44);    self.searchController.dimsBackgroundDuringPresentation = false;    //搜尋欄表頭視圖    self.tableView.tableHeaderView = self.searchController.searchBar;    [self.searchController.searchBar sizeToFit];//背景顏色    self.searchController.searchBar.backgroundColor = [UIColor orangeColor];    self.searchController.searchResultsUpdater = self;}

 

//引入UISearchController之後, UITableView的內容也要做相應地變動: 即cell中要呈現的內容是items, 還是searchResults.這一點, 可以通過UISearchController的active屬性來判斷, 即判斷輸入框是否處於active狀態.

//UITableView相關的很多方法都要根據active來做判斷:

配置導航條

 

- (void)p_navigationController{    self.title = @小韓哥-英雄列表;    self.items = @[@國服第一臭豆腐 No.1 Stinky Tofu CN.,                   @比爾吉沃特(Bill Ji walter),                   @瓦洛蘭 Valoran,                   @祖安 Zaun,                   @德瑪西亞 Demacia,                   @諾克薩斯 Noxus,                   @艾歐尼亞 Ionia,                   @皮爾特沃夫 Piltover,                   @弗雷爾卓德 Freijord,                   @班德爾城 Bandle City,                   @無畏先鋒,                   @戰爭學院 The Institute of War,                   @巨神峰,                   @雷瑟守備(JustThunder),                   @裁決之地(JustRule),                   @黑色玫瑰(Black Rose),                   @暗影島（Shadow island）,                   @鋼鐵烈陽（Steel fierce）,                   @恕瑞瑪沙漠 Shurima Desert,                   @均衡教派（Balanced sect）,                   @水晶之痕（Crystal Scar）,                   @影流（Shadow Flow ）,                   @守望之海（The Watchtower of sea）,                   @皮爾特沃夫,                   @征服之海,                   @扭曲叢林 Twisted Treeline,                   @教育網專區,                   @試煉之地 Proving Grounds,                   @卡拉曼達 Kalamanda,                   @藍焰島 Blue Flame Island,                   @哀嚎沼澤 Howling Marsh,                   @艾卡西亞 Icathia,                   @鐵脊山脈 Ironspike Mountains,                   @庫莽古叢林 Kumungu,                   @洛克法 Lokfar,                   @摩根小道 Morgon Pass,                   @塔爾貢山脈 Mountain Targon,                   @瘟疫叢林 Plague Jungles,                   @盤蛇河 Serpentine River,                   @厄爾提斯坦 Urtistan,                   @巫毒之地 Voodoo Lands,                   @咆哮深淵 Howling Abyss,                   @熔岩洞窟 Magma Chambers,                   @召喚師峽穀 Summoner's Rift,                   @九尾妖狐： 阿狸（Ahri）,                   @暗影之拳：阿卡麗（Akali）,                   @牛頭酋長：阿利斯塔（Alistar）,                   @殤之木乃伊：阿木木（Amumu）,                   @冰晶鳳凰：艾尼維亞（Anivia）,                   @黑暗之女：安妮（Annie）,                   @寒冰射手：艾希（Ashe）,                   @蒸汽機器人：布裡茨（Blitzcrank),                   @複仇焰魂：布蘭德（Brand）,                   @皮城女警：凱特琳（Caitlyn）,                   @魔蛇之擁：卡西奧佩婭（Cassiopeia）,                   @虛空恐懼：科’加斯（ChoGath）,                   @英勇投彈手：庫奇（Corki）,                   @諾克薩斯之手：德萊厄斯（Darius）,                   @皎月女神：黛安娜：（Diana）,                   @祖安狂人：蒙多醫生（DrMundo）,                   @榮耀行刑官：德萊文（Delevin）,                   @蜘蛛女皇：伊莉斯（Elise）,                   @寡婦製造者：伊芙琳（Evelynn）,                   @探險家：伊澤瑞爾（Ezreal）,                   @末日使者：費德提克（Fiddlesticks）,                   @無雙劍姬：劍姬（Fiora）,                   @潮汐海靈：菲茲（Fizz）,                   @哨兵之殤：加裡奧（Galio）,                   @海洋之災：普朗克（Gangplank）,                   @德瑪西亞之力：蓋倫（Garen）,                   @酒桶：古拉加斯（Gragas）,                   @法外狂徒：格雷福斯（Graves）,                   @戰爭之影：赫卡裡姆 （Hecarim）,                   @大發明家：黑默丁格（Heimerdinger）,                   @刀鋒意志：伊瑞利亞（Irelia）,                   @風暴之怒：迦娜（Janna）,                   @德瑪西亞皇子：嘉文四世（JarvanⅣ）,                   @武器大師：賈克斯（Jax）,                   @未來守護者：傑斯（Jayce）,                   @天啟者：卡爾瑪（Karma）,                   @死亡頌唱者：卡爾薩斯（Karthus）,                   @虛空行者：卡薩丁（Kassadin）,                   @不詳之刃：卡特琳娜（Katarina）,                   @審判天使：凱爾（Kayle）,                   @狂暴之心：凱南（Kennen）,                   @虛空掠奪者：卡’茲克（Khazix）,                   @深淵巨口：克格’莫（Kog Maw）,                   @詭術妖姬：樂芙蘭（LeBlanc）,                   @盲僧：李青（Lee sin）,                   @曙光女神：蕾歐娜（Leona）,                   @仙靈女巫：璐璐（lulu）,                   @光輝女郎：拉克絲（Lux）,                   @熔岩巨獸：墨菲特（Malphite）,                   @虛空Crowdsourced Security Testing：瑪爾紮哈（Malzahar）,                   @扭曲樹精：茂凱（Maokai）,                   @無極劍聖：易（Yi）,                   @賞金獵人：厄運小姐（MissFortune）,                   @齊天大聖：孫悟空（Monkey king）,                   @金屬大師：莫德凱撒（Mordekaiser）,                   @墮天使：莫甘娜（Morgana）,                   @喚潮鮫姬：娜美（Nami）,                   @沙漠死神：內瑟斯（Nasus）,                   @深海泰坦：諾提勒斯（Nautilus）,                   @狂野女獵手：奈德麗（Nidalee）,                   @永恒夢魘：魔騰（Nocturne）,                   @雪人騎士：努努（Nunu）,                   @狂戰士：奧拉夫（Olaf）,                   @發條魔靈：奧莉安娜（Orianna）,                   @戰爭之王：潘森（Pantheon）,                   @鋼鐵大使：波比（Poopy）,                   @披甲龍龜：拉莫斯（Rammus）,                   @荒漠屠夫：雷克頓（Renekton）,                   @傲之追獵者：雷恩加爾（Rengar）,                   @放逐之刃：瑞文（Rivan）,                   @機械公敵：蘭博（Rumble）,                   @流浪法師：瑞茲（Ryze）,                   @凜冬之怒：瑟莊妮：（Sejuani）,                   @惡魔小丑：薩科（Shaco）,                   @暮光之眼：慎（Shen）,                   @龍血武姬：希瓦娜（Shyvana）,                   @鍊金術士：辛吉德（Singed）,                   @亡靈勇士：賽恩（Sion）,                   @戰爭女神：希維爾（Sivir）,                   @水晶先鋒：斯卡納（Skarner）,                   @琴瑟仙女：娑娜（Sona）,                   @眾星之子：索拉卡（Soraka）,                   @策士統領：斯維因（Swain）,                   @暗黑元首：辛德拉（Syndra）,                   @刀鋒之影：泰隆（Talon）,                   @寶石騎士：塔裡克（Taric）,                   @迅捷斥候：提莫（Teemo）,                   @魂鎖典獄長：錘石（Thresh）,                   @麥林炮手：崔絲塔娜（Tristana）,                   @詛咒巨魔：特蘭德爾（Trundle）,                   @蠻族之王：泰達米爾（Tryndamere）,                   @卡牌大師：崔斯特（Twisted Fate）,                   @瘟疫之源：圖奇（Twitch）,                   @野獸之靈：烏迪爾（Udyr）,                   @首領之傲：厄加特（Urgot）,                   @懲戒之箭：韋魯斯（Varus）,                   @暗夜獵手：薇恩（Vayne）,                   @邪惡小法師：維伽（Veigar）,                   @皮城執法官：蔚（Vi）,                   @機械先驅：維克托（Viktor）,                   @猩紅收割者：弗拉基米爾（Vladimir）,                   @雷霆咆哮：沃利貝爾（Volibear）,                   @嗜血獵手：沃裡克（Warwick）,                   @遠古巫靈：澤拉斯（Xerath）,                   @德邦總管：趙信（XinZhao）,                   @掘墓者：約裡克(Yorick),                   @影流之主：劫（Zed）,                   @爆破鬼才：吉格斯（Ziggs）,                   @時光守護者：基蘭（Zilean）,                   @荊棘之興：婕拉（Zyra）].mutableCopy;}

 

#pragma mark 協議中的方法

- (void)updateSearchResultsForSearchController:(UISearchController *)searchController{        [self.searchResults removeAllObjects];    //NSPredicate 謂詞    NSPredicate *searchPredicate = [NSPredicate predicateWithFormat:@self contains[cd] %@,searchController.searchBar.text];    self.searchResults = [[self.items filteredArrayUsingPredicate:searchPredicate]mutableCopy];    //重新整理表格    [self.tableView reloadData];        }

#pragma mark - Table view data source

 

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {        // Return the number of sections.    return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {        return (!self.searchController.active) ? self.items.count : self.searchResults.count;}

返回cell:

 

 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kTableCell forIndexPath:indexPath];        if (cell == nil) {        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:kTableCell];    }            if (indexPath.row > 0) {        cell.imageView.frame = CGRectMake(60, 60, 10, 10);        cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@%ld,indexPath.row + 43]];        cell.textLabel.font = [UIFont systemFontOfSize:15];    }    cell.textLabel.text = (!self.searchController.active) ? self.items[indexPath.row] : self.searchResults[indexPath.row];        return cell;}

業務代理返回高:

 

 

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{    if (indexPath.row == 0) {        return 100  ;    }else{        return 80;    }}

最終效果: