iOS 控件封裝(又名擰螺絲)之排序按鈕的開發(fā)

更新時間：2018年12月13日 09:37:56 作者：H.A.N

排序按鈕是實際開發(fā)中比較常見的一種控件，這篇文章主要介紹了iOS 開發(fā)之排序按鈕，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

排序按鈕是實際開發(fā)中比較常見的一種控件，最近我也遇到了，今天簡單分享下。

雖然功能簡單，但是保證你看了不虧，尤其是對UI這塊比較薄弱的同學來說。

OK，先看圖：

簡單描述一下：

按鈕一共有三種狀態(tài)：非選中、選中升序、選中降序。

按鈕的三種狀態(tài)

點擊按鈕時有兩種情況：

按鈕原本處于非選中狀態(tài)，點擊，切換到選中狀態(tài)，其狀態(tài)變?yōu)樯颉?/li>
按鈕原本就處于選中狀態(tài)，再點擊一下，則切換其排序狀態(tài)（升變降、降變升）。

不同狀態(tài)對應(yīng)不同的icon，如果沒有UI，可以去iconfont 找圖標，輸入關(guān)鍵詞如“上下箭頭”就可以找到你需要的icon。

基本思路

繼承UIButton，直接在button上放view，設(shè)置約束，根據(jù)按鈕的狀態(tài)設(shè)置對應(yīng)的圖片。

PS：自定義按鈕最靈活的做法就是直接在button上放view（在不需要糾結(jié)內(nèi)存和view層級的情況下），簡單粗暴、隨心所欲。

完整代碼

.h文件：

#import <UIKit/UIKit.h>

@interface CQSortButton : UIButton

/** 按鈕文本 */
@property (nonatomic, copy) NSString *title;
/** 是否是升序 */
@property (nonatomic, assign, readonly, getter=isAscending) BOOL ascending;

@end

.m文件：

#import "CQSortButton.h"

@interface CQSortButton ()

/** 文本label */
@property (nonatomic, strong) UILabel *cq_titleLabel;
/** 箭頭imageView */
@property (nonatomic, strong) UIImageView *cq_arrowImageView;

@end

@implementation CQSortButton

#pragma mark - 構(gòu)造方法

- (instancetype)initWithFrame:(CGRect)frame {
 if (self = [super initWithFrame:frame]) {
  [self setupUI];
 }
 return self;
}

#pragma mark - UI搭建

- (void)setupUI {
 self.layer.borderColor = [UIColor blackColor].CGColor;
 self.layer.borderWidth = 1;

 // 文本和圖片的父view
 UIView *contentView = [[UIView alloc] init];
 [self addSubview:contentView];
 contentView.userInteractionEnabled = NO;
 [contentView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.bottom.centerX.mas_equalTo(self);
  make.left.mas_greaterThanOrEqualTo(self).mas_offset(3);
  make.right.mas_lessThanOrEqualTo(self).mas_offset(-3);
 }];

 // 文本
 self.cq_titleLabel = [[UILabel alloc] init];
 [contentView addSubview:self.cq_titleLabel];
 self.cq_titleLabel.font = [UIFont boldSystemFontOfSize:13];
 self.cq_titleLabel.adjustsFontSizeToFitWidth = YES;
 [self.cq_titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.bottom.left.mas_offset(0);
 }];

 // 圖片
 self.cq_arrowImageView = [[UIImageView alloc] init];
 [contentView addSubview:self.cq_arrowImageView];
 self.cq_arrowImageView.image = [UIImage imageNamed:@"up_down"];
 [self.cq_arrowImageView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.size.mas_equalTo(CGSizeMake(20, 20));
  make.centerY.mas_equalTo(contentView);
  make.left.mas_equalTo(self.cq_titleLabel.mas_right);
  make.right.mas_equalTo(contentView);
 }];
}

#pragma mark - 賦值選中狀態(tài)

- (void)setSelected:(BOOL)selected {
 //// 注意：
 //// selected 表示你要賦值的狀態(tài)
 //// super.selected 表示當前處于的狀態(tài)

 if (selected) { // 即將設(shè)置成選中狀態(tài)
  if (super.selected) { // 如果原本就處于選中狀態(tài)
   // 那么就切換篩選狀態(tài)
   _ascending = !_ascending;
   if (_ascending) {
    // 升序
    self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_up"];
   } else {
    // 降序
    self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_down"];
   }
  } else { // 如果之前不是選中狀態(tài)
   // 那么設(shè)置成選中的默認排序狀態(tài)：升序
   _ascending = YES;
   self.cq_arrowImageView.image = [UIImage imageNamed:@"red_arrow_up"];
  }
 } else { // 即將設(shè)置成非選中狀態(tài)
  // 設(shè)置成非選中狀態(tài)的圖片
  self.cq_arrowImageView.image = [UIImage imageNamed:@"up_down"];
 }

 // 最后再賦值
 [super setSelected:selected];
}

#pragma mark - 賦值文本

- (void)setTitle:(NSString *)title {
 _title = title;
 self.cq_titleLabel.text = title;
}

@end

使用：

- (void)viewDidLoad {
 [super viewDidLoad];
 // Do any additional setup after loading the view.

 NSArray *titleArray = @[@"同比", @"銷售額", @"🙃", @"文字有點多啊"];

 NSMutableArray *buttonArray = [NSMutableArray array];
 for (int i = 0; i < 4; i++) {
  CQSortButton *button = [[CQSortButton alloc] init];
  [self.view addSubview:button];
  button.title = titleArray[i];
  button.tag = CQSortButtonBeginTag + i;
  [button addTarget:self action:@selector(sortButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
  [buttonArray addObject:button];
 }

 // 按鈕等寬依次排列
 [buttonArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
 [buttonArray mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.mas_equalTo(100);
  make.height.mas_equalTo(40);
 }];
}

- (void)sortButtonClicked:(CQSortButton *)sender {
 for (int i = 0; i < 4; i++) {
  CQSortButton *button = [self.view viewWithTag:(CQSortButtonBeginTag + i)];
  button.selected = (button.tag == sender.tag);
 }
 NSLog(@"第%ld個按鈕點擊，狀態(tài)：%@", (long)(sender.tag-CQSortButtonBeginTag), sender.isAscending ? @"升序" : @"降序");
}

知識點及細節(jié)

1.如何讓兩個view整體居中并且不超出父view？

創(chuàng)建父view是關(guān)鍵。

先創(chuàng)建一個父view，這個父view居中于button，左右不設(shè)置固定約束，再將兩個view放在父view上，左邊的view與父view左對齊，右邊的view與父view右對齊，左邊的view與右邊的view水平方向約束確定，撐開父view：

// 文本和圖片的父view
UIView *contentView = [[UIView alloc] init];
[self addSubview:contentView];

[contentView addSubview:self.cq_titleLabel];
[contentView addSubview:self.cq_arrowImageView];

[self.cq_titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
 make.top.bottom.left.mas_offset(0);
}];
[self.cq_arrowImageView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.size.mas_equalTo(CGSizeMake(20, 20));
 make.centerY.mas_equalTo(contentView);
 make.left.mas_equalTo(self.cq_titleLabel.mas_right);
 make.right.mas_equalTo(contentView);
}];

不超出父view（此處指button）用mas_greaterThanOrEqualTo和mas_lessThanOrEqualTo即可：

[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
 make.top.bottom.centerX.mas_equalTo(self);
 make.left.mas_greaterThanOrEqualTo(self).mas_offset(3);
 make.right.mas_lessThanOrEqualTo(self).mas_offset(-3);
}];

2.readonly的使用

/** 是否是升序 */
@property (nonatomic, assign, readonly, getter=isAscending) BOOL ascending;

為什么這里要用readonly？

因為這個屬性的改變只能是通過內(nèi)部（自身的.m）改變，而不能通過外部改變，或者說這個屬性只是用來反映按鈕的一個狀態(tài)，就像UIScrollView的decelerating屬性一樣，只是反映scrollView正在減速，不能通過調(diào)用scrollView.decelerating = YES讓它主動減速。

// returns YES if user isn't dragging (touch up) but scroll view is still moving
@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating;

總結(jié)一下就是readonly適用于只用來反映對象的狀態(tài)、特征或特性的屬性。

你可以找?guī)讉€蘋果官方文檔里的readonly屬性好好感受一下。

3.如何使用masonry等寬等間距排列控件？

用masory提供的mas_distributeViewsAlongAxis方法：

// 按鈕等寬依次排列[buttonArray mas_distributeViewsAlongAxis:MASAxisTypeHorizontal withFixedSpacing:0 leadSpacing:0 tailSpacing:0];
[buttonArray mas_makeConstraints:^(MASConstraintMaker *make) {
 make.top.mas_equalTo(100);
 make.height.mas_equalTo(40);
}];

關(guān)于這個方法的更多使用可以參考這篇文章：

iOS Masonry 等間隔或等寬高排列多個控件，很實用的技能，建議熟練掌握。
需要注意的是調(diào)用mas_distributeViewsAlongAxis這個方法的數(shù)組其元素個數(shù)必須bigger than one，否則沒有效果，masonry源碼截?。?/p>

- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing { if (self.count < 2) {  NSAssert(self.count>1,@"views to distribute need to bigger than one");  return;
 }
 ......
}

所以實際開發(fā)中如果你是獲取后臺的數(shù)組來展示的話，務(wù)必先判斷數(shù)組的count。

Demo地址

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: