iOS 控件封装(又名拧螺丝)之排序按钮的开发

概述iOS 控件封装(又名拧螺丝)之排序按钮的开发 前言 排序按钮是实际开发中比较常见的一种控件,最近我也遇到了,今天简单分享下. 虽然功能简单,但是保证你看了不亏,尤其是对UI这块比较薄弱的同学来说. OK,先看图: 简单描述一下: 按钮一共有三种状态:非选中.选中升序.选中降序. 按钮的三种状态 点击按钮时有两种情况: 按钮原本处于非选中状态,点击,切换到选中状态,其状态变为升序. 按钮原本就处于选中状态,再点击一下,则切换其排序状态(升变降.降变升). 不同状态对应不同的icon,如果没有UI,可以去iconfont 找图标,输入关键词如& ...

前言

排序按钮是实际开发中比较常见的一种控件，最近我也遇到了，今天简单分享下。

虽然功能简单，但是保证你看了不亏，尤其是对UI这块比较薄弱的同学来说。

OK，先看图：

简单描述一下：

按钮一共有三种状态：非选中、选中升序、选中降序。

按钮的三种状态

点击按钮时有两种情况：

按钮原本处于非选中状态，点击，切换到选中状态，其状态变为升序。按钮原本就处于选中状态，再点击一下，则切换其排序状态（升变降、降变升）。

不同状态对应不同的icon，如果没有UI，可以去iconFont 找图标，输入关键词如“上下箭头”就可以找到你需要的icon。

基本思路

继承UIbutton，直接在button上放vIEw，设置约束，根据按钮的状态设置对应的图片。

PS：自定义按钮最灵活的做法就是直接在button上放vIEw（在不需要纠结内存和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 - 构造方法- (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 - 赋值选中状态- (voID)setSelected:(BOol)selected { //// 注意： //// selected 表示你要赋值的状态 //// super.selected 表示当前处于的状态 if (selected) { // 即将设置成选中状态  if (super.selected) { // 如果原本就处于选中状态   // 那么就切换筛选状态   _ascending = !_ascending;   if (_ascending) {    // 升序    self.cq_arrowImageVIEw.image = [UIImage imagenamed:@"red_arrow_up"];   } else {    // 降序    self.cq_arrowImageVIEw.image = [UIImage imagenamed:@"red_arrow_down"];   }  } else { // 如果之前不是选中状态   // 那么设置成选中的默认排序状态：升序   _ascending = YES;   self.cq_arrowImageVIEw.image = [UIImage imagenamed:@"red_arrow_up"];  } } else { // 即将设置成非选中状态  // 设置成非选中状态的图片  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个按钮点击，状态：%@",(long)(sender.tag-CQSortbuttonBeginTag),sender.isAscending ? @"升序" : @"降序");}

知识点及细节

1.如何让两个vIEw整体居中并且不超出父vIEw？

创建父vIEw是关键。

先创建一个父vIEw，这个父vIEw居中于button，左右不设置固定约束，再将两个vIEw放在父vIEw上，左边的vIEw与父vIEw左对齐，右边的vIEw与父vIEw右对齐，左边的vIEw与右边的vIEw水平方向约束确定，撑开父vIEw：

// 文本和图片的父vIEwUIVIEw *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,getter=isAscending) BOol ascending;

为什么这里要用Readonly？

因为这个属性的改变只能是通过内部（自身的.m）改变，而不能通过外部改变，或者说这个属性只是用来反映按钮的一个状态，就像UIScrollVIEw的decelerating属性一样，只是反映scrollVIEw正在减速，不能通过调用scrollVIEw.decelerating = YES让它主动减速。

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

总结一下就是Readonly适用于只用来反映对象的状态、特征或特性的属性。

你可以找几个苹果官方文档里的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);}];

关于这个方法的更多使用可以参考这篇文章：

iOS Masonry 等间隔或等宽高排列多个控件，很实用的技能，建议熟练掌握。
需要注意的是调用mas_distributeVIEwsAlongAxis这个方法的数组其元素个数必须bigger than one，否则没有效果，masonry源码截取：

- (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; } ......}

所以实际开发中如果你是获取后台的数组来展示的话，务必先判断数组的count。

Demo地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

总结

以上是内存溢出为你收集整理的iOS 控件封装(又名拧螺丝)之排序按钮的开发全部内容，希望文章能够帮你解决iOS 控件封装(又名拧螺丝)之排序按钮的开发所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。