iOS UI组件汇总

UIButton

这儿有一篇教程,挺全的,可以参考下:http://www.cnblogs.com/chen1987lei/archive/2011/09/09/2172757.html

这个就不多说了,对照官方的文档也可以更多的去学习。插一句题外话,在学这些组件的时候,最令人头疼的不是你搞不定一个组件的某个属性或者方法,而是你压根儿不知道有这个东西。所以在学习这些组件的时候最好的方式还是通过官方文档,虽然已开始可能有些困难,但是硬着头皮去啃,就一定会有悟道的那一天。建议有问题先去看文档,如果实在不行再去Google啊,Stack Overflow啊神马的。

UIAlertController

弹出式的提示框。现在市面上的书籍包括网上的一些资料都还停留在iOS8之前的时代,那个时候的弹出框是一个叫做UIAlertView的东西,但是现在,在XCode7和iOS9的时代,你会发现这个东西被弃用了。苹果自iOS8开始,废除了UIAlertView而改用UIAlertController来控制提示框。

来看看UIAlertController的实现吧,下面这个程序是我在练习UITableView时的代码,实现了一个类似与通讯录的东西,我们抓住主要矛盾,来看点击某一行cell后,弹出的消息提示框是怎么实现的。以下代码在ViewController.m中实现。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

//创建提示框窗口

UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"System Info" message:[contact getName] preferredStyle:UIAlertControllerStyleAlert];

//实例化取消按钮  

UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {

    //点击取消按钮后控制台打印语句。

    NSLog(@"The \"Okay/Cancel\" alert‘s cancel action occured.");

}];

//实例化确定按钮    

UIAlertAction *otherAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {

    NSLog(@"The \"Okay/Cancel\" alert‘s other action occured.");

    //下面这段代码不用管它,简单点讲就是获取当前行的一个字符串。

    UITextField *textfield = alertController.textFields[0];

    KCContactGroup *group = _contacts[_selectedIndexPath.section];

    KCContact *contact = group.contacts[_selectedIndexPath.row];

    contact.phoneNumber = textfield.text;

    NSArray *indexPaths = @[_selectedIndexPath];

    [_tableview reloadRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationLeft];

}];

//向弹出框中添加按钮和文本框

[alertController addAction:cancelAction];

[alertController addAction:otherAction];

[alertController addTextFieldWithConfigurationHandler:^(UITextField *textField) {

    // 可以在这里对textfield进行定制,例如改变背景色等

    textField.text = contact.phoneNumber;

}];

//将提示框弹出

[self presentViewController:alertController animated:YES completion:nil];

实现了大概就是这个样子,文本框里的东西是从cell里面提取的。

这里还有一句题外话要讲。网上是没有任何关于最新的UIAlertController的使用教程的,我自己用了整整一个下午看官方文档一步一步调试才实现了这个恼人的提示框。官方的文档真的是个好东西,越用越强大!!

UISegmentedControl

分段控件,就是一栏按钮集成在一排里。很简单,就像Button一样。这个样子的:

UISwtich

按钮控件,手机里开飞行模式的那个东西。通过Storyboard可以很快很方便的建立,不要忘了关联起来就好。

这里简单讲一下它的纯代码实现,其实包括上面的UISegmentedControl,还有下面的一些简单控件它们手写实现的方法都是一样的。截张图给大家说明一下就好了,都是一样的,后面的类似的控件也不多啰嗦了。

UISlider

进度条型的选择控件,对应数值,可以进行设置音量等操作,根据官方文档可以看到很多关于它的设置,基本实现同上。

UIPageControl

这是个好东西。

这是个好东西。

这是个好东西。

重要的事情说三遍。个人认为,它虽然很小,但绝对逼格够高,搭配UIScrollView,绝对让你的界面高端起来。

关于这个的代码不小心被我删掉了,没法给大家展示,不过过几天我会用这个做一个APP的欢迎界面,到时候再展示咯。

UITextField

简单控件,可以参考先前的传值操作(传送门:iOS开发——从一道题看Delegate),基本上把这个的用法实现的差不多了,要想更多地设置它————官方文档见。

UIDatePicker

顾名思义,日期选择控件。实现同上。

UIScrollView

有的时候呢,我们的照片,或者图片会很大,而允许我们输出的窗口却不够大,那么我们就需要这个家伙来帮忙了,它可以让一张图片在一个视图里滚动展示,效果类似于。。。做B超?(天,怎么会有这种脑洞大开的比喻)

大概就是这样整的:

UITextView

还是一个可编辑文本框,与先前的UITextField不同的是,这个可以显示更多行的内容,还可以对他进行编辑的监控,通过代理方法,我们可以获取该文本框中的内容,在实际的应用中,发布什么长微博啊,文本啊,都能用到它。

这里实现没什么好说的,主要来看看它的几个代理方法:

UIToolbar

开发中经常会用到的控件之一,实现起来也很简单,与此同时我们还要知道 UIBarButtonItem 和 Fixed Space Bar Button Item,这两个小东西是在Bar上的按钮和间距,都被对象化了。

来看代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

#import "ViewController.h"

@interface ViewController ()

//声明

@property (nonatomic, strong) UIToolbar *mytoolbar;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    //实例化

    self.mytoolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 30)];

    //添加到视图

    [self.view addSubview:self.mytoolbar];

    //选择风格,这里我们选择黑色风格

    self.mytoolbar.barStyle = UIBarStyleBlack;

    //添加按钮和按钮之间的间距,这些都被对象化了,按钮是可以实现方法的

    UIBarButtonItem *item1 = [[UIBarButtonItem alloc]initWithTitle:@"hello" style:UIBarButtonItemStylePlain target:self action:@selector(sayhello)];

    UIBarButtonItem *fixed = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];

    UIBarButtonItem *item2 = [[UIBarButtonItem alloc]initWithTitle:@"bye" style:UIBarButtonItemStylePlain target:self action:@selector(saybye)];

    //实例化的UIToolbar里面有items属性,是一个数组,用来存放我们要加上去的按钮

    self.mytoolbar.items = @[item1, fixed, item2];

}

//点击item要实现的方法,输出hello或者bye

- (IBAction)sayhello{

    NSLog(@"hello");

}

- (IBAction)saybye{

    NSLog(@"bye");

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

UIPickerView

与前面的时间选择类似,只不过这个你可以自己设置内容。

UITableView

BOOM!

强大,异常强大。不多说,我推荐看iOS开发系列--UITableView全面解析这篇文章,写得很棒。

我自己也把大部分的学习时间用在了它的学习上,至今为止我觉得我还没能真正做到熟练地使用它,等以后成熟了,再写吧。

UICollectionView

又是一个庞大的家伙,在很多壁纸类APP中我们可以看到它的影子。

关于它的实现,我总结为以下几步:

  • .h文件声明代理和数据源
  • .m文件具体实现
    • 声明UICollectionView
    • 实例化,包括设置大小,位置,颜色等等
    • 加载代理和数据源到实例化的view
    • 注册cell(这里需要)
    • 将实例化的UICollectionView加入到View中
    • 实现数据源方法(包括必须实现的和选择实现的)
    • 实现代理方法(包括必须实现的和选择实现的)

关于数据源方法和代理方法,在这里需要特别说明一下,我们还是会出现不知道这个数据源或者代理中到底有什么的困惑,我们要command进去这些代理或者数据源去发现和寻找,文档还是我们学习的最终归宿。

按照上面的步骤,实现代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UICollectionView *collectionView;

@end

static NSString *cid = @"cid";

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    UICollectionViewFlowLayout *flowlayout = [[UICollectionViewFlowLayout alloc]init];

    CGRect flame = CGRectMake(20, 40, self.view.frame.size.width-40, self.view.frame.size.height-60);

    self.collectionView = [[UICollectionView alloc]initWithFrame:flame collectionViewLayout:flowlayout];

    self.collectionView.dataSource = self;

    self.collectionView.delegate = self;

    [self.view addSubview:self.collectionView];

    //注册cell

    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cid];

}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 50;

}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cid forIndexPath:indexPath];

    cell.backgroundColor = [UIColor blueColor];

    return cell;

}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    return UIEdgeInsetsMake(10, 10, 10, 10);

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    return CGSizeMake(120, 100);

}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];

    cell.backgroundColor = [UIColor yellowColor];

    NSLog(@"%ld",indexPath.row);

}

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{

    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];

    cell.backgroundColor = [UIColor blueColor];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

UIViewController

接下来我们来聊聊ViewController。视图控制器在我们开发中最重要的 MVC模式 中扮演着重要的角色,作为显示和数据的调度者,它的存在决定了我们的程序到底以怎样的形式呈现在用户面前。

这个最基础的Controller就不多说了,在目前的XCode中,一般来说新建的第一个Single View就是用的这个。

UINavigationController

很重要的一个东西。导航视图控制器。说简单点它就是一个来存放视图的栈,原则上先进后出,一层一层的来管理在它里面的视图。在学习它的过程中还要掌握UINavigationBar、UINavigationitem等控件,还要熟悉几个pop、push方法。

既然是导航视图控制器,导航自然不是导的一个视图,而是管理多个视图,实现的时候有很多需要注意的地方,我们一步一步的来看。

首先新建一个工程,我们要纯手写代码来搞定之。

第一步,建立我们需要管理的多个视图。

“command+N”新建Cocoa Touch Class,命名为myViewController,Subclass of选择为UIViewController,重复四次,我们获得了四个试图控制器,也就是四个视图,接下来我们将用导航视图控制器来管理它们。

第二步,初始界面设置

在这里,我们需要来到AppDelegate.m文件,来配置初始界面,自定义- (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 方法。

代码如下:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Override point for customization after application launch.

    //获取屏幕大小

    UIScreen *screen = [UIScreen mainScreen];

    //初始化窗口

    self.window = [[UIWindow alloc]initWithFrame:screen.bounds];

    //将视图1设置为初始视图

    myViewController1 *vc1 = [[myViewController1 alloc]init];

    //来个背景颜色区分一下

    vc1.view.backgroundColor = [UIColor blueColor];

    //实例化导航视图控制器并添加视图1进来

    UINavigationController *nc = [[UINavigationController alloc]initWithRootViewController:vc1];

    //将导航视图控制器设置为窗口根视图

    self.window.rootViewController = nc;

    //设置窗口可见

    [self.window makeKeyAndVisible];

    return YES;

}

第三步,配置各个视图

我们要在第一个视图中实例化第二个视图,并通过某种方式,使用UINavigationController跳转到第二个视图;在第二个视图中实例化第三个视图,以此类推直到最后一个视图。当然,我们也可以选择直接跳到某个你想要去的视图,比如从第四个视图跳到第一个或者第二个。

我们现在视图一中添加一个按钮,添加一个点击按钮的事件,注意,我们就是通过这个事件方法来实现页面的跳转的,myViewController1.m代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

#import "myViewController1.h"

#import "myViewController2.h"

@interface myViewController1 ()

@end

@implementation myViewController1

- (void)viewDidLoad {

    [super viewDidLoad];

    //设置视图二样式,添加一个按钮,点击触发事件,跳转到下一页面

    UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];

    [btn setTitle:@"GO" forState:UIControlStateNormal];

    btn.frame = CGRectMake(160, 100, 30, 36);

    [btn addTarget:self action:@selector(go:) forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:btn];

    UILabel *lable = [[UILabel alloc]initWithFrame:CGRectMake(160, 160, 100, 36)];

    lable.text = @"第一页";

    [self.view addSubview:lable];

}

//这里才是实现页面跳转的重点!!!!

-(IBAction)go:(id)sender{

    myViewController2 *vc2 = [[myViewController2 alloc]init];

    vc2.view.backgroundColor = [UIColor greenColor];

    //看这里!!!!!push方法将视图一推向视图二

    [self.navigationController pushViewController:vc2 animated:YES];

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

类似的,我们编写myViewController2.m,myViewController3.m,myViewController4.m的代码。我们稍微修改一下myViewController4.m中的go方法,让视图四直接跳到视图二:


1

2

3

4

5

6

7

-(IBAction)go:(id)sender{

    //[self.navigationController popViewControllerAnimated:YES];    pop方法跳回前一视图

    //[self.navigationController popToRootViewControllerAnimated:YES];    popToRoot方法直接跳回第一视图 

    NSArray *controllers = self.navigationController.viewControllers; 

    //popToViewController方法,我们可以选择要跳到的视图

    [self.navigationController popToViewController:[controllers objectAtIndex:1] animated:YES];

}

UITabbarController

区别于UINavigationController的顶部导航,UITabbarController是底部导航,功能上差不多,可以直接切换多个视图,典型的应用非常多,微信,QQ都是,实现起来也是类似于上面的UINavigationController。

可以参考这篇资料:iOS开发UI篇—UITabBarController简单介绍

时间: 2024-11-08 14:30:05

iOS UI组件汇总的相关文章

react native 使用 iOS 原生 UI 组件

目前 react native 的组件还是不多,有些也并不怎么好用,这时候就需要封装原生 UI 组件了 之前写过RN 与 native 的通信 无非就是两种: 1>>>  react native 内部事件需要通知 native 调用 native 的方法(或者传递RN 中的数据到 native),这时候可以用新建一个 manager 之类的文件 RCT_EXPORT_MOUDLE() 暴露 native类  ,RCT_EXPORT_METHOD () 暴露 native 方法给 js

React-Native入门指南(五)——UI组件

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下: 第1篇hello react-native 第2篇认识代码结构 第3篇css和布局 第4篇学会react-native布局 第5篇ui组件 还有几篇需要这这周完成(这块会时刻更新): 第6篇JSX语法 第7

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

React Native常用第三方组件汇总--史上最全 之一

把我认为最好的知识,拿来与他人分享,是这一生快事之一! React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown 倒计时 react-native-device-info 设备信息 react-native-fileupload 文件上传 react-native-icons 图标 react-native-image-picker 图片选择器 reac

【腾讯TMQ】解放程序猿(媛)的双手—iOS UI自动化测试

解放程序猿(媛)的双手-iOS UI自动化测试 前言 随着移动互联网时代的蓬勃发展,移动终端的自动化测试也在业界日益活跃,总体来看在Android平台上的自动化工具和实践比较多,但是说到iOS平台无论从自动化工具的数量还是质量上就陡降了.究其原因,无外乎是iOS系统的封闭性,加上相对Android用户的数量少,导致对这个平台系统的自动化进展缓慢,据笔者了解到的情况,很多iOS平台的测试人员还处于纯手工测试模式,自动化程度和Android平台无法相论,更别提和PC端相比了. 然而越是困难的事,越是

iOS第三方库汇总[转载]

iOS第三方库汇总[转载] 字数2179 阅读334 评论0 喜欢29 简介 此文用于总结,本人使用过或者收藏过的Github第三方类库,以便日后查阅,也便他人借鉴. 资料整理中不定期更新... 开源项目 CodeHub browse and maintain your GitHub repositories on any iOS device! Open-Source iOS Apps 开源iOS apps列表 APP相关 iVersion 提示版本更新 BonMot 字体相关的库,设置字体样

cocos2d-iphone 与 UI组件

http://zhidao.baidu.com/link?url=v9d7y2doWqcPhKz1lz8TkO7ZQfslg-e-55JE0XP9VdKJ0vHobcLPEAXaXjD2lD-TGmgnaRzRc1g38ho-vM5qu_ cocos2d-iphone 与 UI组件 2013-03-07 04:11嚣张→恨天  分类:其他编程语言 | 浏览 145 次  悬赏:15 coco2d如何在场景中 添加 UIsearchbar UItoolbar之类的UI组件 或者 框架自身怎么实现搜

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护