您的位置:首页 > 产品设计 > UI/UE

[IOS]今天开始学UI---UISegmentedControl&&UIStepper

2015-08-07 08:38 393 查看
UISegmentControl是分段控件:拥有多个类似Button

UISegmentControlStyle自从 7.0 就已废弃 设置也没有任何实际效果

首先看他长什么样



貌似看起来很coooool这个View 简约可以这么形容他

图解分析该View属性:



该View提供的初始化函数为

- (instancetype)initWithItems:(NSArray *)items; // items can be NSStrings or UIImages. control is automatically sized to fit content
items 可以是NSString UIImage

NSArray *arr = @[@"item1",@"item2",@"item3"];
_segmentControl1 = [[UISegmentedControl alloc] initWithItems:arr];


当然开始不设置后期也可以直接设置某个Segment的title 或者image

</pre><pre name="code" class="objc">
- (void)setTitle:(NSString *)title forSegmentAtIndex:(NSUInteger)segment;
- (void)setImage:(UIImage *)image forSegmentAtIndex:(NSUInteger)segment;


对于某个Segment 宽度也是可以设置的 如果不进行设置 则由该View自己进行调整

- (void)setWidth:(CGFloat)width forSegmentAtIndex:(NSUInteger)segment;


要实现上图的样式

实现代码如下

@interface ViewController ()
@property (nonatomic,strong) UISegmentedControl *segmentControl1;
@property (nonatomic,strong) UISegmentedControl *segmentControl2;
@property (nonatomic,strong) UISegmentedControl *segmentControl3;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self configurationSegment1];
[self configurationSegment2];
[self configurationSegment3];
}

-(void)configurationSegment1{
NSArray *arr = @[@"item1",@"item2",@"item3"]; _segmentControl1 = [[UISegmentedControl alloc] initWithItems:arr];
_segmentControl1.frame = CGRectMake(0, 0, 300, 30);
CGPoint center = self.view.center;
[_segmentControl1 setEnabled:NO forSegmentAtIndex:2];
[_segmentControl1 setSelectedSegmentIndex:0];
_segmentControl1.center = CGPointMake(center.x, center.y-100);
[self.view addSubview:_segmentControl1];

UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
button.frame = CGRectMake(0, 0, 80, 30);
button.center = CGPointMake(center.x-40, center.y-60);
[button setTitle:@"Remove" forState:UIControlStateNormal];
[button addTarget:self action:@selector(remove:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];

UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
button2.frame = CGRectMake(0, 0, 80, 30);
button2.center = CGPointMake(center.x+40, center.y-60);
[button2 setTitle:@"Add" forState:UIControlStateNormal];
[button2 addTarget:self action:@selector(add:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button2];
}

-(void)configurationSegment2{
NSArray *arr = @[@"item1",@"item2",@"item3"];
_segmentControl2 = [[UISegmentedControl alloc] initWithItems:arr];
_segmentControl2.frame = CGRectMake(0, 0, 300, 30);
CGPoint center = self.view.center;
_segmentControl2.center = CGPointMake(center.x, center.y);
_segmentControl2.tintColor = [UIColor redColor];
[self.view addSubview:_segmentControl2];
}

-(void)configurationSegment3{
NSArray *arr = @[[UIImage imageNamed:@"checkmark_icon.png"],[UIImage imageNamed:@"tools_icon.png"],[UIImage imageNamed:@"search_icon.png"]];
_segmentControl3 = [[UISegmentedControl alloc] initWithItems:arr];
_segmentControl3.frame = CGRectMake(0, 0, 300, 30);
CGPoint center = self.view.center;
_segmentControl3.center = CGPointMake(center.x, center.y+100);
[self.view addSubview:_segmentControl3];
[_segmentControl3 setBackgroundImage:[UIImage imageNamed:@"stepper_and_segment_background.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[_segmentControl3 setDividerImage:[UIImage imageNamed:@"stepper_and_segment_segment_divider.png"] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
}

- (void)remove:(UIButton *)sender{
[_segmentControl1 removeSegmentAtIndex:_segmentControl1.selectedSegmentIndex animated:YES];
[_segmentControl1 setSelectedSegmentIndex:0];
}

- (void)add:(UIButton *)sender{
[_segmentControl1 insertSegmentWithTitle:@"added" atIndex:_segmentControl1.numberOfSegments>0?_segmentControl1.numberOfSegments-1:0 animated:YES];
}
@end


移除某个 或者全部segment用

- (void)removeSegmentAtIndex:(NSUInteger)segment animated:(BOOL)animated;
- (void)removeAllSegments;


添加一个segment用

- (void)insertSegmentWithTitle:(NSString *)title atIndex:(NSUInteger)segment animated:(BOOL)animated; // insert before segment number. 0..#segments. value pinned
- (void)insertSegmentWithImage:(UIImage *)image  atIndex:(NSUInteger)segment animated:(BOOL)animated;


如果这里给的index值 越界则会报错

如果需要设置选中某个segment 直接设置selectedSegmentIndex该属性的值就可

某个segment处于不可选中状态

- (void)setEnabled:(BOOL)enabled forSegmentAtIndex:(NSUInteger)segment;


这里附上以上的四张图片

checkmark_icon.png



search_icon.png



tools_icon.png



stepper_and_segment_background.png



stepper_and_segment_segment_divider.png




<=====其实就在这里
只是看不到 注意左上缺角

UIStepper完全可以看成简化过的UISegmentControl
属性也几乎可以照搬 除了默认只有两个按钮外



that's all

thx

Everything you see on Screen is UIView.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: