JXStackView

栈式布局容器
授权协议 未知
开发语言 Objective-C
所属分类 开发工具、 界面原型设计工具
软件类型 开源软件
地区 不详
投 递 者 申屠项明
操作系统 OS X
开源组织
适用人群 未知
 软件概览

JXStackView是一个栈式布局容器。

竖直布局:

#import "JXStackView.h"@interface ViewController ()@property (nonatomic, strong) UIScrollView *vScrollView;@property (nonatomic, strong) JXVerticalStackView *vStackView;@property (nonatomic, strong) UIScrollView *hScrollView;@property (nonatomic, strong) JXHorizontalStackView *hStackView;@end@implementation ViewController- (void)viewDidLoad{
[super viewDidLoad];
self.title = @"单击改变size,拖动删除";

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(onRightItem)];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(onLeftItem)];/* 竖直容器 */self.vScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.vScrollView];

self.vStackView = [[JXVerticalStackView alloc] init];
[self.vScrollView addSubview:self.vStackView];// 高度初始化可为0,会自动计算;宽度需传值self.vStackView.frame = CGRectMake(0, 0, self.vScrollView.frame.size.width, 0);// size变化后回调__weak typeof(self) weakSelf = self;
[self.vStackView setDidChangeSize:^(CGSize size) {
weakSelf.vScrollView.contentSize = size;
}];// 添加子viewfor (NSInteger index = 0; index < 5; index ++)
{
[self.vStackView addSubview:[self generateRandomView]];
}
self.vStackView.contentSpacing = 10;
self.vStackView.alignment = JXVerticalStackViewAlignmentCenter;/* 水平容器 */self.hScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.hScrollView];

self.hStackView = [[JXHorizontalStackView alloc] init];
[self.hScrollView addSubview:self.hStackView];// 宽度初始化可为0,会自动计算;高度需传值self.hStackView.frame = CGRectMake(0, 64, 0, 60);// size变化后回调[self.hStackView setDidChangeSize:^(CGSize size) {
weakSelf.hScrollView.contentSize = size;
}];// 添加子viewfor (NSInteger index = 0; index < 5; index ++)
{
[self.hStackView addSubview:[self generateRandomView]];
}
self.hStackView.contentSpacing = 6;
self.hStackView.alignment = JXHorizontalStackViewAlignmentCenter;// 切换self.vScrollView.hidden = NO;
self.hScrollView.hidden = !self.vScrollView.hidden;
}

- (void)onRightItem{if (!self.vScrollView.hidden)
{
[self.vStackView addSubview:[self generateRandomView]];
}else if (!self.hScrollView.hidden)
{
[self.hStackView addSubview:[self generateRandomView]];
}
}

- (void)onLeftItem{
self.vScrollView.hidden = !self.vScrollView.hidden;
self.hScrollView.hidden = !self.vScrollView.hidden;
}

- (UIView *)generateRandomView{
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, arc4random_uniform(60) + 30, arc4random_uniform(60) + 30)];
view.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255) / 255.0 green:arc4random_uniform(255) / 255.0 blue:arc4random_uniform(255) / 255.0 alpha:1.0];

view.userInteractionEnabled = YES;
UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onSingleTap:)];
[view addGestureRecognizer:singleTap];

UIPanGestureRecognizer *panTap = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(onPanTap:)];
[view addGestureRecognizer:panTap];return view;
}

- (void)onSingleTap:(UITapGestureRecognizer *)tap{
UIView *view = tap.view;CGRect frame = view.frame;
frame.size = CGSizeMake(arc4random_uniform(60) + 30, arc4random_uniform(60) + 30);
view.frame = frame;
}

- (void)onPanTap:(UITapGestureRecognizer *)tap{
UIView *view = tap.view;
[view removeFromSuperview];
}@end

效果图一:

效果图二

 相关资料
  • 堆栈布局也是布局管理器的一种。它把一系列的窗口部件排列成类似堆栈的样子,但 每次只能有一个窗口部件是当前的可见窗口。 11.4.1 使用方法 QStackedLayout 类被用来创建堆栈布局的实例。使用堆栈布局创建出来的应用程序的 样子与使用 QTabWidget 创建的效果有些相像。也可以使用 QStackedWidget 类来创建一个 应用程序界面,和使用 QStackedLayout 效果

  • Container 布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。 <el-header>:顶栏容器。 <el-aside>:侧边栏容器。 <el-main>:主要区域容器。 <el-footer>:底栏容器。 tip 以上组件

  • 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。 <el-header>:顶栏容器。 <el-aside>:侧边栏容器。 <el-main>:主要区域容器。 <el-footer>:底栏容器。 tip 以上组件采用了 flex 布局,使用前

  • 用于布局的指令,方便快速搭建页面的基本结构: el-container:外层容器。 el-header 顶栏容器。 el-aside 侧边栏容器。 el-main 主要区域容器。 el-footer 底栏容器。 以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。 此外,子元素只能是后四者,后四者的父元素也只能是 el-container。 常见页面布局 <div el-contain

  • Layout(自动布局)组件可以挂载在任何节点上,将节点变成一个有自动布局功能的容器。所谓自动布局容器,就是能够自动将子节点按照一定规律排列,并可以根据节点内容的约束框总和调整自身尺寸的容器型节点。 布局模式(Layout Type) 自动布局组件有几种基本的布局模式,可以通过 Layout Type 属性进行设置,包括以下几种。 水平布局(Horizontal) Layout Type 设为 H

  • Layout(自动布局)组件可以挂载在任何节点上,将节点变成一个有自动布局功能的容器。所谓自动布局容器,就是能够自动将子节点按照一定规律排列,并可以根据节点内容的约束框总和调整自身尺寸的容器型节点。 布局模式(Layout Type) 自动布局组件有几种基本的布局模式,可以通过 Layout Type 属性进行设置,包括以下几种。 水平布局(Horizontal) Layout Type 设为 H