Basic Layouts

API Guide - Layouts

---

---

Basic Gists

• Layout定义了UI的视觉结构。
• 开发者既可以在XML文件中声明UI elements，也可以在运行时实例化layout elements。
• EXAMPLE:

    <!-- Wirte the XML -->

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical" >
        <TextView android:id="@+id/text"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="Hello, I am a TextView" />
        <Button android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello, I am a Button" />
    </LinearLayout>

    /**Load the XML Resource
    ***Override onCreate method 
    **/
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);
    }

• Attributes

  • ID

    Any View object may have an integer ID associated with it, to uniquely identify the View within the tree. When the application is compiled, this ID is referenced as an integer, but the ID is typically assigned in the layout XML file as a string, in the id attribute.

    • Define a unique ID :
      android:id="@+id/my_button"
android:id="@android:id/empty"
       
    • capture the view by ID
      Button myButton = (Button) findViewById(R.id.my_button);

  • Layout Parameters

    XML layout attributes named layout_something define layout parameters for the View that are appropriate for the ViewGroup in which it resides.

    some constants to set the width or height :

    • wrap_content tells your view to size itself to the dimensions required by its content.
    • match_parent tells your view to become as big as its parent view group will allow.

  • Layout Position

  • Size, Padding and Margins

Common Layouts

Each subclass of the ViewGroup class provides a unique way to display the views you nest within it.

常用的Layout包括 :
Linear Layout, Relative Layout, Frame Layout, Web View, List View, Grid View…

Linear Layout

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.

• Layout Weight
  android:layout_weight声明了子视图占据父视图的权重，值越大分配的空间越大，默认的权重是0.

• Example

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>

Relative Layout

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

• Positioning Views
  RelativeLayout可以让子视图根据ID来声明与其他子视图或者父视图的关系。

  • android:layout_alignParentTop
    声明该视图是否与父视图的上沿对齐。
     
  • android:layout_centerVertical
    声明是否在父视图的垂直方向居中。
     
  • android:layout_below
    在某个resource ID视图的下方。
     
  • layout_toRightOf
    该视图在某个resource ID视图的右方。

• Example

<?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"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

Frame Layout

FrameLayout is designed to block out an area on the screen to display a single item.

如果不声明子视图的android:layout_gravity，子视图会重叠在左上角。