MGCollapsingHeader 1.0.6

MGCollapsingHeader 1.0.6

×

测试测试✗
Lang语言 Obj-CObjective C
许可 MIT
发布上次发布2016年9月

由 Matthew Gardner 维护。

MGCollapsingHeader 1.0.6

  • 作者：
  • Matthew Gardner

一个 iOS UIView 子类，用于管理表头视图的折叠和展开。表头视图的子视图被配置为转换到任何折叠布局。该表头与任何 UIScrollView 兼容，并在用户滚动内容时转换视图。

Demo Gif

要求

  • 自动布局（依赖于约束来转换子视图）
  • 支持 iOS 7+

如何使用

要使用可折叠的表头，您必须首先使用包含表头视图的 UIViewController 进行配置。只需将此视图的类设置为 MGCollapsingHeaderView，然后就可以配置如何转换表头。默认情况下，视图折叠的大小为 60 px，但可以设置

[self.headerView setMinimumHeaderHeight:100.]

然后您可以提供垂直约束（或约束），以使表头顶部、底部或高度折叠。

[self.headerView setCollapsingConstraint:_headerHeight]
// or
[self.headerView setCollapsingConstraint:_tableViewTop];

接下来，将任何要随表头一起转换的视图添加到其中

  • [MGTransform transformAttribute:byValue:] 添加一个在用户滚动时按某些值转换的视图。必须提供一个 MGTransformAttribute 数组来描述转换。有关支持的属性，请参阅属性部分。
  • [MGTransform addFadingSubview:fadeBy:] 添加一个在用户滚动时渐变的视图。

示例（来自演示）

[self.headerView addFadingSubview:self.button1 fadeBy:0.3];
[self.headerView addFadingSubview:self.button2 fadeBy:0.3];
[self.headerView addFadingSubview:self.button3 fadeBy:0.3];

NSArray *attrs;
double r = 16.0;
attrs    = @[
    [MGTransform transformAttribute:MGAttributeX byValue:-r],
    [MGTransform transformAttribute:MGAttributeY byValue:-r],
    [MGTransform transformAttribute:MGAttributeWidth byValue:2 * r],
    [MGTransform transformAttribute:MGAttributeHeight byValue:2 * r],
    [MGTransform transformAttribute:MGAttributeCornerRadius byValue:r],
    [MGTransform transformAttribute:MGAttributeFontSize byValue:12.0]
];
[self.headerView addTransformingSubview:self.button4 attributes:attrs];

// Push this button closer to the bottom-right corner since the header view's height
// is resizing.
attrs = @[
    [MGTransform transformAttribute:MGAttributeX byValue:10.0],
    [MGTransform transformAttribute:MGAttributeY byValue:13.0],
    [MGTransform transformAttribute:MGAttributeWidth byValue:-32.0],
    [MGTransform transformAttribute:MGAttributeHeight byValue:-32.0]
];
[self.headerView addTransformingSubview:self.button5 attributes:attrs];

attrs = @[
    [MGTransform transformAttribute:MGAttributeY byValue:-30.0],
    [MGTransform transformAttribute:MGAttributeWidth byValue:-30.0],
    [MGTransform transformAttribute:MGAttributeHeight byValue:-20.0],
    [MGTransform transformAttribute:MGAttributeFontSize byValue:-10.]
];
[self.headerView addTransformingSubview:self.label attributes:attrs];

最后，在 scrollViewDidScroll 委托调用中通知表头视图进行折叠。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.headerView collapseWithScroll:scrollView];
}

属性

属性用于描述折叠结束时子视图的状态。以下属性目前可用：
MGAttributeX
MGAttributeY
MGAttributeWidth
MGAttributeHeight
MGAttributeAlpha
MGAttributeCornerRadius
MGAttributeShadowRadius
MGAttributeShadowOpacity
MGAttributeFontSize

视图的属性将从其默认值（线性）动画化。

待办事项

  • 转换曲线函数（EaseIn，EaseOut，EaseInOut）