一种响应式网格菜单布局系统,可以调整项目宽度以适应设备旋转。
THGridMenu 是一个构造了每行列数、网格大小、边距和行高的 UIView。您可以调用一个实例方法 createMenuItem
,该方法将在正确的起始位置和宽度返回一个 THGridMenuItem 给下一个视图。THGridMenuItem 是 UIControl 的子类,而 UIControl 自身又是 UIView 的子类,因此您可以在其中放置任何您想放的东西。
注意:目前,THMenuGrid 旨在在一个导航控制器内部。您可能需要修改才能在独立视图或标签控制器中使用。
以下是两个列网格在横屏幕和竖屏幕模式下的基本截图。
将 THGridMenu.h 和 THGridMenuItem.h 导入到您的视图控制器中。
#import THGridMenu.h
#import THGridMenuItem.h
创建一个 THGridMenu 属性
@property (nonatomic, strong) THGridMenu *menuView;
创建一个方法来创建或重新创建您的网格,设置任何您喜欢的设置。
-(void)menuSetOrReset {
_menuView = nil;
_menuView = [[THGridMenu alloc] initWithColumns:2 marginSize:30 gutterSize:30 rowHeight:100];
self.view = _menuView;
//See next step.
[self populateMenu];
}
创建一个方法来填充您的菜单(可能通过迭代数据源)
-(void)populateMenu {
//Refresh data source (in this example, just read from the plist)
NSString *path = [[NSBundle mainBundle] pathForResource:
@"books" ofType:@"plist"];
NSArray *books = [NSArray arrayWithContentsOfFile:path];
//Iterate through the data source
for (NSString *bookTitle in books) {
//Call createMenuItem to return a THGridMenuItem with origins and width preset.
THGridMenuItem *menuItem = [_menuView createMenuItem];
//Do any setup to the item view. Here we call a function defined in a category.
[menuItem addTitle:bookTitle];
//Add the menu item to your grid view
[self.view addSubview:menuItem];
}
}
从 viewWillLoad 调用您的菜单创建方法
-(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self menuSetOrReset];
}
添加以下内容以在设备旋转时重建菜单
-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[_menuView orientationChange];
}
确保您的视图控制器知道它可以旋转
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
THGridMenuItem 只是一个具有已知高度和未知宽度的 UIControl。最佳的自定义方法是创建一个分类。例如,在我们的示例中有一个名为 BookItem 的分类,它添加了一个方法:addTitle
THGridMenuItem+BookItem.h
#import "THGridMenuItem.h"
@interface THGridMenuItem (BookItem)
-(void)addTitle:(NSString *)title;
@end
THGridMenuItem+BookItem.m
-(void)addTitle:(NSString *)title {
self.backgroundColor = [UIColor whiteColor];
CGRect parentFrame = self.frame;
CGFloat margin = 10.0;
CGRect titleFrame = CGRectMake(margin, 0.0, parentFrame.size.width - (margin *2), parentFrame.size.height);
UILabel *titleLabel = [[UILabel alloc] initWithFrame:titleFrame];
titleLabel.text = title;
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:40];
titleLabel.adjustsFontSizeToFitWidth = YES;
titleLabel.contentMode = UIViewContentModeScaleAspectFit;
titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleRightMargin;
[self addSubview:titleLabel];
}
现在,我们不必导入 THGridMenuItem.h,可以直接导入 THGridMenuItem+BookItem.h 并且可以获得对 addTitle
的访问
不过,请注意。宽度将根据旋转而扩展和收缩,所以要注意这一点。高度将始终是您初始化 THMenuGrid 时选择的高度。
我为一个我正在工作的新项目创建了它。不幸的是,我可能没有时间过多地为此工作,除了我对自己的项目的需求外。尽管如此,您可以自由地获取它并在此基础上进行扩展。以下是一些可能需要修复/添加的事项