THGridMenu 0.0.4

THGridMenu 0.0.4

测试已测试
语言语言 Obj-CObjective C
许可 MIT
发布最后发布2014年12月

未声明 维护。




  • Troy Harris

一种响应式网格菜单布局系统,可以调整项目宽度以适应设备旋转。

THGridMenu 是一个构造了每行列数、网格大小、边距和行高的 UIView。您可以调用一个实例方法 createMenuItem,该方法将在正确的起始位置和宽度返回一个 THGridMenuItem 给下一个视图。THGridMenuItem 是 UIControl 的子类,而 UIControl 自身又是 UIView 的子类,因此您可以在其中放置任何您想放的东西。

注意:目前,THMenuGrid 旨在在一个导航控制器内部。您可能需要修改才能在独立视图或标签控制器中使用。

截图

以下是两个列网格在横屏幕和竖屏幕模式下的基本截图。

THGridMenu Screenshot One THGridMenu Screenshot One

使用方法

将 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 时选择的高度。

待办事项

我为一个我正在工作的新项目创建了它。不幸的是,我可能没有时间过多地为此工作,除了我对自己的项目的需求外。尽管如此,您可以自由地获取它并在此基础上进行扩展。以下是一些可能需要修复/添加的事项

  • 应修复以在导航控制器之外工作
  • 横屏和竖屏模式可能具有不同的列数,旋转将确定如何处理这个问题。