Let's include AndroidLayouts into iOS!
A MainLayout is a special UIView that can contain other views (called children or subview.) The MainLayout is the base class for layouts and views containers.
As you might expect, one of the main responsibilities of a Layout is laying out those children: picking how large each View is (the ‘measure’ phase) and placing the Views within the layout (the ‘layout’ phase).
Currently supported Layouts :
- LinearLayout
- FrameLayout
- RelativeLayout
- ArcLayout
Add framework to your project and import it:
#import <iAXLayouts/iAXLayouts.h>LinearLayout has one goal in life: lay out children in a single row or column (depending on if its orientation is horizontal or vertical).
Example (Vertical) :
LinearLayout *layout = [[LinearLayout alloc] initWithOrientation:ORIENTATION_VERTICAL];
...
[self.view addSubview:layout];
[self addItem];
[self addItem];
[self addItem];
...
- (void) addItem {
UIButton *btn = [[UIButton alloc] init];
[btn setTitle:@"Item" forState:UIControlStateNormal];
[btn setBackgroundColor:[UIColor blueColor]];
LinearLayoutParams *lp1 = [[LinearLayoutParams alloc] initWithSize:MATCH_PARENT :WRAP_CONTENT];
[lp1 setMargins:20 :20 :20 :0];
lp1.gravity = [Gravity CENTER];
[layout addSubview:btn :lp1];
}Output:
Example (Horizontal) :
LinearLayout *layout = [[LinearLayout alloc] initWithGravity:ORIENTATION_HORIZONTAL:[Gravity CENTER]];
...
[self.view addSubview:layout];
[self addItem];
[self addItem];
[self addItem];
...
- (void) addItem {
UIButton* btn = [[UIButton alloc] init];
[btn setBackgroundColor:[UIColor redColor]];
[btn setTitle:@"Item" forState:UIControlStateNormal];
LinearLayoutParams *lp1 = [[LinearLayoutParams alloc] initWithSize:WRAP_CONTENT :MATCH_PARENT];
lp1.gravity = [Gravity CENTER];
[lp1 setMargins:10 :20 :10 :20];
[layout addSubview:btn :lp1];
}Output:
FrameLayout acts quite differently compared to LinearLayout: here all children are drawn as a stack — overlapping or not. The only control on positioning is the gravity attribute — pushing the child towards a side or centering it within the FrameLayout.
Example :
FrameLayout *layout = [[FrameLayout alloc] init];
...
[self.view addSubview:layout];
// TOP
UILabel *header = [[UILabel alloc] init];
[header setText:@"FrameLayout Top"];
[header setTextColor:[UIColor whiteColor]];
[header setTextAlignment:NSTextAlignmentCenter];
[header setBackgroundColor:[UIColor blueColor]];
FrameLayoutParams *lp1 = [[FrameLayoutParams alloc] initWithSize:MATCH_PARENT :WRAP_CONTENT];
[lp1 setMargins:20 :20 :20 :20];
lp1.gravity = [Gravity TOP];
lp1.extraHeight = 20;
[layout addSubview:header :lp1];
// BOTTOM
UILabel *footer = [[UILabel alloc] init];
[footer setText:@"FrameLayout Bottom"];
[ setTextColor:[UIColor whiteColor]];
[footer setTextAlignment:NSTextAlignmentCenter];
[footer setBackgroundColor:[UIColor darkGrayColor]];
FrameLayoutParams *lp2 = [[FrameLayoutParams alloc] initWithSize:MATCH_PARENT :WRAP_CONTENT];
[lp2 setMargins:20 :20 :20 :20];
lp2.gravity = [Gravity BOTTOM];
lp2.extraHeight = 20;
[layout addSubview:footer :lp2];
[self.view addSubview:layout];
// CENTER
UILabel *center = [[UILabel alloc] init];
[center setText:@"FrameLayout Center"];
[center setTextColor:[UIColor whiteColor]];
[center setTextAlignment:NSTextAlignmentCenter];
[center setBackgroundColor:[UIColor redColor]];
FrameLayoutParams *lp3 = [[FrameLayoutParams alloc] initWithSize:MATCH_PARENT :WRAP_CONTENT];
[lp3 setMargins:20 :20 :20 :20];
lp3.gravity = [Gravity CENTER];
lp3.extraHeight = 20;
[layout addSubview:center :lp3];Output:
RelativeLayout is not nearly as simple as the previous two: a look at RelativeLayoutParams and rules shows a large number of attributes all focused around positioning children relative to the edges or center of RelativeLayout (similar to FrameLayout in fact), but also relative to one another — say, one child below another child.
Example :
RelativeLayout *layout = [[RelativeLayout alloc] init];
...
[self.view addSubview:layout];
UILabel *label = [[UILabel alloc] init];
label.textAlignment = NSTextAlignmentCenter;
label.text = @"TOP";
label.backgroundColor = [UIColor blueColor];
label.textColor = [UIColor whiteColor];
label.tag = 1;
RelativeLayoutParams *lp = [[RelativeLayoutParams alloc] initWithSize:MATCH_PARENT :112];
[lp addRule:RULE_ALIGN_PARENT_TOP];
[lp setMargins:20 :20 :20 :20];
[layout addSubview:label :lp];
UILabel *label2 = [[UILabel alloc] init];
label2.textAlignment = NSTextAlignmentCenter;
label2.text = @"BOTTOM";
label2.backgroundColor = [UIColor redColor];
label2.textColor = [UIColor whiteColor];
label2.tag = 2;
RelativeLayoutParams *lp2 = [[RelativeLayoutParams alloc] initWithSize:MATCH_PARENT :112];
[lp2 addRule:RULE_ALIGN_PARENT_BOTTOM];
[lp2 setMargins:20 :20 :20 :20];
[layout addSubview:label2 :lp2];
UILabel *label3 = [[UILabel alloc] init];
label3.textAlignment = NSTextAlignmentCenter;
label3.text = @"RIGHT";
label3.backgroundColor = [UIColor darkGrayColor];
label3.textColor = [UIColor whiteColor];
label3.tag = 3;
RelativeLayoutParams *lp3 = [[RelativeLayoutParams alloc] initWithSize:168 :MATCH_PARENT];
[lp3 addRule:RULE_BELOW:1];
[lp3 addRule:RULE_ABOVE:2];
[lp3 addRule:RULE_ALIGN_PARENT_END];
[lp3 setMargins:20 :0 :20 :0];
[layout addSubview:label3 :lp3];
UILabel *label4 = [[UILabel alloc] init];
label4.textAlignment = NSTextAlignmentCenter;
label4.text = @"LEFT";
label4.backgroundColor = [UIColor lightGrayColor];
label4.textColor = [UIColor whiteColor];
label4.tag = 4;
RelativeLayoutParams *lp4 = [[RelativeLayoutParams alloc] initWithSize:MATCH_PARENT:MATCH_PARENT];
[lp4 addRule:RULE_BELOW:1];
[lp4 addRule:RULE_ABOVE:2];
[lp4 addRule:RULE_ALIGN_PARENT_START];
[lp4 addRule:RULE_LEFT_OF:3];
[lp4 setMargins:20 :0 :0 :0];
[lp4 setLayoutDirection:LAYOUT_DIRECTION_RTL];
[layout addSubview:label4 :lp4];Output:
Rules:
- RULE_LEFT_OF
- RULE_RIGHT_OF
- RULE_ABOVE
- RULE_BELOW
- RULE_ALIGN_BASELINE
- RULE_ALIGN_LEFT
- RULE_ALIGN_TOP
- RULE_ALIGN_RIGHT
- RULE_ALIGN_BOTTOM
- RULE_ALIGN_PARENT_LEFT
- RULE_ALIGN_PARENT_TOP
- RULE_ALIGN_PARENT_RIGHT
- RULE_ALIGN_PARENT_BOTTOM
- RULE_CENTER_IN_PARENT
- RULE_CENTER_HORIZONTAL
- RULE_CENTER_VERTICAL
- RULE_START_OF
- RULE_END_OF
- RULE_ALIGN_START
- RULE_ALIGN_END
- RULE_ALIGN_PARENT_START
- RULE_ALIGN_PARENT_END
an ArcLayout for iOS based on Android-ArcLayout-Library
Note: ArcLayout is not a Native Layout for Android!
Example :
ArcLayout *layout = [[ArcLayout alloc] init];
layout.arcRadius = 168;
layout.axisRadius = 120;
layout.arc = [[ArcType alloc] initWithGravity:[Gravity CENTER]];// [Gravity TOP]|[Gravity Left]
...
[self.view addSubview:layout];
[self addLabel :@"A"];
[self addLabel :@"B"];
[self addLabel :@"C"];
[self addLabel :@"D"];
[self addLabel :@"E"];
[self addLabel :@"F"];
- (void) addLabel : (NSString*) text {
UILabel *label = [[UILabel alloc] init];
label.layer.cornerRadius = 24;
label.clipsToBounds = YES;
label.textAlignment = NSTextAlignmentCenter;
label.text = text;
label.backgroundColor = [UIColor blueColor];
label.textColor = [UIColor whiteColor];
ArcLayoutParams *lp = [[ArcLayoutParams alloc] initWithSize:48 :48];
[layout addSubview:label :lp];
}Output:
LayoutParams are used by views to tell their parents how they want to be laid out.
- Supports LayoutDirection (RTL<R)
by MeasureValueDelegate you can customize measuredValue of width and height for each View!
Example :
@interface MyDelegate : NSObject <MeasureValueDelegate>
@end
@implementation MyDelegate
- (int) GetMeasuredHeight : (MeasureValue*) values {
return values.measuredValue + 20;
}
- (int) GetMeasuredWidth : (MeasureValue*) values {
return values.measuredValue + 20;
}
@end
layoutParams.delegate = [[MyDelegate alloc] init];or in this case simply use extra size :
layoutParams.extraHeight = 20;
layoutParams.extraWidth = 20;- Amir Hossein Aghajari
Copyright 2020 Amir Hossein Aghajari
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
