`

常用控件之Slider(不使用xib构建UI) .

    博客分类:
  • ios
ios 
阅读更多
实现的功能:1)不使用xib构建UI,包括一个slider、两个label;2)改变slider的值,label中slider的值随之改变;3)改变slider的值,缩放另一个label中的文本(实际就是改变该label字体的大小)


关键词:slider 缩放 不使用xib


1、创建一个Single View Application工程,命名为:SliderDemo,如下图
[img]

[/img]




2、我们不使用xib构建UI,所以现删除ViewController.xib文件




3、修改ViewController.h后如下:
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
//添加代码
@property(nonatomic,retain)UILabel *sliderValueLabel;
@property(nonatomic,retain)UISlider *slider;

@property(nonatomic,retain)UILabel *xLabel;
@property(assign,nonatomic)CGFloat initialFontSize;
@end






4、修改ViewController.m后如下:
//
//  ViewController.m
//  SliderDemo
//
//  Created by Yanguang Zhang on 12-10-24.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
//添加代码
@synthesize slider;
@synthesize sliderValueLabel;

@synthesize xLabel;
@synthesize initialFontSize;
//修改代码
/*
- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}*/

-(void)loadView{
    UIView *myView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].applicationFrame];
    [myView setBackgroundColor:[UIColor whiteColor]];
    self.view = myView;
    //初始化视图
    [self initViews];
}

-(void)initViews{
    //初始化slider
    //sliderValueLabel = [[UILabel alloc]initWithFrame:CGRectMake(20, 30, 50, 40)];
    //显示slider值的label
    sliderValueLabel = [[UILabel alloc]init];
    CGRect frame = sliderValueLabel.frame;
    frame.origin.x = 20;
    frame.origin.y = 30;
    frame.size.width = 50;
    frame.size.height = 40;
    sliderValueLabel.frame = frame;
    
    sliderValueLabel.backgroundColor = [UIColor greenColor];
    sliderValueLabel.textAlignment = UITextAlignmentCenter;
    sliderValueLabel.text = @"0";
    //加入到view中
    [self.view addSubview:sliderValueLabel];
    
    //slider,通过sliderValueLabel的相对位置定义frame
    frame.origin.x = CGRectGetMaxX(frame)+10;
    frame.origin.y = CGRectGetMinY(frame);
    frame.size.width = 200;
    frame.size.height = 40;
    slider = [[UISlider alloc]initWithFrame:frame];
    slider.minimumValue = 0;//最小值
    slider.maximumValue = 25;//最大值
    slider.value = 0;//执行初始值
    //设置响应事件(此操作同:使用xib中时将事件与操作IBAction进行关联)
    [slider addTarget:self //事件委托对象
            action:@selector(sliderValueChanged) //处理事件的方法
            forControlEvents:UIControlEventValueChanged//具体事件
     ];
    //加入到view中
    [self.view addSubview:slider];
    
    //X label
    frame.origin.x = 0;
    frame.origin.y = CGRectGetMaxY(sliderValueLabel.frame)+10;
    frame.size.width = self.view.frame.size.width;
    frame.size.height = self.view.frame.size.height-frame.origin.y;
    xLabel = [[UILabel alloc]initWithFrame:frame];
    
    xLabel.backgroundColor = [UIColor yellowColor];
    xLabel.textAlignment = UITextAlignmentCenter;
    xLabel.text = @"X";
    initialFontSize = xLabel.font.pointSize;
    //NSLog(@"initialFontSize=%.2f",initialFontSize);
    //加入到View中
    [self.view addSubview:xLabel];
}

//slider值改变时进行处理
-(void)sliderValueChanged{
    //NSLog(@"sliderValueChanged");
    //更新sliderValueLabel的值
    sliderValueLabel.text = [[NSString alloc]initWithFormat:@"%.0f",slider.value];
    
    //缩放xLabel的内容
    CGFloat newFontSize = initialFontSize*(slider.value+1);
    //NSLog(@"newFontSize=%.2f",newFontSize);
    xLabel.font = [xLabel.font fontWithSize:newFontSize];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    slider = nil;
    sliderValueLabel = nil;
    xLabel = nil;
    // Release any retained subviews of the main view.
}

-(void)dealloc{
    [super dealloc];
    [sliderValueLabel release];
    [slider release];
    [xLabel release];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

@end





5、编译、运行,效果如下
[img]



[/img]





6、总结:xib构建UI方式与写代码方式比较?

1)通过上面代码的编写,仅仅构建一个slider和两个label就很麻烦,不断的修改frame值、调试,才能达到想要的UI效果;并且要alloc很多对象,要控制好内存,防止泄露。可想而知,如果要通过写代码构建一个复杂的UI界面,一定是件很“痛苦”的事儿 。

2)写代码方式也有其优点,比如代码条理比较清晰,出现bug容易定位;用xib的话,构建UI界面比较方便、容易,直接拖动或输入坐标值即可,但是如果控件或事件较多时,N多的连接显得比较乱,而且出现问题不容易查找,尤其连线之后如果再更改IBOulet或IBAction的名称等,更容易出现莫名奇妙的错误。

3)个人感觉,简单的界面尽量用写代码方式,如果界面比较复杂且涉及的事件不太多的话可以用xib实现。见仁见智啦!





  • 大小: 168 KB
  • 大小: 73.3 KB
  • 大小: 84.5 KB
分享到:
评论

相关推荐

    iPhone开发【五】常用控件之Slider(不使用xib构建UI)

    本篇我们将深入探讨如何在不使用XIB(Interface Builder)的情况下,纯代码方式构建一个Slider,并了解其工作原理和常见用法。 首先,Slider的基本结构包括两个部分:一个轨道和一个拇指(thumb)。用户可以通过...

    jssor.slider-21.1.6.mini.js

    jssor.slider-21.1.6.mini.js

    Slider.js一款图片播放控件

    Slider.js 是一款强大的开源图片播放控件,专为网页设计者和开发者打造,用于实现高质量的图片展示和交互功能。这款控件具有丰富的特性,包括图片备注和切换效果,能够帮助用户在网页上构建出引人入胜的视觉体验。 ...

    ComponentArt控件最新版ComponentArt.Web.UI.AJAX[2009.1.2002]_source_code

    总的来说,ComponentArt.Web.UI.AJAX 控件库是Web开发中不可或缺的工具,尤其对于那些希望构建高性能、高交互性Web应用的开发者来说,它是提升开发效率和产品质量的重要资源。源代码的提供意味着开发者可以深入理解...

    ASP.NET AJAX控件之Slider.rar

    本压缩包"ASP.NET AJAX控件之Slider.rar"显然是关于ASP.NET AJAX中的一种控件——Slider的详细资源。 Slider控件是ASP.NET AJAX工具包中的一个常见组件,它允许用户通过滑动条来选择一个数值或区间。这个控件在多种...

    jquery-ui.min.js+CSS

    《jQuery UI:构建高效交互的前端利器》 在Web开发领域,jQuery库以其简洁的语法和强大的功能,已经成为JavaScript开发者的首选工具。而jQuery UI则是jQuery的扩展库,它为开发者提供了丰富的用户界面组件和交互...

    MFC滑块slider控件使用

    本文将深入探讨MFC中的滑块(Slider)控件的使用,以及如何在MFC界面中实现跳转和线程的运用。 首先,让我们关注“MFC界面跳转”。在MFC应用程序中,界面跳转通常涉及到对话框(Dialog)之间的切换或导航。这可以...

    【JavaScript源代码】可拖拽组件slider.js使用方法详解.docx

    【JavaScript源代码】可拖拽组件slider.js使用方法详解 在本文中,我们将深入探讨一个基于mirthil.js、JavaScript和SCSS编写的可拖动滑块组件的实现。这个组件适用于那些在项目中需要自定义滑块,而又无法使用UI...

    jQuery.UI.1.7.jQuery用户界面库

    《jQuery.UI.1.7:全面解析jQuery用户界面库》 jQuery UI是基于JavaScript库jQuery的一个强大且功能丰富的用户界面组件集合,它为开发者提供了构建交互式网站的强大工具。jQuery UI 1.7版本是这一系列组件的重要...

    Slider 有刻度jquery UI

    要添加刻度标记,可以使用`create`事件和`ui.slider`的`marks`属性。例如: ```javascript $( "#slider" ).on( "slidecreate", function( event, ui ) { var values = [0, 5, 10, 15, 20, ... , 100]; for (var i...

    jquery-ui插件

    接下来,可以通过调用`.ui()`方法来激活UI组件,如创建一个日期选择器: ```javascript $(function() { $("#datepicker").datepicker(); }); ``` ### 3. 自定义jQuery UI jQuery UI允许通过主题 roller 工具...

    jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css

    **jQuery UI** 是一个强大的JavaScript库,用于构建用户界面,它基于流行的jQuery库。这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定...

    slider-revolution-v6.2.23_WordPress_slider_wApuu.com_

    WordPress是一个流行的开源内容管理系统(CMS),用于构建各种类型的网站。Slider Revolution插件使WordPress用户能够轻松创建高质量的滑动图像、视频和其他多媒体内容,以增强网站的视觉吸引力和用户体验。 **标签...

    jquery ui .zip 官网资源

    例如,`themes/base/jquery.ui.all.css`包含基础主题的所有样式,而`themes/base/jquery.ui.core.css`则包含了jQuery UI的基础样式。开发者可以根据需要选择或自定义主题,以改变组件的视觉效果。 2. **JavaScript...

    jquery插件jquery-ui-1.8.18.custom.min.js及css文件

    总的来说,`jquery-ui-1.8.18.custom.min.js` 和相关的CSS文件是构建交互式、用户友好的Web应用的重要工具。它们提供了一套完整的框架,帮助开发者快速实现复杂的功能,同时保持界面的美观和一致性。在实际项目中,...

    Slider控件的使用的资源

    总之,Slider控件是用户界面中不可或缺的一部分,它提供了一种直观、简洁的方式来调整数值。理解和掌握不同平台上的Slider控件用法,能帮助开发者创建更加友好、高效的用户交互体验。在实际项目中,可以根据需求灵活...

    jquery-ui-1.10.0.custom.zip

    在 `jquery-ui-1.10.0.custom.zip` 文件中,包含了经过自定义配置后的 jQuery UI 库,这使得开发者可以轻松地裁剪掉不必要或者未使用的功能,减小文件大小,提高网页性能。 三、主要组件介绍 1. **Dialog(对话框...

    ComponentArt.Web.UI.AJAX.2009.2.1509 Source (2009年8月24日版本)

    ComponentArt.Web.UI.AJAX是一款2009年发布的.NET控件库,它提供了丰富的AJAX(Asynchronous JavaScript and XML)功能,用于构建高性能、交互性强的ASP.NET Web应用程序。这个源代码版本是2009年8月24日的更新,...

    ASP.NET AJAX控件之Slider

    ASP.NET AJAX控件库是微软提供的一个强大的工具集,它扩展了ASP.NET的功能,使得开发者能够在不刷新整个页面的情况下更新部分网页内容,从而提供更流畅、更具交互性的用户体验。在这个特殊的教程中,我们关注的是ASP...

    jquery.royalslider.js触屏手机响应式焦点图片轮播

    "jQuery Royalslider.js" 是一款强大的JavaScript库,专为创建高质量、触屏友好的响应式焦点图片轮播而设计。这款组件能够无缝适应各种屏幕尺寸,为用户提供流畅、互动的浏览体验,尤其适用于移动设备。 **jQuery ...

Global site tag (gtag.js) - Google Analytics