您的位置:首页 > 产品设计 > UI/UE

UI父视图子视图加载

2016-01-26 20:15 309 查看
//初学UI,对视图及视图上的坐标分配模糊不清。本文以将视图切割成模块为例,讲解视图加载,坐标间关系,便于初学者更好的理解视图

- (void)viewDidLoad {
[super viewDidLoad];

self.view.backgroundColor=[UIColor greenColor];

//首先将视图一分为二
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.5)];
UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height * 0.5, self.view.frame.size.width, self.view.frame.size.height * 0.5)];
topView.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];
bottomView.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];

[self.view addSubview:topView];
[self.view addSubview:bottomView];

//以上面的视图为父视图,对父视图进行切割,使用for循环
UIView *parentView = topView;
for (int i = 0; i < 8; i++) {

// 偶数次分割 竖着分
if (i % 2 == 0) {
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, parentView.frame.size.width * 0.5, parentView.frame.size.height)];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(parentView.frame.size.width * 0.5, 0, parentView.frame.size.width * 0.5, parentView.frame.size.height)];
view1.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];
view2.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];

//颜色随机生成
[parentView addSubview:view1];
[parentView addSubview:view2];
parentView = view2;// 注: 父视图依次迭代赋值新值
}

else {

// 基数次分割 横着分
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, parentView.frame.size.width , parentView.frame.size.height * 0.5)];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, parentView.frame.size.height * 0.5, parentView.frame.size.width , parentView.frame.size.height * 0.5)];
view1.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];
view2.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0 alpha:1];

[parentView addSubview:view1];
[parentView addSubview:view2];
parentView = view2;

}

}

// 中间的视图
UIView *middleView = [[UIView alloc] initWithFrame:CGRectMake(0, bottomView.frame.size.height, bottomView.frame.size.width, bottomView.frame.size.height * 0.5)];

middleView.backgroundColor = [UIColor colorWithRed:arc4random() % 255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
[self.view addSubview:middleView];
for (int i = 0; i < 3; i++) {

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(( middleView.frame.size.width /3) *i, 0 , middleView.frame.size.width /3, middleView.frame.size.height)];
view.backgroundColor = [UIColor colorWithRed:arc4random() %255/255.0 green:arc4random() %255/255.0 blue:arc4random() %255/255.0 alpha:1];

[middleView addSubview:view];

}

// 视图以12 :9 的比例分割
UIView *viewLeft = [[UIView alloc] initWithFrame:CGRectMake(0, 0.75 *self.view.frame.size.height , (4.0/3)* 0.5*bottomView.frame.size.height , 0.5 * bottomView.frame.size.height)];
viewLeft.backgroundColor = [UIColor colorWithRed:arc4random() %255/255.0 green:arc4random() %255/255.0 blue:arc4random() %255/255.0 alpha:1];
[self.view addSubview:viewLeft];

UIView *viewRight = [[UIView alloc] initWithFrame:CGRectMake(viewLeft.frame.size.width, viewLeft.frame.origin.y, self.view.frame.size.width - viewLeft.frame.size.width, viewLeft.frame.size.height)];

viewRight.backgroundColor = [UIColor colorWithRed:arc4random() %255/255.0 green:arc4random() %255/255.0 blue:arc4random()%255/255.0 alpha:1];
[self.view addSubview:viewRight];

//余下的继续二分
 UIView *parentV = viewRight;
for (int i = 0; i < 9; i++) {
if (i % 2 == 0) {
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(parentV.frame.origin.x, parentV.frame.origin.y, parentV.frame.size.width, 0.5*parentV.frame.size.height)];

view1.backgroundColor = [UIColor colorWithRed:arc4random() %255 / 255.0 green:arc4random() %255/255.0 blue:arc4random()%255/255.0 alpha:1];
[self.view addSubview:view1];
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(parentV.frame.origin.x, parentV.frame.origin.y + view1.frame.size.height, parentV.frame.size.width, parentV.frame.size.height)];

view2.backgroundColor = [UIColor colorWithRed:arc4random() %255 / 255.0 green:arc4random() %255/255.0 blue:arc4random()%255/255.0 alpha:1];
[self.view addSubview:view2];

parentV = view2;

}

else {

UIView *viewL = [[UIView alloc] initWithFrame:CGRectMake(parentV.frame.origin.x + 0.5 *parentV.frame.size.width, parentV.frame.origin.y, 0.5*parentV.frame.size.width, 0.5*parentV.frame.size.height)];
viewL.backgroundColor = [UIColor colorWithRed:arc4random() %255 / 255.0 green:arc4random() %255/255.0 blue:arc4random()%255/255.0 alpha:1];

[self.view addSubview:viewL];

UIView *viewB = [[UIView alloc] initWithFrame:CGRectMake(parentV.frame.origin.x, parentV.frame.origin.y,viewL.frame.size.width, viewL.frame.size.height)];
viewB.backgroundColor = [UIColor colorWithRed:arc4random() %255 / 255.0 green:arc4random() %255/255.0 blue:arc4random()%255/255.0 alpha:1];
parentV = viewB;
[self.view addSubview:viewB];

}

}

}
//最后呈现出来的视图是下面那样的,可以改变循环次数,改变分割效果
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: