appkonthaiแอพคนไทย
Language
  • EN
  • TH
Font
  • M
  • L
  • XL
Theme
  • Light
  • Dark

Dynamic Layout

26 February 2018

26 กุมภาพันธ์ 2561

Dynamic Layout

Concept

แนวคิด

Dynamic Layout (หรือ Fluid Layout) คือการออกแบบ User Interface ที่รองรับกับการแสดงผลบนหน้าจอที่มีขนาดแตกต่างกัน โดยสามารถแสดงผลองค์ประกอบต่างๆ ได้ถูกต้องตามตำแหน่งที่จัดวาง และแสดงผลได้เต็มพื้นที่บนหน้าจอเสมอ

Dynamic Layout (or Fluid Layout) is the user interface design that supports to display on different screen size which all user interface element size and position will display correctly and stretch to the screen size.

Keywords

คีย์เวิร์ด

Static Layoutองค์ประกอบต่างๆ จะถูกกำหนดตำแหน่งและถูกกำหนดขนาดเป็นหน่วยตายตัวเช่น pixel ทำให้แสดงผลได้ถูกต้องบนขนาดหน้าจอที่กำหนดไว้เท่านั้น
Dynamic Layoutองค์ประกอบต่างๆ จะถูกกำหนดตำแหน่งแบบอ้างอิง และถูกกำหนดขนาดแบบปรับขนาดอัตโนมัติตามขนาดหน้าจอ (Auto size) ทำให้แสดงผลได้ถูกต้องบนหน้าจอที่มีขนาดแตกต่างกัน
Static LayoutEach user interface element has assigned size and position as a fixed unit such as pixel, so it will display correctly only on specific screen size.
Dynamic LayoutEach user interface element has assigned size and position as auto adjust to the screen size (Auto size), so it will display correctly on any screen size.

ในบทความนี้จะใช้ Holy Grail Layout เป็นโจทย์ในการทำ Dynamic Layout ซึ่ง Layout ประเภทนี้จะมีองค์ประกอบ 4 ส่วน คือ Header, Footer, Menu, Content

ตัวอย่าง Static Layout

ตัวอย่าง Dynamic Layout

In this article will implement Dynamic Layout base on Holy Grail Layout which this kind of layout has 4 parts includes Header, Footer, Menu, Content.

Example of Static Layout

Example of Dynamic Layout

การสร้าง User Interface แบบ Dynamic Layout นั้นจะมีวิธีการแตกต่างกันไปตามแต่ละ Platform ดังนี้

HTML

เราสามารถสร้าง Dynamic Layout ได้หลายวิธี แต่ในที่นี้จะยกตัวอย่างขึ้นมา 2 วิธี คือ

  • 1. การใช้คุณสมบัติ position (CSS2) โดยกำหนดค่าเป็น absolute แล้วกำหนดค่า left, top, right, bottom เพื่อกำหนดตำแหน่งขอบด้านต่างๆ ของ DIVcss position absolute
  • 2. การใช้คุณสมบัติ display โดยกำหนดค่าเป็น flex (CSS3) แล้วกำหนดค่า flex-direction เพื่อกำหนดทิศทางของ child DIV ให้เป็นแนวตั้ง (column) หรือแนวนอน (row) และกำหนดค่า flex-grow เท่ากับ 1 เพื่อกำหนดให้ DIV แสดงผลเต็มพื้นที่css display flex

The Implementation of Dynamic Layout user interface will have a different method on each platform.

HTML

We can implement Dynamic Layout in many ways but in this article will show you two methods.

  • 1. Position property usage (CSS2) by assigning the value of the position to "absolute" then assign the value of left, top, right, bottom to set the position of each edge of DIV.css position absolute
  • 2. Display property usage by assigning the value to "flex" (CSS3) then assign the value of flex-direction to set the direction of child DIV to vertically (column) or horizontally (row) and assign the value of flex-grow to 1 to stretch the display of DIV.css display flex
  • Position Absolute (CSS2)
  • Display Flex (CSS3)

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<style>
			body {
				margin: 0;
			}
			div {
				text-align: center;
			}
			.header {
				position: absolute;
				left: 0;
				right: 0;
				height: 50px;
				background: gray;
			}
			.menu {
				position: absolute;
				top: 50px;
				bottom: 50px;
				width: 100px;
				background: darkgray;
			}
			.content {
				position: absolute;
				top: 50px;
				left: 100px;
				right: 0;
				bottom: 50px;
				background: lightgray;
			}
			.footer {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 50px;
				background: gray;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">Header</div>
			<div class="menu">Menu</div>
			<div class="content">Content</div>
			<div class="footer">Footer</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<style>
			body {
				margin: 0;
			}
			div {
				text-align: center;
			}
			.container {
				display: flex;
				flex-direction: column;
				height: 100vh;
			}
			.header, .footer {
				height: 50px;
				background: gray;
			}
			.body {
				display: flex; /*default flex-direction = row*/
				flex-grow: 1;
			}
			.menu {
				width: 100px;
				background: darkgray;
			}
			.content {
				flex-grow: 1;
				background: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="header">Header</div>
			<div class="body">
				<div class="menu">Menu</div>
				<div class="content">Content</div>
			</div>
			<div class="footer">Footer</div>
		</div>
	</body>
</html>

iOS

เราสามารถสร้าง Dynamic Layout ได้หลายวิธี แต่ในที่นี้จะเลือกวิธีที่เป็นมาตรฐานและนิยมใช้กัน คือการใช้ Constraints ในการกำหนดตำแหน่งและขนาดของ View ต่างๆ ที่อยู่ใน ViewController โดย Constraints ตัวที่หลักๆ ที่สำคัญมีดังนี้

  • leadingAnchor : กำหนดการยึดเกาะทางขอบซ้ายของ View
  • topAnchor : กำหนดการยึดเกาะทางขอบบนของ View
  • trailingAnchor : กำหนดการยึดเกาะทางขอบขวาของ View
  • bottomAnchor : กำหนดการยึดเกาะทางขอบล่างของ View
  • widthAnchor : กำหนดความกว้างของ View
  • heightAnchor : กำหนดความสูงของ Viewios constraints layout

iOS

We can implement Dynamic Layout in many ways but in this article will choose to use the standard and popular method. It's Constraints usage to assign position and size of the View in the ViewController. The important constraints are following.

  • leadingAnchor : Define the left anchor of the view.
  • topAnchor : Define the top anchor of the view.
  • trailingAnchor : Define the right anchor of the view.
  • bottomAnchor : Define the bottom anchor of the view.
  • widthAnchor : Define width of the view.
  • heightAnchor : Define height of the view.ios constraints layout
  • Interface Builder
  • Programmatically

เนื่องจากโค้ด XML ในไฟล์ storyboard นั้นค่อนข้างซับซ้อนมาก ตัวอย่างนี้จึงขอแสดงหน้าจอของ Interface Builder แทน

Because the storyboard's XML source code is very complex, so I show you the Interface Builder screen here.


override func viewDidLoad() {
	super.viewDidLoad()
	
	let header = UIView()
	header.backgroundColor = UIColor.gray
	header.translatesAutoresizingMaskIntoConstraints = false
	view.addSubview(header)
	header.topAnchor.constraint(equalTo:view.topAnchor).isActive = true
	header.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
	header.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true
	header.heightAnchor.constraint(equalToConstant: 50).isActive = true
	
	let footer = UIView()
	footer.backgroundColor = UIColor.gray
	footer.translatesAutoresizingMaskIntoConstraints = false
	view.addSubview(footer)
	footer.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
	footer.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true
	footer.bottomAnchor.constraint(equalTo:view.bottomAnchor).isActive = true
	footer.heightAnchor.constraint(equalToConstant:50).isActive = true
	
	let menu = UIView()
	menu.backgroundColor = UIColor.darkGray
	menu.translatesAutoresizingMaskIntoConstraints = false
	view.addSubview(menu)
	menu.topAnchor.constraint(equalTo:header.bottomAnchor).isActive = true
	menu.leadingAnchor.constraint(equalTo:view.leadingAnchor).isActive = true
	menu.bottomAnchor.constraint(equalTo:footer.topAnchor).isActive = true
	menu.widthAnchor.constraint(equalToConstant:100).isActive = true
	
	let content = UIView()
	content.backgroundColor = UIColor.lightGray
	content.translatesAutoresizingMaskIntoConstraints = false
	view.addSubview(content)
	content.topAnchor.constraint(equalTo:header.bottomAnchor).isActive = true
	content.leadingAnchor.constraint(equalTo:menu.trailingAnchor).isActive = true
	content.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true
	content.bottomAnchor.constraint(equalTo:footer.topAnchor).isActive = true
}

Android

เราสามารถสร้าง Dynamic Layout ได้หลายวิธี แต่ในที่นี้จะยกตัวอย่างขึ้นมา 2 วิธี คือ

  • 1. การใช้ Constraint Layout (ต้องการ Android Studio 2.3 ขึ้นไป) โดยมีวิธีการทำคล้ายกับการใช้ Constraints บน iOS คือกำหนดค่า Constraint ต่างๆ ให้กับ View ที่ต้องการandroid constraint layout
  • 2. การใช้ Relative Layout โดยจะกำหนดตำแน่งของ View ที่ต้องการอ้างอิงกับ View ตัวอื่นๆ เช่น View A อยู่ทางด้านบนของ View B และอยู่ทางด้านขวาของ View Candroid relative layout

Android

We can implement Dynamic Layout in many ways but in this article will show you two methods.

  • 1. Constraint Layout (required Android Studio 2.3 or above) this method similar to iOS Constraints usage method which defines each constraint to the view.android constraint layout
  • 2. Relative Layout usage by define position of the view refers to another view, for example, View A is on the top of view B and on the right side of view C.android relative layout
  • Constraint Layout
  • Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#808080"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/footer"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#808080"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/menu"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#a9a9a9"
        app:layout_constraintBottom_toTopOf="@+id/footer"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#d3d3d3"
        app:layout_constraintBottom_toTopOf="@+id/footer"
        app:layout_constraintLeft_toRightOf="@+id/menu"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header">
    </FrameLayout>

</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="test.app.MainActivity">

    <FrameLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#808080"
        android:layout_alignParentTop="true">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#808080"
        android:layout_alignParentBottom="true">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/menu"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="#A9A9A9"
        android:layout_above="@+id/footer"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/header">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#D3D3D3"
        android:layout_above="@+id/footer"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/header"
        android:layout_toRightOf="@+id/menu">
    </FrameLayout>

</RelativeLayout>
ประสมศักดิ์ ขุนหมื่น Prasomsak Khunmuen

แค่โปรแกรมเมอร์คนไทย ที่รักการเขียนโปรแกรม

I'm just a Thai Programmer who loves programming.