Presentation 4

darkfryingpanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

53 εμφανίσεις

Android Layouts

Layouts


Define the user interface for an activity


Layouts are defined in .xml files


within /res/layout folder


different layout can be designed for
lanscape

view


placed within /res/layout
-
land folder


Handful of layouts to choose from


All derived from the class:



android.view.ViewGroup


View class


Any widget or
ViewGroup

placed as part of
interface on an Activity is a View


11 direct subclasses


6
2 indirect subclasses


LinearLayout


TableLayout


EditText


Button


Others


http
://developer.android.com/reference/android/view/View.html

View attributes


Apply to any instance of a View


syntax:
android:layout_attribute_name
=“value”


layout_height

and
layout_width


values:
match_parent

or
wrap_content


fill_parent

deprecated (renamed to
match_parent

as of 2.2)


layout_margin


extra space on all sides of
item


layout_marginX

(i.e. X= Top, Bottom, Right, Left
)


layout_gravity


gravity


text (for labels, buttons, etc.)

Sizing options


preferred units


dp

or dip


device independent pixels


scales size according to screen density


1
dp

is equivalent to 1 pixel on 160 dpi screen


sp



scale
-
independent pixels


scales fonts according to user’s font size


other options


px


actual pixels


mm and in


millimeters and inches


pt



points (1/72”)

Layouts


Available layouts


AbsoluteLayout


Deprecated as of 1.5
-

allowed specific x, y coordinates


Common Layouts


LinearLayout


Default


Allows child items to be placed in a single row or column


TableLayout


Allows child items to be placed in multiple rows and columns


More sophisticated/specialized layouts


RelativeLayout


Allows child items to be placed relative to each other


FrameLayout


Allows child items to be stacked on one another

LinearLayout


Child items placed in single row or column


Important attributes for
LinearLayout


orientation


applies to parent


“vertical” = single column


“horizontal” = single row


layout_width

and
layout_height


decide if the layout should take up:

»

the entire width (height) of the screen

»
minimum width (height) needed

»
specific width (height) desired

Sample .xml file

<?xml version=
"1.0" encoding="utf
-
8"?>

<
LinearLayout

xmlns:android
=
"http://schemas.android.com/apk/res/android"


android:orientation
=
"vertical"


android:layout_width
=

match_parent



android:layout_height
=

match_parent



>


<
TextView




android:layout_width
=

match_parent
"



android:layout_height
=
"
wrap_content




android:layout_margin
=
"2dp“



android:text
=
"View me"


/>


<Button



android:layout_width
=

match_parent
"



android:layout_height
=
"
wrap_content
"



android:layout_margin
=
“2dp"



android:text
=
"Push me"


/>

</
LinearLayout
>

TableLayout


Places items in rows and columns


Important attributes


collapseColumns

(hides columns)


=“*”, =“1”, =“0,3”, etc.


stretchColumns

(displays columns)


layout_span


allows child to span multiple columns

Sample .xml file

<?xml version=
"1.0" encoding="utf
-
8"?>

<
TableLayout

xmlns:android
=“
http://schemas.android.com/apk/res/android”


android:layout_width
=

match_parent



android:layout_height
=

match_parent
"


android:stretchColumns
=
“*"


>


<
TableRow
>



<Button




android:text
=
"Cell 1,1“
/>



<Button




android:text
=
"Cell 1,2”
/>


</
TableRow
>


<
TableRow
>


<Button



android:text
=
"Cell 2,1”
/>


<Button



android:text
=
"Cell 2,2”
/>


</
TableRow
>

</
TableLayout
>

RelativeLayout


Currently the default layout supplied in Eclipse


Tends to work the best with the visual editor


Where child items are in relation to:


parent


each other


Sometimes allows for one layout to be used instead
of layouts within layouts


Many attributes


See documentation on
RelativeLayout.LayoutParams

class

RelativeLayout


Important attributes


layout_X

where X is:


centerInParent


centerHorizontal

(or Vertical)


alignParentTop

(or Bottom or Left or Right)


alignRight

(or Left or Top or Bottom)


(=“@+id/
childIdName
”)


aligns specified edge of each child


often causes overlap


above (or below or
toLeftOf

or
toRightOf
)


(=“@+id/
childIdName
”)


aligns children relatively to each other accordingly

Sample .xml file

<?xml version=
"1.0" encoding="utf
-
8"?>

<
RelativeLayout

xmlns:android
=“
http://schemas.android.com/apk/res/android”


android:layout_width
=

match_parent



android:layout_height
=
"
match_parent



>


<
TextView




android:id
=
"@+id/tv1“



android:layout_width
=
"
wrap_content
"



android:layout_height
=
"
wrap_content




android:layout_centerInParent
=
"true“



android:text
=
"View me“


/>


<Button



android:layout_width
=
"
wrap_content




android:layout_height
=
"
wrap_content
"



android:layout_centerInParent
=
"true"



android:layout_toRightOf
=
"@+id/tv1"



android:text
=
"Push me"


/>

</
RelativeLayout
>

FrameLayout


Places items on top of each other


<?xml version=
"1.0" encoding="utf
-
8"?>

<
FrameLayout

xmlns:android
=“
http://schemas.android.com/apk/res/android”


android:layout_width
=
"
match
_parent



android:layout_height
=
"
match
_parent



>


<
TextView



android:layout_width
=
"
wrap_content




android:layout_height
=
"
wrap_content




android:text
=
"This is big text!“



android:textSize
=
"20pt“


/>


<
TextView



android:layout_width
=
"
wrap_content




android:layout_height
=
"
wrap_content




android:text
=
"I am small...“



android:textSize
=
"8pt"


/>

</
FrameLayout
>

Layout Orientations


Portrait


Default view


Landscape


When device is rotated 90
°


To set specific layouts for each


\
res
\
layout
\
main.xml for portrait layout


layout folder is provided


\
res
\
layout
-
land
\
main.xml for landscape layout


layout
-
land folder must be created


file name and variable names within file must match


not restricted to main.xml

Layout Orientations


Orientation can be locked


screenOrientation

attribute of Activity


android:screenOrientation
=
"portrait"


Each Activity handled separately


can do any combination of locked and unlocked
Activities


can lock all, but must do each individually

Common Views


User
-
interface views placed within layouts


TextView


EditText


Button


CheckBox


RadioButton


Spinner


Many others


Determining a given View’s .xml
attributes


Use Android reference to find class


Example: Button


View XML attributes of the class


Button does not have any listed


View XML attributes of the Ancestor classes


In this case,
TextView

and View


Use eclipse pop
-
up help in .xml file