مطالب تئوری - بخش 6

آشنایی با Layout Managerها و ViewGroup ها

آدرس مطلب اصلی: http://www.vogella.com/articles/Android/article.html#d830e2107

این مطالب از سایت شخصی Lars Vogel آورده شده است که نمونه مثالها و آموزشهای جالبی را برای یادگیری اندروید در اختیار شما می گذارد.

ادامه مطلب را مشاهده بفرمایید...

Layout Manager and ViewGroups

22.1. Available Layout Manager

A layout manager is a subclass of ViewGroup and is responsible for the layout of itself and its child Views. Android supports different default layout managers.

As of Android 4.0 the most relevant layout managers are LinearLayout, FrameLayout, RelativeLayout and GridLayout.

All layouts allow the developer to define attributes. Children can also define attributes which may be evaluated by their parent layout.

AbsoluteLayoutLayout is deprecated and TableLayout can be implemented more effectively via GridLayout

Children can specify there desired width and height via the following attributes.

Table 5. Width and height definition

Attribute	Description
android:layout_width	defines the width of the widget
android:layout_height	defines the height of the widget

Widgets can uses fixed sizes, e.g. with the dp definition, for example 100dp. While dp is a fixed size it will scale with different device configurations.

The match_parent value tells the to maximize the widget in its parent. The wrap_content value tells the layout to allocate the minimum amount so that widget is rendered correctly.

22.2. FrameLayout

FrameLayout is a layout manager which draws all child elements on top of each other. Which allows to create nice visual effects.

The following screenshot shows the Gmail application which uses FrameLayout to display several button on top of another layout.

22.3. LinearLayout

LinearLayout puts all its child elements into a single column or row depending on the android:orientation attribute. Possible values for this attribute are horizontal and vertical, horizontal is the default value.

If horizontal is used the child elements are layouted as indicated by the following picture.

Vertial would result in a layout as depicted in the following picture.

LinearLayout can be nested to achieve more complex layouts.

LinearLayout supports assigning a weight to individual children via the android:layout_weight layout parameter. This value specifies how much of the extra space in the layout is allocated to the View. If for example you have two widgets and the first one defines a layout_weight of 1 and the second of 2, the first will get 1/3 of the available space and the other one 2/3. You can also set the layout_width to zero to have always a certain ratio.

22.4. RelativeLayout

RelativeLayout allow to position the widget relative to each other. This allows for complex layouts.

A simple usage for RelativeLayout is if you want to center a single component. Just add one component to the RelativeLayout and set the android:layout_centerInParent attribute to true.

<?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:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
         />

</RelativeLayout> 

22.5. GridLayout

GridLayout was introduced with Android 4.0. This layout allows you to organize a view into a Grid. GridLayout separates its drawing area into: rows, columns, and cells.

You can specify how many columns you want for define for each View in which row and column it should be placed and how many columns and rows it should use. If not specified GridLayout uses defaults, e.g. one column, one row and the position of a View depends on the order of the declaration of the Views.

The following layout file defines a layout using GridLayout.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:useDefaultMargins="true" >

    <TextView
        android:layout_column="0"
        android:layout_columnSpan="3"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"
        android:layout_row="0"
        android:text="User Credentials"
        android:textSize="32dip" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="1"
        android:text="User Name: " >
    </TextView>

    <EditText
        android:id="@+id/input1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="1"
        android:ems="10" />

    <TextView
        android:layout_column="0"
        android:layout_gravity="right"
        android:layout_row="2"
        android:text="Password: " >
    </TextView>

    <EditText
        android:id="@+id/input1"
        android:layout_column="1"
        android:layout_columnSpan="2"
        android:layout_row="2"
        android:ems="8" />

    <Button
        android:id="@+id/button1"
        android:layout_column="2"
        android:layout_row="3"
        android:text="Login" />

</GridLayout> 

This creates a user interface similar to the following screenshot.

22.6. ScrollView

The ScrollView class can be used to contain one View that might be to big too fit on one screen. ScrollView will is this case display a scroll bar to scroll the context.

Of course this View can be a layout which can then contain other elements.

The following code shows an example layout file which uses a ScrollView.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="8dip"
        android:paddingRight="8dip"
        android:paddingTop="8dip"
        android:text="This is a header"
        android:textAppearance="?android:attr/textAppearanceLarge" >
    </TextView>

</ScrollView> 

The android:fillViewport="true" attribute ensures that the scrollview is set to the full screen even if the elements are smaller then one screen.