ios实战开发之UISegmentedControl

Sian

1、效果演示：



2、需求分析：

1、创建一个Segmented control，并设置4列，创建若干个表情到view；
2、点击segment上的按钮，对表情进行调整成不同的列展示；
3、功能简单

3、设计过程：

首先利用storyboard添加一个Segmented Control



关键代码：
SAViewController.h

1. //
2. //  SAViewController.h
3. //  Segment
4. //
5. //  Created by yusian on 14-3-27.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SAViewController : UIViewController
13. - (IBAction)segmentControl:(UISegmentedControl *)sender;
15. @end

复制代码

SAViewController.m

1. //
2. //  SAViewController.m
3. //  Segment
4. //
5. //  Created by yusian on 14-3-27.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
8. #import "SAViewController.h"
10. // 宏定义，尽量避免直接将数字写在代码中
11. #define kImageCount 20
12. #define kDefaultSize 75
13. #define kImageTypes 3
15. @interface SAViewController ()
17. @end
19. @implementation SAViewController
21. // 系统界面加载完之后调用的函数
22. - (void)viewDidLoad
23. {
24.     [super viewDidLoad];
25.    
26.     // 调用adjustImageWithColumns:(int)columns函数初始列数为3列
27.     [self adjustImageWithColumns:3];
28.    
29. }
31. // 该函数主要功能为在界面上生成/自动排列UIImageView表情元素 (重构优化过后的代码)
32. - (void)adjustImageWithColumns:(int)columns
33. {
34.     // 获得UIView上subview的个数，后面需要用到
35.     int count = self.view.subviews.count;
36.    
37.     // 定义png图标大小，为实现3列、5列、7列、9列时图片大小分别不一样加个算法，列数越少图标越大
38.     CGFloat imgWidth =  kDefaultSize - (columns * 5);
39.    
40.     // 将高度和宽度设置与一样大小，表情会有小小的拉伸
41.     CGFloat imgHeight = imgWidth;
42.    
43.     // 定义一个变量用来存储表情之间间隔值大小
44.     CGFloat imgSpacing = (self.view.frame.size.width - imgWidth * columns) / (columns + 1);
45.    
46.     // 一切准备就绪可以开始for循环了，循环次数为创建表情的个数，也为排列表情的个数，将这个值定义为宏，方便全局统一与修改
47.     for (int i = 0; i < kImageCount; i++) {
48.         
49.         // 定义表情坐标位置，这是这个项目的核心点，当前循环次数、当前表情x值、当前表情y值，最关键的是当前表情在当前行的序号正好为(i % columns)、而当前行数正好为(i / columns);
50.         
51.         // 同一排两个表情x值相差(表情宽度 + 表情间隔)，第一表情的x值也应该等于两表情的间隔宽度
52.         CGFloat imgX = imgSpacing + (i % columns) * (imgWidth + imgSpacing);
53.         
54.         // y值也一样，不同的是y值的基准从70开始，70=segment的y值加segment的高度再加20做为间隔
55.         CGFloat imgY = 70 + (i / columns) * (imgHeight + imgSpacing);
56.         
57.         // 无论是创建表情还是表情重新排列，算法基本一致，第一次加载界面调用该函数是为创建表情，后续再调用该函数是为重新排列，所以后续要先进行判断再执行相关代码
58.         
59.         // 函数开始定义了一个count变量，取UIView上subview的个数，如果该值为1则说明面手机面板上只有segment一个subview，如果(count > 1)说明主面板上不止一个subview，说明表情已经创建好了，此时应该只排列，不创建；
60.         if (count > 1) {
61.             
62.             // 调整UIImageView
63.             // 取出subview数组中的值赋值给一个UIView变量
64.             UIView *temp = self.view.subviews[i + 1];
65.             
66.             // 将上述循环计算得到的各个值(主要是x坐标与y坐标)，重新分配给表情(UIImageView.frame)
67.             temp.frame = CGRectMake(imgX, imgY, imgWidth, imgHeight);
68.         
69.         // count = 1则执行以下代码创建表情
70.         } else {
71.             
72.             // 创建UIImageView
73.             // 创建一个UIImageView并初始化
74.             UIImageView *img = [[UIImageView alloc] init];
75.             
76.             // UIImageView上显示的图片利用循环i值，分别从 1.png ~ n.png，当循环次数超过表情个数时，可以通过对表情个数进行取余操作再从1开始
77.             img.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.png", (i % kImageTypes) + 1]];
78.             
79.             // 将上述循环计算得到的各个值(主要是x坐标与y坐标)，赋值给刚刚创建好的UIImageView
80.             img.frame = CGRectMake(imgX, imgY, imgWidth, imgHeight);
81.             
82.             // 将该UIImageView添加到view
83.             [self.view addSubview:img];
84.             
85.         }// END IF
86.         
87.     }// END FOR
88.    
89. }// END FUN
91. // 接收segment按键的事件，
92. - (IBAction)segmentControl:(UISegmentedControl *)sender {
93.    
94.     // 动画效果开始
95.     [UIView beginAnimations:nil context:nil];
96.    
97.     // 动画时长
98.     [UIView setAnimationDuration:1];
99.    
100.     // 将列数与segment传进来的值对应起来，segment上面的按键传进来的值分别为0、1、2、3、4...
101.     int columns = (sender.selectedSegmentIndex * 2) + 3;
102.    
103.     // 调用上面函数并将这个columns值传进去
104.     [self adjustImageWithColumns:columns];
105.    
106.     // 动画提交
107.     [UIView commitAnimations];
108. }
109. @end

复制代码

源代码下载：

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

参考链接：ios实战开发之图片展示