182在屏幕中实现网格化视图效果

实现同样效果，更简单的方式如之前写的这篇随笔：使用 UICollectionView 实现网格化视图效果

效果如下：

iPhone 5s

iPhone 6

iPhone 6 Plus

ViewController.h

1 #import <UIKit/UIKit.h>
2 #import "KMGridViewDelegate.h"
3 #import "KMGridView.h"
4
5 @interface ViewController : UIViewController<KMGridViewDelegate>
6 @property (strong, nonatomic) KMGridView *gridView;
7
8 @end

ViewController.m

 1 #import "ViewController.h"
 2
 3 @interface ViewController ()
 4 - (void)layoutUI;
 5 @end
 6
 7 @implementation ViewController
 8 #define kNumberOfCells 25
 9 #define kNumberOfColumns 3
10 #define kWidthOfImage 80.0
11 #define kHeightOfImage 80.0
12 #define kWidthOfDesc 80.0
13 #define kHeightOfDesc 30.0
14 #define kPaddingOfScreen 20.0
15
16 - (void)viewDidLoad {
17     [super viewDidLoad];
18
19     [self layoutUI];
20 }
21
22 - (void)didReceiveMemoryWarning {
23     [super didReceiveMemoryWarning];
24     // Dispose of any resources that can be recreated.
25 }
26
27 - (void)layoutUI {
28     self.view.backgroundColor = [UIColor whiteColor];
29     self.navigationItem.title = @"在屏幕中实现网格化视图效果";
30
31     _gridView = [[KMGridView alloc] initWithFrame:CGRectMake(kPaddingOfScreen, kPaddingOfScreen, self.view.frame.size.width, self.view.frame.size.height)];
32     _gridView.gridViewDelegate = self;
33     [self.view addSubview:_gridView];
34 }
35
36 #pragma mark - KMGridViewDelegate
37 - (CGFloat)gridView:(KMGridView *)gridView widthForColumnAt:(NSUInteger)columnIndex {
38     return kWidthOfImage;
39 }
40
41 - (CGFloat)gridView:(KMGridView *)gridView heightForRowAt:(NSUInteger)rowIndex {
42     return kHeightOfImage + kHeightOfDesc;
43 }
44
45 - (CGFloat)gridView:(KMGridView *)gridView widthOfSpaceForRowAt:(NSUInteger)rowIndex {
46     CGFloat widthOfAllSpace = (self.view.frame.size.width - kPaddingOfScreen * 2) - kNumberOfColumns * kWidthOfImage;
47     return widthOfAllSpace / (kNumberOfColumns -1);
48 }
49
50 - (NSUInteger)numberOfCellsOfGridView:(KMGridView *)gridView {
51     return kNumberOfCells;
52 }
53
54 - (NSUInteger)numberOfColumnsOfGridView:(KMGridView *)gridView {
55     return kNumberOfColumns;
56 }
57
58 - (KMGridViewCell *)gridView:(KMGridView *)gridView cellForRowAt:(NSUInteger)rowIndex andColumnIndexAt:(NSUInteger)columnIndex {
59     KMGridViewCell *cell = [gridView dequeueReusableCell];
60     if (!cell) {
61         cell = [[KMGridViewCell alloc] initWithSizeOfImage:CGSizeMake(kWidthOfImage, kHeightOfImage)
62                                             withSizeOfDesc:CGSizeMake(kWidthOfDesc, kHeightOfDesc)
63                                               withRowIndex:rowIndex
64                                            withColumnIndex:columnIndex];
65     }
66
67     cell.imgVCustom.image = [UIImage imageNamed:[NSString stringWithFormat:@"Image%luForGridView", (columnIndex + 1)]];
68     cell.lblDesc.text = [NSString stringWithFormat:@"位置：(%lu, %lu)", (unsigned long)rowIndex, (unsigned long)columnIndex];
69     return cell;
70 }
71
72 - (void)gridView:(KMGridView *)gridView didSelectRowAt:(NSUInteger)rowIndex andColumnIndexAt:(NSUInteger)columnIndex {
73     NSString *strMsg = [NSString stringWithFormat:@"选中的内容位置：(%lu, %lu)", (unsigned long)rowIndex, (unsigned long)columnIndex];
74     UIAlertView *alertV = [[UIAlertView alloc] initWithTitle:@"提示信息"
75                                                      message:strMsg
76                                                     delegate:nil
77                                            cancelButtonTitle:nil
78                                            otherButtonTitles:@"确定", nil];
79     [alertV show];
80 }
81
82 @end

KMGridView.h

 1 #import <UIKit/UIKit.h>
 2 #import "KMGridViewDelegate.h"
 3 #import "KMGridViewCell.h"
 4
 5 @interface KMGridView : UITableView<UITableViewDataSource, UITableViewDelegate> {
 6     KMGridViewCell *tempCell;
 7 }
 8 @property (weak, nonatomic) id<KMGridViewDelegate> gridViewDelegate;
 9
10 - (KMGridViewCell *)dequeueReusableCell;
11
12 @end

KMGridView.m

  1 #import "KMGridView.h"
  2 #import "KMGridViewRow.h"
  3
  4 @implementation KMGridView
  5 #define kNumberOfCells [_gridViewDelegate numberOfCellsOfGridView:self]
  6 #define kNumberOfColumns [_gridViewDelegate numberOfColumnsOfGridView:self]
  7 #define kHeightOfRow [_gridViewDelegate gridView:self heightForRowAt:indexPath.row]+20.0
  8
  9 - (id)initWithFrame:(CGRect)frame {
 10     if (self = [super initWithFrame:frame]) {
 11         self.dataSource = self;
 12         self.delegate = self;
 13
 14         self.separatorStyle = UITableViewCellSeparatorStyleNone;
 15     }
 16     return self;
 17 }
 18
 19 - (KMGridViewCell *)dequeueReusableCell {
 20     KMGridViewCell *cell = tempCell;
 21     tempCell = nil;
 22     return cell;
 23 }
 24
 25 - (void)cellPressed:(KMGridViewCell *)sender {
 26     [_gridViewDelegate gridView:self
 27                  didSelectRowAt:sender.rowIndex
 28                andColumnIndexAt:sender.columnIndex];
 29 }
 30
 31 #pragma mark - TableView
 32 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
 33     return 0;
 34 }
 35
 36 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
 37     return kHeightOfRow;
 38 }
 39
 40 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
 41     return 1;
 42 }
 43
 44 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
 45     NSUInteger residueRow = kNumberOfCells % kNumberOfColumns > 0 ? 1 : 0;
 46     return kNumberOfCells / kNumberOfColumns + residueRow;
 47 }
 48
 49 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 50     static NSString *rowIdentifier = @"rowIdentifier";
 51     KMGridViewRow *row = [tableView dequeueReusableCellWithIdentifier:rowIdentifier];
 52     if (!row) {
 53         row = [[KMGridViewRow alloc] initWithStyle:UITableViewCellStyleDefault
 54                                    reuseIdentifier:rowIdentifier];
 55     }
 56
 57     CGFloat x = 0;
 58     for (NSUInteger i=0; i<kNumberOfColumns; i++) {
 59         if ((indexPath.row * kNumberOfColumns + i) >= kNumberOfCells) { //判断是否是最后一行里多余的列；是的话就隐藏，不再进行下面语句的操作
 60             if (row.contentView.subviews.count > i) {
 61                 ((KMGridViewCell *)row.contentView.subviews[i]).hidden = YES;
 62             }
 63             continue;
 64         }
 65
 66         tempCell = row.contentView.subviews.count > i ? row.contentView.subviews[i] : nil; //判断当前行的内容视图包含的子视图个数是否大于当前列索引下标
 67         KMGridViewCell *cell = [_gridViewDelegate gridView:self
 68                                               cellForRowAt:indexPath.row
 69                                           andColumnIndexAt:i]; //这里实际会跟上面一句关联，获取到的是tempCell对象示例
 70         if (cell.superview != row.contentView) { //避免重复添加
 71             [cell removeFromSuperview];
 72             [row.contentView addSubview:cell];
 73
 74             [cell addTarget:self
 75                      action:@selector(cellPressed:)
 76            forControlEvents:UIControlEventTouchUpInside];
 77         }
 78
 79         cell.hidden = NO;
 80         cell.rowIndex = indexPath.row;
 81         cell.columnIndex = i;
 82
 83         CGFloat widthOfColumn = [_gridViewDelegate gridView:self widthForColumnAt:i];
 84         CGFloat widthOfSpace = [_gridViewDelegate gridView:self widthOfSpaceForRowAt:indexPath.row];
 85         cell.frame = CGRectMake(x, 0, widthOfColumn, kHeightOfRow);
 86         x += (widthOfColumn + widthOfSpace);
 87     }
 88
 89     row.frame = CGRectMake(row.frame.origin.x,
 90                            row.frame.origin.y,
 91                            x,
 92                            kHeightOfRow);
 93     return row;
 94 }
 95
 96 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 97
 98 }
 99
100 @end

KMGridViewDelegate.h

 1 #import <Foundation/Foundation.h>
 2 @class KMGridView;
 3 @class KMGridViewCell;
 4
 5 @protocol KMGridViewDelegate
 6 @optional
 7 - (void)gridView:(KMGridView *)gridView didSelectRowAt:(NSUInteger)rowIndex andColumnIndexAt:(NSUInteger)columnIndex;
 8
 9 @required
10 - (CGFloat)gridView:(KMGridView *)gridView widthForColumnAt:(NSUInteger)columnIndex;
11 - (CGFloat)gridView:(KMGridView *)gridView heightForRowAt:(NSUInteger)rowIndex;
12 - (CGFloat)gridView:(KMGridView *)gridView widthOfSpaceForRowAt:(NSUInteger)rowIndex;
13 - (NSUInteger)numberOfCellsOfGridView:(KMGridView *)gridView;
14 - (NSUInteger)numberOfColumnsOfGridView:(KMGridView *)gridView;
15 - (KMGridViewCell *)gridView:(KMGridView *)gridView cellForRowAt:(NSUInteger)rowIndex andColumnIndexAt:(NSUInteger)columnIndex;
16
17 @end

KMGridViewRow.h

1 #import <UIKit/UIKit.h>
2 @interface KMGridViewRow : UITableViewCell
3 @end

KMGridViewRow.m

 1 #import "KMGridViewRow.h"
 2
 3 @implementation KMGridViewRow
 4
 5 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
 6     if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
 7         self.selectionStyle = UITableViewCellSelectionStyleNone;
 8         self.userInteractionEnabled = YES;
 9     }
10     return self;
11 }
12
13 @end

KMGridViewCell.h

 1 #import <UIKit/UIKit.h>
 2
 3 @interface KMGridViewCell : UIButton
 4 @property (strong, nonatomic) UIImageView *imgVCustom;
 5 @property (strong, nonatomic) UILabel *lblDesc;
 6 @property (assign, nonatomic) NSUInteger rowIndex;
 7 @property (assign, nonatomic) NSUInteger columnIndex;
 8
 9 - (id)initWithSizeOfImage:(CGSize)sizeOfImage withSizeOfDesc:(CGSize)sizeOfDesc withRowIndex:(NSUInteger)rowIndex withColumnIndex:(NSUInteger)columnIndex;
10
11 @end

KMGridViewCell.m

 1 #import "KMGridViewCell.h"
 2
 3 @implementation KMGridViewCell
 4
 5 - (id)initWithSizeOfImage:(CGSize)sizeOfImage withSizeOfDesc:(CGSize)sizeOfDesc withRowIndex:(NSUInteger)rowIndex withColumnIndex:(NSUInteger)columnIndex; {
 6     if (self = [super init]) {
 7         self.backgroundColor = [UIColor whiteColor];
 8
 9         _imgVCustom = [[UIImageView alloc] init];
10         _imgVCustom.frame = CGRectMake(0, 0, sizeOfImage.width, sizeOfImage.height);
11         _imgVCustom.layer.masksToBounds = YES;
12         _imgVCustom.layer.cornerRadius = 10.0;
13         [self addSubview:_imgVCustom];
14
15         _lblDesc = [[UILabel alloc] initWithFrame:CGRectMake(0, sizeOfImage.height, sizeOfDesc.width, sizeOfDesc.height)];
16         _lblDesc.textColor = [UIColor brownColor];
17         _lblDesc.textAlignment = NSTextAlignmentCenter;
18         _lblDesc.adjustsFontSizeToFitWidth = YES;
19         [self addSubview:_lblDesc];
20
21         _rowIndex = rowIndex;
22         _columnIndex = columnIndex;
23     }
24     return self;
25 }
26
27 @end

AppDelegate.h

1 #import <UIKit/UIKit.h>
2
3 @interface AppDelegate : UIResponder <UIApplicationDelegate>
4 @property (strong, nonatomic) UIWindow *window;
5 @property (strong, nonatomic) UINavigationController *navigationController;
6
7 @end

AppDelegate.m

 1 #import "AppDelegate.h"
 2 #import "ViewController.h"
 3
 4 @interface AppDelegate ()
 5 @end
 6
 7 @implementation AppDelegate
 8
 9 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
10     _window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
11     ViewController *viewController = [[ViewController alloc] init];
12     _navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
13     _window.rootViewController = _navigationController;
14     //[_window addSubview:_navigationController.view]; //当_window.rootViewController关联时，这一句可有可无
15     [_window makeKeyAndVisible];
16     return YES;
17 }
18
19 - (void)applicationWillResignActive:(UIApplication *)application {
20 }
21
22 - (void)applicationDidEnterBackground:(UIApplication *)application {
23 }
24
25 - (void)applicationWillEnterForeground:(UIApplication *)application {
26 }
27
28 - (void)applicationDidBecomeActive:(UIApplication *)application {
29 }
30
31 - (void)applicationWillTerminate:(UIApplication *)application {
32 }
33
34 @end
时间： 2024-12-17 19:10:48

182在屏幕中实现网格化视图效果的相关文章

使用 UICollectionView 实现网格化视图效果

讲解 UICollectionView 的相关链接:http://blog.csdn.net/eqera/article/details/8134986 为了实现不同尺寸屏幕的大小自适应,细节处理: (1)在 Main.storyboard 中,去掉勾选「Use Size Classes」 (2)删除 LaunchScreen.xib 关键操作: 效果如下: KMCollectionViewCell.h 1 #import <UIKit/UIKit.h> 2 3 @interface KMCo

165在屏幕中实现过渡动画效果

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewController () 4 - (void)layoutUI; 5 - (UIImageView *)nextView; 6 - (v

154在屏幕中绘图时设置透明度（扩展知识：为图片视图添加点击手势识别器，来实现点击事件操作）

一张图片,通过混合模式绘制后,能得到不同效果的图片. 这里的示例仅是测试效果:实际上可以通过不同程度的混合模式绘制,来得到符合需求的效果. 效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UIImageView *imgVBlend; 5 @property (strong, nona

098在屏幕中实现一个检索框效果

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UITableViewController<UISearchBarDelegate> 4 @property (strong, nonatomic) UISearchBar *searchBar; 5 @property (strong, nonatomic) NSMutableArray *mArrDataSourceO

【GISER&amp;&amp;Painter】Chapter02：WebGL中的模型视图变换

上一节我们提到了如何在一张画布上画一个简单几何图形,通过创建画布,获取WebGLRendering上下文,创建一个简单的着色器,然后将一些顶点数据绑定到gl的Buffer中,最后通过绑定buffer数据,提供buffer中顶点数据的情况,执行渲染绘制方法,将数据结果从buffer中刷新到帧缓存中.整个流程十分清晰明了,可是通过对比原来OpenGL中的整个流程,我们会发现其中还缺少了一些很重要的处理步骤,虽然我们创建了属于自己的着色器,可并没有对顶点数据进行类似于顶点处理管线中的模型视图变换.透视

MFC中的一些视图

本章主要介绍MFC中主要的视图类,这些继承自Cview类. 继承关系如上图所示. 滚动视图 CscrollView给Cview添加了基本的滚动功能,它包含WM_VSCROLL和WM_HSCROLL消息的处理程序,将设计滚动窗口的工作交由MFC来完成. 首先介绍一下基本概念,物理视图,指得是占据屏幕的视图窗口和空间:逻辑视图指的是可以使用滚动条看到的整个虚拟空间. 成员函数SetScrollSize接受4个参数,其中2个可选. void SetScrollSizes( int nMapMode, 

复制/剪切/粘贴屏幕中的图片

使用touchesEnded:withEvent:自定义复制粘贴菜单,copy:复制屏幕中的图片,cut:剪切屏幕中的图片,paste:粘贴屏幕中的图片. 1 @implementation prjCopyAndPaste 2 3 -(void)viewDidLoad 4 { 5 [super viewDidLoad]; 6 } 7 8 -(void)viewWillAppear:(BOOL)animated 9 { 10 [super viewWillAppear:animated]; 11

为何不能在viewDidLoad方法中显示其他视图

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 你可以使得当视图控制器(view controller)显示自身的时候显示分享选项控制器.你视图控制器的viewDidAppear方法将在它显示在屏幕上的时候被调用,并且在你App中的所有继承体系中的视图都是如此.这意味着你可以用这个机会在你的视图控制器视图上面显示其他视图. 不要试图在你的视图控制器的viewDidLoad方法中显示活动视图控制器(activ

如何应用ASP.NET MVC中的分部视图

概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创建分部视图: 在解决方案管理器中,找到Views文件夹下的Shared文件夹,右键添加视图,选择创建为分部视图,如图: 2.修改分部视图: 1 <p>分部视图中的p元素</p> 3,在其他视图中引用分布视图: 1 @Html.Partial("~/Views/Shared/I