[Android] UI: View & ViewGroup (Layout)

1. Document
   
   • Declaring Layout
     http://developer.android.com/guide/topics/ui/declaring-layout.html
     
     
   • Common Layout Objects & Important ViewGroup
     http://developer.android.com/guide/topics/ui/layout-objects.html
     
     
   • Layout Resource Format
     http://developer.android.com/guide/topics/resources/layout-resource.html
     
     
   • Sample: ApiDemos->View->Layouts
     
     
   • xxx
     
     
2. ViewGroup
   "Layouts" are views derived from ViewGroup that provide a unique layout model for its child views.
   
   Android provides a number of ready-made views that you can use to design and organize your layout. You can also subclass the View and ViewGroup classes (or existing subclasses) to create your own widgets and layouts and apply them to your activity layout.
   
   Layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user.
   All layout inherits from ViewGroup (The parent class of ViewGroup is View).
   
   
3. How to declare layout
   You can declare layout in xml file, or in code at runtime. The advantages to declare layout in xml are:
   - Separate presentation of application from code.
   - Make it easier to visualize the structure of your UI, so it's easier to debug problems.
   
4. Layout Parameters (LayoutParams)
   
   Every ViewGroup class implements a nested class that extends ViewGroup.LayoutParams.
   
   Each child element must define LayoutParams that are appropriate for its parent, though it may also define different LayoutParams for its own children.
   
   XML layout attributes named android:layout_something define layout parameters for the View that are appropriate for the ViewGroup in which it resides.
   
5. FrameLayout
   All child elements of the FrameLayout are pinned to the top left corner of the screen; you cannot specify a different location for a child view. Subsequent child views will simply be drawn over previous ones (Z-order), partially or totally obscuring them (unless the newer object is transparent).
   
   
6. LinearLayout
   aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute. All children are stacked one after the other, so a vertical list will only have one child per row.
   
   
• XML Attributes
• android:gravity Vs android:layout_gravity
  Any object has attribute gravity, it means how to place of contens of the object.
  Only children of LinearLayout has attribute layout_gravity, it means how to place the children objects within the LinearLayout.
  
• android:layout_weight
  Only the children of LinearLayout has such attribute, it is defined in LinearLayout.LayoutParams. It means how much of the extra space in the LinearLayout will be allocated to the view associated with these LayoutParams, in other words, the children with layout_weight attribute will occur the remaining space of LinearLayout. Child views can specify an integer weight value, default weight is zero.
  Specify 0 if the view should not be stretched. Otherwise the extra pixels will be pro-rated among all views whose weight is greater than 0.
  
  Sample:
  xmlns:android=""
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
     
          android:background="#FF0000"
          android:layout_width="wrap_conent"
          android:layout_height="match_parent"
          android:text="First Row"/>
  
     
          android:background="#00FF00"
          android:layout_width="0dip"
          android:layout_height="match_parent"
          android:layout_weight="1"/>
  
     
          android:background="#0000FF"
          android:layout_width="0dip"
          android:layout_height="match_parent"
          android:layout_weight=2"/>
  
     
  android:background="#888888"
          android:layout_width="0dip"
          android:layout_height="match_parent"
          android:layout_weight="2"/>
  
  
  
  Notes:
  The width of 1st Textview will be set to just fit its contents.
  Other 3 TextView set layout_weight attribute, so the width of 2nd TextView will be set to occupy 1/(1+2+2) = 20% of left free space for LinearLayout,
  and the 3rd TextView will occupy 2/(1+2+2) = 40%, the 4th TextView will occupy 2/(1+2+2) = 40% as well.
  
  If the orientation of LinearLayout is vertical, the the extra height will be allocated.
  
• Sample - Customize a editbox with some promts in the front, and an image button in the end.
  
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:addStatesFromChildren="true"
          android:gravity="center_vertical"
          android:paddingRight="0dip"
          android:background="@android:drawable/edit_text">
  
         
                      android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/linear_layout_10_from"
              android:textColor="?android:attr/textColorSecondary"
              android:textAppearance="?android:attr/textAppearanceLargeInverse"
          />
  
         
                      android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_weight="1"
              android:singleLine="true"
              android:background="@null"
          />
  
         
                      style="@android:style/Widget.Button.Inset"
              android:src="@android:drawable/star_big_on"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="2dip"
              android:layout_marginRight="2dip"
              android:layout_marginBottom="2dip"
              android:padding="10dip"
          />
  
     
  
  
• xxx
  
• FAQ
• Occupy the left space of screen (Vertically: <<>>)
    - The out-most layout must be LinearLayout
    - Add an child layout, and set the following attributies:
        # android:layout_weight="1.0" (can be any non-zero value)
    - The value of android:layout_height can be "wrap_content" or "0dip"
  xmlns:android=""
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
  
     
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/baseline_3_explanation" />
  
  
  
     
          android:orientation="horizontal"
          android:layout_width="fill_parent"
          android:layout_weight="1.0"
          android:layout_height="0dip">
  
     
  
  
• Occupy the left space of screen (Horizital: <<>>)
    - The out-most layout must be LinearLayout
    - Add an child layout, and set the following attributies:
        # android:layout_weight="1.0" (can be any non-zero value)
    - The value of android:layout_width can be "wrap_content" or "0dip"
  xmlns:android=""
      android:orientation="horizentao"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
  
     
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/baseline_3_explanation" />
  
  
  
     
          android:orientation="horizontal"
          android:layout_width="wrap_content"
          android:layout_weight="1.0"
          android:layout_height="fill_parent">
  
     
  
  
• Scretch the height of the 1st component.
  xml version="1.0" encoding="utf-8"?>
  
  xmlns:android=""
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      android:id="@+id/list"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1.0" />
  
     
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="Button" />
  
  
  
• xxx
  
• xxx
  
  
7. TableLayout
   positions its children into rows and columns.
   
   
1. XML Attribute
• android:stretchColumns
  Stretch the specified column(s). The first column index is 0. Multiple columns must be separated with ',', eg. "1,2,5"
  
• android:collapseColumns
  Hide the specified column(s), and give up space, like android:visibility="gone".
  
• android:shrinkColumns
  Wrap contents in the specified column(s) if the contents are very long. By default, Android do not wrap their content, all contents will display on a line.
  
• android:layout_column
  Specify which column the corrent component is in the current row.
  
• android:layout_span
  Specify how many columns the current component will occupy.
  
• xxx
  
2. FAQ
• Generally, the children of TableLayout can be TableRow, you can add other view as its child, for example, you can add a horizental bar as its child:
        background="#FF909090"
• Ellipsize TextView
  shrinkColumns="1"
     xxx>
    
        
         singleLine="true"
            android:ellipsize="middle"
            android:text="xxx" />
    
  
  
• xxx
  
3. xxx
   
8. RelativeLayout
   lets child views specify their position relative to the parent view or to each other (specified by ID).
   
   
1. ...
2. XML Attributes
• android:layout_alignBaseLine
  The chiledren of RelativeLayout has this attributies, it positions the baseline of this view on the baseline of given anchor view Id, such as android:layout_alignBase="@id/xxx". Sample:
  xmlns:android=""
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
      android:id="@+id/anchor"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:textSize="20sp"
          android:text="@string/baseline_6_multi_line" />
  
     
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignBaseline="@id/anchor"
          android:layout_alignRight="@id/anchor"
          android:text="@string/baseline_6_baseline" />
  
  
  
  For the above sample, since android:layout_alignBaseline is set, the TextView is IN the right of the EditText. Otherwise, the TextView is ON the right of EditText.
  
  
• xx
  
3. FAQ
• Stretch
  - In its child component, if the layout_above/layout_below, or layout_alignXXX(Such as layout_alignLeft/layout_alignRight) is set, the space of the compent will be scretched. Sample:
  xml version="1.0" encoding="utf-8"?>
  xmlns:android=""
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  
     
     
          android:id="@+id/view1"
          android:background="@drawable/red"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:text="@string/relative_layout_1_top"/>
  
     
     
          android:id="@+id/view2"
          android:background="@drawable/green"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:text="@string/relative_layout_1_bottom"/>
  
     
     
          android:id="@+id/view3"
          android:background="@drawable/yellow"
          android:layout_width="match_parent"
          android:layout_height="0dip"
          android:layout_above="@id/view2"
          android:layout_below="@id/view1"
          android:text="@string/relative_layout_1_center"/>
  
  
  
  
  Note: The textView @+id/view3 will be scretched.
  
• xxx
  
4. Sample
1. A text view sith scroll bar at the top of window, and a button locates at the bottom of the window.
   
         android:layout_alignParentTop="true"
      android:layout_above="@+id/my_id"
      ...>
         
     
          ...
      android:layout_alignParentBottom="true"
      />
   
5. ...
   
9. AbsoluteLayout
   A layout that lets you specify exact locations (x/y coordinates) of its children. Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning.
   
10. ScrollView
1. XML Attribute
• android:scrollbarStyle
  Specify whether to place scroll bar.
  Add ScrollView out of target view, i.e
  
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      >
  
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" />
  
          android:id="@+id/headertable"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:stretchColumns="1"
          android:collapseColumns="2"/>
  android:layout_width="fill_parent"
          android:layout_height="wrap_content">
  >
  
  Issue: if scroll bar overwrap contents within the scrollview, you can add android:scrollbarStype="insideInset" to ScrollView, i.e.
  
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:scrollbarStype="insideInset"
      >
  
• xxx
  
2. FAQ
• ScrollView can be used as top layout
• ScrollView only can contains single component (Such as EditText) or layout
  
3. xxx
   
11. Inflate Layout From XML File
    LayoutInflater inflater = (LayoutInflater)context.getSystemServiceContext.LAYOUT_INFLATER_SERVICE);
    inflater.inflate(xxxxxx)
    or
    LayoutInflater.from(context).inflate(xxx)
    
12. What is BaseLine
    (From: )
    The term baseline comes from typography (%28typography%29). It's the invisible line letters in text sit on.For example, imagine you put two TextView elements next to each other. You give the second TextView a big padding (say 20dp). If you add layout_alignBaseline to the second element, the text will "scoot up" to align with the baseline of the first element. The text from both elements will appear as if they were written on the same invisible line.
    
    LinearLayout, and views in RelativeLayout can be set baseline attribute.
    
13. ...