Skip to content

Commit

Permalink
add FlexRow FlexColumn and tailJustifyContent
Browse files Browse the repository at this point in the history
  • Loading branch information
@lkzhao
lkzhao committed Jul 19, 2021
1 parent e71cf25 commit f289d08
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 262 deletions.
12 changes: 0 additions & 12 deletions Examples/UIComponentExample.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
A304893221C347020026EDA7 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = A304893021C347020026EDA7 /* LaunchScreen.storyboard */; };
B10A123224F31EAA0076B038 /* Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = B10A123124F31EAA0076B038 /* Helpers.swift */; };
B121A0A024F8771E00E59F78 /* UIComponent in Frameworks */ = {isa = PBXBuildFile; productRef = B121A09F24F8771E00E59F78 /* UIComponent */; };
B1406F7F26A510ED0053E175 /* FlowViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1406F7E26A510ED0053E175 /* FlowViewController.swift */; };
B16EA6A02677E262005CFB18 /* Kingfisher in Frameworks */ = {isa = PBXBuildFile; productRef = B16EA69F2677E262005CFB18 /* Kingfisher */; };
B16EA6A22677E26F005CFB18 /* AsyncImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = B16EA6A12677E26F005CFB18 /* AsyncImage.swift */; };
B1B5C47B266FD2D50035CF02 /* TabBarExample.swift in Sources */ = {isa = PBXBuildFile; fileRef = B1B5C47A266FD2D50035CF02 /* TabBarExample.swift */; };
Expand Down Expand Up @@ -54,7 +53,6 @@
A304893121C347020026EDA7 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
A304893321C347020026EDA7 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
B10A123124F31EAA0076B038 /* Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Helpers.swift; sourceTree = "<group>"; };
B1406F7E26A510ED0053E175 /* FlowViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FlowViewController.swift; sourceTree = "<group>"; };
B16EA6A12677E26F005CFB18 /* AsyncImage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AsyncImage.swift; sourceTree = "<group>"; };
B1B5C47A266FD2D50035CF02 /* TabBarExample.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarExample.swift; sourceTree = "<group>"; };
B1CC3F622677FCFD005BCE8C /* CardViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardViewController.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -118,14 +116,6 @@
path = UIComponentExample;
sourceTree = "<group>";
};
B1406F7D26A510DA0053E175 /* Flow */ = {
isa = PBXGroup;
children = (
B1406F7E26A510ED0053E175 /* FlowViewController.swift */,
);
path = Flow;
sourceTree = "<group>";
};
B1CC3F682677FFCC005BCE8C /* Supporting Files */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -172,7 +162,6 @@
B1CC3F6C267800B9005BCE8C /* Examples */ = {
isa = PBXGroup;
children = (
B1406F7D26A510DA0053E175 /* Flow */,
F88E832326A3E70C009E7720 /* Flex Layout */,
B1CC3F692678008F005BCE8C /* Card */,
B1CC3F6A2678009C005BCE8C /* AsyncImage */,
Expand Down Expand Up @@ -284,7 +273,6 @@
B1CC3F7426789F3D005BCE8C /* CardData.swift in Sources */,
B1CC3F7026789E1F005BCE8C /* CardViewController3.swift in Sources */,
B1CC3F6E26789C55005BCE8C /* CardViewController2.swift in Sources */,
B1406F7F26A510ED0053E175 /* FlowViewController.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down
203 changes: 110 additions & 93 deletions Examples/UIComponentExample/Examples/Flex Layout/FlexLayoutViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,25 @@ import UIKit
import UIComponent

class Box: ComponentBuilder {
let height: CGFloat
let width: CGFloat
let height: CGFloat
let text: String
init(_ text: String, width: CGFloat = 50, height: CGFloat = 50) {
self.width = width
self.height = height
self.text = text
}
convenience init(_ index: Int, width: CGFloat = 50, height: CGFloat = 50) {
self.init("\(index)", width: width, height: height)
}
func build() -> Component {
SimpleViewComponent<UIView>()
.size(width: width, height: height)
.styleColor(.systemBlue).overlay(Text(text).textColor(.white).textAlignment(.center).size(width: .fill, height: .fill))
Space(width: width, height: height).styleColor(.systemBlue).overlay(Text(text).textColor(.white).textAlignment(.center).size(width: .fill, height: .fill))
}


}

extension ViewComponent {
func styleColor(_ tintColor: UIColor) -> ViewUpdateComponent<Self> {
update {
extension Component {
func styleColor(_ tintColor: UIColor) -> ViewUpdateComponent<ComponentDisplayableViewComponent<ComponentView>> {
view().update {
$0.backgroundColor = tintColor.withAlphaComponent(0.5)
$0.layer.cornerRadius = 10
$0.layer.cornerCurve = .continuous
Expand All @@ -42,105 +41,123 @@ extension ViewComponent {
class FlexLayoutViewController: ComponentViewController {

override var component: Component {
return VStack(spacing: 20) {
Text("Flex layouts", font: .systemFont(ofSize: 20, weight: .bold)).textColor(.label).textAlignment(.center).size(width: .fill)
VStack(justifyContent: .center, alignItems: .center) {
HStack {
Text("HStack wrap")
Spacer()
}
Space(height: 10)
HStack(spacing: 10, justifyContent: .spaceBetween, wrapper: .wrap) {
for index in 0...10 {
SimpleViewComponent<UIView>()
.size(width: .percentage(0.90/3), height: .aspectPercentage(1))
.styleColor(.systemBlue).overlay(Text("\(index)").textColor(.white).textAlignment(.center).size(width: .fill, height: .fill))
}
}
}.inset(10).view().styleColor(.systemGroupedBackground).size(width: .fill)

VStack {
Text("HStack noWrap(can scroll horizontally)").inset(10)
HStack(spacing: 10, wrapper: .noWrap) {
for index in 0...10 {
Box("\(index)")
VStack(spacing: 20) {
Text("Flex layouts", font: .boldSystemFont(ofSize: 20)).size(width: .fill)

VStack(spacing: 10) {
Text("Horizontal layouts")
VStack(spacing: 10) {
Text("FlexRow justify=spaceBetween")
FlexRow(spacing: 10, justifyContent: .spaceBetween) {
for index in 0...10 {
Box(index)
}
}
}.scrollView().showsHorizontalScrollIndicator(false).contentInset(UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10))
Space(height: 10)
}.view().styleColor(.systemGroupedBackground)
}.inset(10).styleColor(.systemGray4).size(width: .fill)

VStack {
Text("HStack (can scroll horizontally)").inset(top: 10, left: 10, bottom: 0, right: 10)
HStack(spacing: 10) {
for index in 0...10 {
Box(index)
}
}.inset(10).scrollView().showsHorizontalScrollIndicator(false)
}.styleColor(.systemGray4)
}.inset(10).styleColor(.systemGroupedBackground)

VStack(spacing: 10) {
Text("VStack layouts")
Text("Vertical layouts")
HStack(justifyContent: .spaceBetween) {
VStack {
Text("VStack wrap")
Text("FlexColumn")
Space(height: 10)
VStack(spacing: 10, wrapper: .wrap) {
FlexColumn(spacing: 10) {
for index in 0...10 {
Box("\(index)")
Box(index)
}
}.size(height: 300)
}.inset(10).view().styleColor(.systemGray4)
}.size(height: 290)
}.inset(10).styleColor(.systemGray4)
Spacer()
VStack {
Space(height: 10)
Text("VStack noWrap")
VStack(spacing: 10, wrapper: .noWrap) {
Text("VStack")
VStack(spacing: 10) {
for index in 0...10 {
Box("\(index)")
Box(index)
}
}.inset(v: 10).scrollView().showsVerticalScrollIndicator(false).contentInset(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)).size(height: 320)
}.inset(h: 10).view().styleColor(.systemGray4)
}.inset(10).scrollView().showsVerticalScrollIndicator(false).size(height: 310)
}.inset(h: 10).styleColor(.systemGray4)
}
}.inset(10).view().styleColor(.systemGroupedBackground)
}.inset(10).styleColor(.systemGroupedBackground)

genHStack(wrapper: .wrap, justifyContent: .start, alignItems: .end)
genHStack(wrapper: .wrap, justifyContent: .start, alignItems: .start)
genHStack(wrapper: .wrap, justifyContent: .end, alignItems: .start)
genHStack(wrapper: .wrap, justifyContent: .center, alignItems: .start)
genHStack(wrapper: .wrap, justifyContent: .spaceBetween, alignItems: .start)
genHStack(wrapper: .wrap, justifyContent: .spaceAround, alignItems: .start)
genHStack(wrapper: .wrap, justifyContent: .spaceEvenly, alignItems: .start)

}.inset(10)

}

func genHStack(wrapper: Wrapper, justifyContent: MainAxisAlignment, alignItems: CrossAxisAlignment) -> Component {
VStack(spacing: 10) {
Text("HStack\njustifyContent: .\(justifyContent)\nalignItems: .\(alignItems)\nwrapper: .\(wrapper)")
HStack(spacing: 10, justifyContent: justifyContent, alignItems: alignItems, wrapper: wrapper) {
Box("0", height: 100)
for index in 1..<10 {
if index == 8 {
Box("\(index)", height: 100)
} else {
Box("\(index)")
}
VStack(spacing: 10) {
Text("Justify Content", font: .boldSystemFont(ofSize: 20)).size(width: .fill)
for justifyContent in MainAxisAlignment.allCases {
Text("\(justifyContent)").size(width: .fill)
Flow(justifyContent: justifyContent) {
for index in 0..<10 {
Box(index)
}
}.inset(10).styleColor(.systemGroupedBackground)
}
Box("10", height: 100)
}.inset(10).view().styleColor(.systemTeal)
}.inset(10).view().styleColor(.systemGroupedBackground)
}

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
/*


*/
}

VStack(spacing: 10) {
Text("Align Items", font: .boldSystemFont(ofSize: 20)).size(width: .fill)
for alignItems in CrossAxisAlignment.allCases {
Text("\(alignItems)").size(width: .fill)
Flow(alignItems: alignItems) {
for index in 0..<10 {
Box(index, height: 50 + CGFloat(index % 4) * 10)
}
}.inset(10).styleColor(.systemGroupedBackground)
}
}

VStack(spacing: 10) {
Text("Align Content", font: .boldSystemFont(ofSize: 20)).size(width: .fill)
for alignContent in MainAxisAlignment.allCases {
Text("\(alignContent)").size(width: .fill)
Flow(alignContent: alignContent) {
for index in 0..<10 {
Box(index, height: 50)
}
}.size(height: 150).inset(10).styleColor(.systemGroupedBackground)
}
}


VStack(spacing: 10) {
Text("Flex", font: .boldSystemFont(ofSize: 20)).size(width: .fill)
Text("single flex").size(width: .fill)
Flow() {
Box(1)
Box(2).flex()
Box(3)
}.inset(10).styleColor(.systemGroupedBackground)
Text("2 flex").size(width: .fill)
Flow() {
Box(1)
Box(2).flex()
Box(3).flex()
Box(4)
}.inset(10).styleColor(.systemGroupedBackground)
Text("2 flex on 1st line").size(width: .fill)
Flow {
Box(1)
Box(2).flex()
Box(3).flex()
Box(4)
}.size(width: 190).inset(10).styleColor(.systemGroupedBackground)
Text("2 flex on 2nd line").size(width: .fill)
Flow {
Box(1)
Box(2)
Box(3)
Box(4).flex()
Box(5).flex()
}.size(width: 190).inset(10).styleColor(.systemGroupedBackground)
}
}.inset(20)
}


/*
// MARK: - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/

}
94 changes: 0 additions & 94 deletions Examples/UIComponentExample/Examples/Flow/FlowViewController.swift
View file

This file was deleted.

1 change: 0 additions & 1 deletion Examples/UIComponentExample/ViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ class ViewController: ComponentViewController {
ExampleItem(name: "Card Example 3", viewController: CardViewController3())
ExampleItem(name: "AsyncImage Example", viewController: UINavigationController(rootViewController: AsyncImageViewController()))
ExampleItem(name: "Tab Bar Example", viewController: TabBarViewController())
ExampleItem(name: "Flow Example", viewController: FlowViewController())
ExampleItem(name: "Flex Layout Example", viewController: FlexLayoutViewController())
} separator: {
Separator()
Expand Down
Loading

0 comments on commit f289d08

Please sign in to comment.