码迷,mamicode.com
首页 > 移动开发 > 详细

IOS学习之segmented control

时间:2014-08-21 21:04:24      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   io   strong   

 

转载请注明出处

http://blog.csdn.net/pony_maggie/article/details/27086877


作者:小马


什么是segmented control? 先上几张图:


bubuko.com,布布扣      bubuko.com,布布扣


bubuko.com,布布扣            bubuko.com,布布扣

 

这几幅图就是典型的segmented control UI视图, 第一幅是某个游戏程序,红色框出来的就是segmentedcontrol。 后面三幅是我这篇博文做的demo演示样例。

 

segmented control有例如以下几个特征:

 

1一般是在单视图中使用,不做多视图之间的切换。实现视图中不同显示的高速切换,每个切割表示一个不同的显示,这些显示往往是相关的,所谓的相关,能够理解成,功能一样,可是属性类别有差异,比方上图游戏程序中的几个切割。

 

比較经常使用的还有比方说,在一个视图中,不同的切割控制tableView载入不同的数据源。

 

2 它通常在整个屏幕的上部,不是必定,但大部分情况下是这样用。

 

3 通常是3到5个切割,超过5个的话每一个切割的大小对于用户触碰的体验会非常差。

 

4 随意时刻,仅仅有一个切割是激活状态的。有点像单选button。

 

开发环境:

mac os +xcode5.0 + ios7模拟器。

 

生成控件,代码例如以下:

- (void)initSegmentedControl
{
    NSArray *segmentedData = [[NSArray alloc]initWithObjects:@"apple",@"orange",@"banana",nil];
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc]initWithItems:segmentedData];
    segmentedControl.frame = CGRectMake(10.0, 20.0,300.0, 30.0);
    /*
     这个是设置按下button时的颜色
     */
    segmentedControl.tintColor = [UIColor colorWithRed:49.0 / 256.0 green:148.0 / 256.0 blue:208.0 / 256.0 alpha:1];
    segmentedControl.selectedSegmentIndex = 0;//默认选中的button索引


    /*
     以下的代码实同正常状态和按下状态的属性控制,比方字体的大小和颜色等
     */
    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:12],NSFontAttributeName,[UIColor redColor], NSForegroundColorAttributeName, nil];


    [segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];
    
    
    NSDictionary *highlightedAttributes = [NSDictionary dictionaryWithObject:[UIColor redColor] forKey:NSForegroundColorAttributeName];
    
    [segmentedControl setTitleTextAttributes:highlightedAttributes forState:UIControlStateHighlighted];
    
    //设置分段控件点击对应事件
    [segmentedControl addTarget:self action:@selector(doSomethingInSegment:)forControlEvents:UIControlEventValueChanged];
    
    [self.view addSubview:segmentedControl];
}

 

每一个功能凝视都有清晰的描写叙述,有一点要特别说明一下:

在ios7曾经,segmentedcontrol有一个segmentedControlStyle 属性,通常都要设置,比方像以下这样:

/*
     typedef enum {
     UISegmentedControlStylePlain,
     UISegmentedControlStyleBordered,
     UISegmentedControlStyleBar,
     UISegmentedControlStyleBezeled,
     } UISegmentedControlStyle;

 */
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;


可是这个在ios7之后,出于扁平化风格的考虑,这些style都不在有效了

 

我们再写一个button的事件响应函数,设置不同的背景图片,例如以下:

-(void)doSomethingInSegment:(UISegmentedControl *)Seg
{
    
    NSInteger Index = Seg.selectedSegmentIndex;
    
    switch (Index)
    {
        case 0:
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_apple_small.png")]];
            break;
        case 1:
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_orange_small.png")]];
            break;
        case 2:
            self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:kSrcName(@"bg_banana_small.png")]];
            break;
        default:
            break;
    }
}

代码比較简单。关键是理解segmented control的应用场景,灵活运用。除了第一幅图中的游戏程序,我这里再举一个样例,非常多时候会把segmented control嵌套在navigation bar里面使用,以降低navigationview之间的层级数量,给用户较好的体验,就像以下这样:

 

bubuko.com,布布扣         bubuko.com,布布扣 


源代码下载:

https://github.com/pony-maggie/SegmentedControl

http://download.csdn.net/detail/pony_maggie/7403175

 

IOS学习之segmented control,布布扣,bubuko.com

IOS学习之segmented control

标签:style   blog   http   color   使用   os   io   strong   

原文地址:http://www.cnblogs.com/hrhguanli/p/3927975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!