[iOS/Swift] XML을 통한 UI 그리기 (1)

xml 과 연결한 UI 를 만들어보자!

 

사용 라이브러리 : Layout https://github.com/nicklockwood/layout

nicklockwood/layout

 

Pod install

pod 'Layout', '~> 0.6'

먼저 라이브러리를 설치한다. (버전이 자주 바뀌므로 깃 공식문서를 참고하자)

 

 

AppDelegate.swift

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        
        window = UIWindow()
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
        return true
    }
}

원하는 rootview를 지정해준다.

 

 

Load XML

import Layout

struct LayoutState{
    let isSelected: Bool
}

class ViewController: UIViewController, LayoutLoading {

    override func viewDidLoad() {
        super.viewDidLoad()

        loadLayout(
            named: "sample2.xml",
            state: LayoutState(isSelected: false),
            constants: [
                "title": "my title"
            ]
        )
    }

    // state 지정 
    func setSelected() {
        self.layoutNode?.setState(LayoutState(isSelected: true))
    }
}

 

named : 불러올 xml 파일 이름이다.

state, constants : layout의 properties 이다. 별도로 지정할 수 있다.

 

 

XML files

xml files

<UIStackView
    alignment="center"
    axis="vertical"
    width="100%"
    height="50%"
    spacing="10">
    
    <UILabel text="First {title}"  />
    <UILabel text="Second {title}" />
    
</UIStackView>

<UIView
    backgroundColor="purple">
     
    <UILabel
        text="Hello world!@!@"
        textColor="white"
        center.y= "50%"
        center.x= "50%"
        font="40 bold"
        >
    </UILabel>
    
</UIView>

우리가 불러올 XML 파일들이다. (그냥 예시!)

 

 

아래는 xml에서 지정할 수 있는 가장 기본적인 layout prperties들이다.

top
left
bottom
right
leading
trailing
width
height
center.x
center.y

 

 

screenshot 📱

xml layout examples