1 / 32

Lecture 5 Layout

EE575, GCT523. Lecture 5 Layout. Sept. 22,2011. View. The basic building block for user interface components Drawing and event handling Base class for widgets Widgets: create interactive UI components (buttons, text fields, etc.) java.lang.Object android.view.View

morrison
Download Presentation

Lecture 5 Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. EE575, GCT523 Lecture 5 Layout Sept. 22,2011

  2. View • The basic building block for user interface components • Drawing and event handling • Base class for widgets • Widgets: create interactive UI components (buttons, text fields, etc.) • java.lang.Object • android.view.View • android.widget.TextView • android.widget.Button, android.widget.EditText • android.widget.ImageView

  3. ViewGroup • The base class for layouts • Layouts: invisible containers that hold other Views (or other ViewGroups) and define their layout properties • java.lang.Object • android.view.View • android.view.ViewGroup • android.widget.LinearLayout • android.widget.RelativeLayout • android.widget.FrameLayout

  4. android:id The XML attributes of View • an integer id • assigned in the layout XML files • used to find specific views within the view tree • A common pattern is to: • Define a Button in the layout file • <Button android:id = “@+id/my_button”/> • From an Activity, find the Button • Button myButton = (Button) findViewById(R.id.my_button);

  5. layout_width, layout_height [The XML attributes of ViewGroup.LayoutParams] • The size of a view Start Start Start Start android:layout_width android:layout_height WRAP_CONTENT WRAP_CONTENT MATCH_PARENT WRAP_CONTENT WRAP_CONTENT MATCH_PARENT MATCH_PARENT MATCH_PARENT

  6. android:background The XML attributes of View • A drawable to use as the background • Full drawable resource • @[+][package:]type:name • A theme attribute • ?[package:][type:]name • <item name=“panelForegroundColor”>#FF000000</item> • <item name=“panelTextColor”>?panelForegroundColor</item> • A solid color such as “#ff000000” (black) • #rgb, #argb, #rrggbb, #aarrggbb • #ff0000 – red, #0000ff - blue • a - alpha

  7. android:padding The XML attributes of View • Space between the edges of the view and the view’s content • paddingBottom, paddingLeft, paddingRight, paddingTop Start margin

  8. visibility, clickable, longClickable, focusable The XML attributes of View • android:visibility • visible (visible on screen), invisible (not displayed, but space is left for it), gone(completely hidden) • android:clickable • true or false, whether this view reacts to click events • android:longClickable • true/false, whether thiw view reacts to long click events • android:focusable • true/false, whether a view can take focus

  9. TextView • Displays text to the user • The XML Attributes of TextView • android:text • Text to display

  10. textColor, textSize The XML attributes of TextView • android:textColor • #rrggbb, #aarrggbb • android:textSize • sp: scaled pixels based on preferred font size, recommended dimension type • px: pixels • dp: density-independent pixels • 1dp: 160dpi – 1px, 320dpi – 2px • in: inches • mm: millimeters

  11. textStyle, typeFace The XML attributes of TextView • android:textStyle • Default text typeface style • normal, bold, italic, bold|italic, … • android:typeFace • Default text typeface • normal, sans, serif, monospace

  12. TextView Test • <TextViewandroid:text=“Hello”android:textColor=“#ff0000”android:textSize=“20pt”android:textStyle=“italic”/> • <TextViewandroid:text=“안녕하세요”android:textSize=“20sp”android:background=“#0000ff”/> • <TextViewandroid:text=“Good Morning”android:textColor=“#8000ff00”android:textSize=“5mm”android:typeface=“serif”/>

  13. ImageView • Displays an arbitrary image, such as an icon • The XML Attributes of ImageView • src • Sets a drawable as the content of this ImageView • A reference to another resource - @[+][package:]type:name • A theme attribute in the form - ?[package:][type:]name • A Color value - #rgb, #argb, #rrggbb, #aarrggbb

  14. res/drawable • Three folders according to the resolution • from SDK 1.6 • Resolution – hdpi(high), ldpi(low), mdpi(middle) • Image format – jpg, gif, png(recommended) • File name – all lower case letters

  15. tint, maxHeight, maxWidth The XML attributes of ImageView • android:tint • Set a tinting color for the image • Usually transparent colors • android:maxHeight • A maximum height for this view • android:maxWidth • A maximum width for this view • android:adjustViewBounds • true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable

  16. ImageView Test • <ImageViewandroid:src=“@drawable/pride”/> • <ImageViewandroid:src=“@drawable/pride”android:maxHeight=“70px”android:maxWidth=“120px”android:adjustViewBounds=“true”/> • <ImageViewandroid:src=“@drawable/dog”android:tint=“#4000ff00”/>

  17. EditText, Button

  18. LinearLayout • Arranges its children in a single column or a single row • The XML Attributes of LinearLayout • android:orientation • vertical, horizontal Btn1 Btn1 Btn2 Btn3 Btn2 Btn3

  19. android:gravity The XML attributes of LinearLayout • Specifies how to place the contents • one or more (separated by |) of the following:

  20. android:gravity (cont) The XML attributes of LinearLayout • default=“left|top” top fill_vertical fill_horizontal center_vertical center center_vertical|right left center_horizontal right bottom

  21. android:baselineAligned The XML attributes of LinearLayout • align its children’s baselines • true or false. The default value is true. baselineAligned=true baselineAligned=false

  22. layout_weight The XML attributes of LinearLayout.LayoutParams • android:layout_weight • stretched in proportion to values among all views 1:3:1 1:2:3

  23. layout_margin, padding • android:layout_margin • specifies extra space outside the view’s bounds • android:layout_marginBottom, android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop layout_margin = “10px” layout_margin = “10px” padding = “10px”

  24. RelativeLayout • the positions of the children • relative to each other or to the parent • The XML attributes of RelativeLayout.LayoutParams • layout_above, layout_below, layout_toLeftOf, layout_toRightOf, alignLeft, alignTop, alignRight, alignBottom, alignParentLeft, alignParentTop, alignParentRight, alignParentBottom, … A A layout_alignTop=“@id/a” layout_below=“@id/a”

  25. AbsoluteLayout • specify exact locations of its children

  26. FrameLayout • all children are pegged to the top left of the screen • The most recently added child on top

  27. TableLayout • arranges its children into rows and columns

  28. Nested Layout • <LinearLayout … android:orientation=“vertical” ><TextView… /> <TableLayout … > <TableRow> … </TableRow> <TableRow> … </TableRow> </TableLayout> <LinearLayout …android:orientation=“horizontal”> <TextView …/> <TextView …/> <TextView …/> </LinearLayout></LinearLayout>

  29. Change Attributes in Runtime • android:orientation • public void setOrientation (int orientation) • android:gravity • public void setGravity (int gravity) • http://developer.android.com/reference

  30. Layout parameters • layout_something • layout_weight (only for LinearLayout, not for widget) • text (for TextView widget), src (for ImageView widget)

  31. Layout Parameters

  32. References • http://developer.android.com/reference/packages.html • http://developer.android.com/guide/topics/ui/declaring-layout.html • http://developer.android.com/guide/topics/ui/index.html • 아이러브 안드로이드 프로그래밍, 서윤정, 황연주 공저, INFINITY BOOKS • 안드로이드 프로그래밍 정복, 김상형 저, 한빛미디어

More Related