行動 APP 開發管理實務Unit3 - Layout

尹君耀 Xavier Yin

Outline

View & ViewGroup

LinearLayout

FrameLayout

RelativeLayout

TableLayout

GridLayout

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.

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.

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.

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.

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.

LinearLayout

Practice

Horizontal Vertical & Horizontal

FrameLayout

Practice

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.

RelativeLayout

Practice

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.

TableLayout

Practice

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.

GridLayout

Practice

Sample Code and Slides

Slides– http://www.slideshare.net/XavierYin/appunit3

Sample Code– https://github.com/xavier0507/TKUSampleCodeUnit3.git

References

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