134 lines
5.0 KiB
Plaintext
134 lines
5.0 KiB
Plaintext
page.title=Linear Layout
|
|
parent.title=Hello, Views
|
|
parent.link=index.html
|
|
@jd:body
|
|
|
|
<p>{@link android.widget.LinearLayout} is a {@link android.view.ViewGroup} that displays child
|
|
{@link android.view.View} elements in a linear direction, either vertically or horizontally.</p>
|
|
|
|
<p>You should be careful about over-using the {@link android.widget.LinearLayout}. If you begin
|
|
nesting multiple {@link android.widget.LinearLayout}s, you may want to consider using a {@link
|
|
android.widget.RelativeLayout} instead.</p>
|
|
|
|
<ol>
|
|
<li>Start a new project named <em>HelloLinearLayout</em>.</li>
|
|
<li>Open the <code>res/layout/main.xml</code> file and insert the following:
|
|
<pre>
|
|
<?xml version="1.0" encoding="utf-8"?>
|
|
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
|
android:orientation="vertical"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="fill_parent">
|
|
|
|
<LinearLayout
|
|
android:orientation="horizontal"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1">
|
|
<TextView
|
|
android:text="red"
|
|
android:gravity="center_horizontal"
|
|
android:background="#aa0000"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="green"
|
|
android:gravity="center_horizontal"
|
|
android:background="#00aa00"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="blue"
|
|
android:gravity="center_horizontal"
|
|
android:background="#0000aa"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="yellow"
|
|
android:gravity="center_horizontal"
|
|
android:background="#aaaa00"
|
|
android:layout_width="wrap_content"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1"/>
|
|
</LinearLayout>
|
|
|
|
<LinearLayout
|
|
android:orientation="vertical"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="fill_parent"
|
|
android:layout_weight="1">
|
|
<TextView
|
|
android:text="row one"
|
|
android:textSize="15pt"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="wrap_content"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="row two"
|
|
android:textSize="15pt"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="wrap_content"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="row three"
|
|
android:textSize="15pt"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="wrap_content"
|
|
android:layout_weight="1"/>
|
|
<TextView
|
|
android:text="row four"
|
|
android:textSize="15pt"
|
|
android:layout_width="fill_parent"
|
|
android:layout_height="wrap_content"
|
|
android:layout_weight="1"/>
|
|
</LinearLayout>
|
|
|
|
</LinearLayout>
|
|
</pre>
|
|
|
|
<p>Carefully inspect this XML. There is a root {@link android.widget.LinearLayout} that defines
|
|
its orientation to be vertical—all child {@link android.view.View}s (of which it has two) will
|
|
be stacked vertically. The first child is
|
|
another {@link android.widget.LinearLayout} that uses a horizontal orientation and the second child
|
|
is a {@link android.widget.LinearLayout} that uses a vertical orientation. Each of these nested
|
|
{@link android.widget.LinearLayout}s contain several {@link android.widget.TextView} elements, which
|
|
are oriented with each other in the manner defined by their parent {@link
|
|
android.widget.LinearLayout}.</p>
|
|
</li>
|
|
<li>Now open <code>HelloLinearLayout.java</code> and be sure it loads the
|
|
<code>res/layout/main.xml</code> layout in the
|
|
{@link android.app.Activity#onCreate(Bundle) onCreate()} method:</p>
|
|
<pre>
|
|
public void onCreate(Bundle savedInstanceState) {
|
|
super.onCreate(savedInstanceState);
|
|
setContentView(R.layout.main);
|
|
}
|
|
</pre>
|
|
<p>The {@link android.app.Activity#setContentView(int)} method loads the
|
|
layout file for the {@link android.app.Activity}, specified by the resource
|
|
ID — <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
|
|
file.</p>
|
|
</li>
|
|
<li>Run the application.</li>
|
|
</ol>
|
|
<p>You should see the following:</p>
|
|
<img src="images/hello-linearlayout.png" width="150px" />
|
|
|
|
<p>Notice how the XML attributes define each View's behavior. Try
|
|
experimenting with different values for <code>android:layout_weight</code> to see how the screen
|
|
real estate is distributed based on the weight of each element. See the <a
|
|
href="{@docRoot}guide/topics/ui/layout-objects.html#linearlayout">Common Layout Objects</a>
|
|
document for more about how {@link android.widget.LinearLayout} handles the
|
|
<code>android:layout_weight</code> attribute.</p>
|
|
|
|
<h3>References</h3>
|
|
<ul>
|
|
<li>{@link android.widget.LinearLayout}</li>
|
|
<li>{@link android.widget.TextView}</li>
|
|
</ul>
|
|
|
|
|