For TKU

1. 行動APP開發管理實務
Unit3 - Layout
尹君耀 Xavier Yin

2. Outline
 View & ViewGroup
 LinearLayout
 FrameLayout
 RelativeLayout
 TableLayout
 GridLayout

3. UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.

4. UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.

5. UI Components
 View class
– This class represents the basic
building block for user interface
components.
 ViewGroup class
– The ViewGroup subclass is the base
class for layouts, which are invisible
containers that hold other Views (or
other ViewGroups) and define their
layout properties.

6. XML Attributes
 android:background - setBackgroundResource(int)
– A drawable to use as the background.
 android:id - setId(int)
– Supply an identifier name for this view, to later retrieve it with
View.findViewById() or Activity.findViewById().
 android:padding - setPaddingRelative(int,int,int,int)
– Sets the padding, in pixels, of all four edges.
 android:visibility - setVisibility(int)
– Controls the initial visibility of the view.

7. LinearLayout
 android:orientation -
setOrientation(int)
– Should the layout be a column
or a row? Use "horizontal" for a
row, "vertical" for a column.
 android:gravity -
setGravity(int)
– Specifies how an object should
position its content, on both
the X and Y axes, within its own
bounds.

8. LinearLayout
 Practice
Horizontal Vertical & Horizontal

9. FrameLayout
 Practice

10. RelativeLayout
 android:layout_above, android:layout_below
– Positions the bottom edge of this view above or below the given anchor view ID.
 android:layout_alignParentBottom, android:layout_alignParentLeft,
android:layout_alignParentRight, android:layout_alignParentTop
– If true, makes the edge of this view match the edge you assign of the parent.
 android:layout_toLeftOf, android:layout_toRightOf
– Positions the right edge of this view to the left or right of the given anchor view
ID.
 android:layout_centerInParent
– If true, centers this child horizontally and vertically within its parent.

11. RelativeLayout
 Practice

12. TableLayout
 TableLayout: android:stretchColumns -
setStretchAllColumns(boolean)
– The zero-based index of the columns to stretch.
 TableRow: android:layout_span
– Defines how many columns this child should span.
 TableRow: android:layout_column
– The index of the column in which this child should be.

13. TableLayout
 Practice

14. GridLayout
 android:columnCount - setColumnCount(int)
– The maxmimum number of columns to create when automatically
positioning children.
 android:rowCount - setRowCount(int)
– The maxmimum number of rows to create when automatically
positioning children.
 android:layout_columnSpan
– The column span: the difference between the right and left boundaries
delimiting the group of cells occupied by this view.
 android:layout_rowSpan
– The row span: the difference between the top and bottom boundaries
delimiting the group of cells occupied by this view.

15. GridLayout
 Practice

16. Sample Code and Slides
 Slides
– http://www.slideshare.net/XavierYin/appunit3
 Sample Code
– https://github.com/xavier0507/TKUSampleCodeUnit3.git

17. References
 Android developers:
– http://developer.android.com/design/index.html