topics/ui/declaring-layout.jd

page.title=
page.tags=view,viewgroup
@jd:body

<div id="qv-wrapper">
<div id="qv">
  <h2> </h2>
<ol>
  <li><a href="#write"> XML</a></li>
  <li><a href="#load">  XML</a></li>
  <li><a href="#attributes"></a>
    <ol>
      <li><a href="#id"></a></li>
      <li><a href="#layout-params"> </a></li>
    </ol>
  </li>
  <li><a href="#Position"> </a></li>
  <li><a href="#SizePaddingMargins">,   </a></li>
  <li><a href="#CommonLayouts">  </a></li>
  <li><a href="#AdapterViews">    </a>
    <ol>
      <li><a href="#FillingTheLayout">   </a></li>
      <li><a href="#HandlingUserSelections"> </a></li>
    </ol>
  </li>
</ol>

  <h2> </h2>
  <ol>
    <li>{@link android.view.View}</li>
    <li>{@link android.view.ViewGroup}</li>
    <li>{@link android.view.ViewGroup.LayoutParams}</li>
  </ol>

  <h2>. :</h2>
  <ol>
    <li><a href="{@docRoot}training/basics/firstapp/building-ui.html">
 </a></li> </div>
</div>

<p>     , ,   <a href="{@docRoot}guide/components/activities.html"></a>  <a href="{@docRoot}guide/topics/appwidgets/index.html"> </a>.
    :</p>
<ul>
<li><strong>     XML</strong>.  Android    XML-
  View   ,  ,      .</li>
<li><strong>     </strong>.
      View  ViewGroup (    ). </li>
</ul>

<p> Android                 . ,     XML   ,   ,     ,   .       ,        (   XML)   . </p>

<div class="sidebox-wrapper">
<div class="sidebox">
  <ul>
  <li> <a href="{@docRoot}tools/sdk/eclipse-adt.html">  ADT
 Eclipse</a>        XML&mdash;
   XML    <strong>Layout</strong> ().</li>
  <li>
<a href="{@docRoot}tools/debugging/debugging-ui.html#hierarchyViewer">Hierarchy Viewer</a>
&mdash;       ,
     ,
         .</li>
  <li>   <a href="{@docRoot}tools/debugging/debugging-ui.html#layoutopt">layoutopt</a>
             .</li>
</div>
</div>

<p>      XML   ,             ,    .         .  ,                  . ,     XML         ,     .  ,    XML     ,       .          XML.
    View   ,       {@link android.view.ViewGroup}
{@link android.view.View}.</p>

<p> ,  XML-                    ,     . ,    ,      ,   XML      ,       XML.   ,      .       . ,
  EditText   <code>text</code>,
<code>EditText.setText()</code>. </p>

<p class="note"><strong>.</strong>
<a href="{@docRoot}guide/topics/ui/layout-objects.html">  </a>.
<a href="{@docRoot}resources/tutorials/views/index.html">  Hello </a>      .</p>

<h2 id="write"> XML</h2>

<p>   XML-,    Android,             ,   ,    -  HTML&mdash;    . </p>

<p>         ,        (View)    (ViewGroup).                      ,    .     XML,      {@link android.widget.LinearLayout},
    {@link android.widget.TextView}  {@link android.widget.Button}.</p>
<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    &lt;TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    &lt;Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
&lt;/LinearLayout>
</pre>

<p>     XML     <code>.xml</code>
  <code>res/layout/</code>   Android   . </p>

<p>      XML     <a href="{@docRoot}guide/topics/resources/layout-resource.html"> </a>.</p>

<h2 id="load">  XML</h2>

<p>      XML
{@link android.view.View}.
{@link android.app.Activity#onCreate(android.os.Bundle) Activity.onCreate()}.

<code>{@link android.app.Activity#setContentView(int) setContentView()}</code>,          :
<code>R.layout.<em>layout_file_name</em></code>.
,   XML    <code>main_layout.xml</code>,
     :</p>
<pre>
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}
</pre>

<p>   <code>onCreate()</code>      Android
  (.

<a href="{@docRoot}guide/components/activities.html#Lifecycle"></a>).</p>


<h2 id="attributes"></h2>

<p>  View  ViewGroup     XML.
      View (,  TextView   <code>textSize</code>),
       View,     .
       View,       View (
<code>id</code>).       .
      View,
  ViewGroup  .</p>

<h3 id="id"></h3>

<p>   View       ,       View  .
         ,
    XML       <code>id</code>.
  XML      View
(  {@link android.view.View}),      .
     XML :</p>
<pre>android:id="&#64;+id/my_button"</pre>

<p> @      ,   XML
,           .   (+) ,     ,
        (  <code>R.java</code>).  Android
.      Android      ,
      <code>android</code>,   :</p>
<pre>android:id="&#64;android:id/empty"</pre>
<p>     <code>android</code>       <code>android.R</code>,
     .</p>

<p>        ,      .</p>
<ol>
  <li>           :
<pre>
&lt;Button android:id="&#64;+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="&#64;string/my_button_text"/>
</pre>
  </li>
  <li>
(    <code>{@link android.app.Activity#onCreate(Bundle) onCreate()}</code>):
<pre>
Button myButton = (Button) findViewById(R.id.my_button);
</pre>
  </li>
</ol>
<p>           {@link android.widget.RelativeLayout}.

    .</p>
<p>         ,
     ,     (       ,
      ).</p>


<h3 id="layout-params"> </h3>

<p>  XML,   <code>layout_<em>something</em></code>,
    ,    ViewGroup,    .</p>

<p>  ViewGroup   ,   {@link
android.view.ViewGroup.LayoutParams}.
  ,        ,
   .  1 ,
        (   ).</p>

<img src="{@docRoot}images/layoutparams.png" alt="" />
<p class="img-caption"><strong>1.</strong>
  .</p>

<p> ,   LayoutParams
.      LayoutParams,      ,
       LayoutParams    . </p>

<p>          (<code>layout_width</code>
<code>layout_height</code>),      .
LayoutParams       . <p>

<p>        , , ,
     .
: </p>

<ul>
  <li><var>wrap_content</var>
 ;</li>
  <li><var>match_parent</var> (  API  8 <var> fill_parent</var> )
     ,     .</li>
</ul>

<p> ,
(,  ).      ,
,      (<var>dp</var>), <var>wrap_content</var>
<var>match_parent</var>
       .


<a href="{@docRoot}guide/topics/resources/available-resources.html#dimension"> </a>.</p>


<h2 id="Position"> </h2>
   <p>
      .
   <em></em>  <em></em>,
    .
 .
   </p>

   <p>

{@link android.view.View#getLeft()}  {@link android.view.View#getTop()}.     (  X)
  .
 (  Y)   .
      . ,
  <code>getLeft()</code>  20,  ,      20
      .
   </p>

   <p>
    ,
({@link android.view.View#getRight()}  {@link android.view.View#getBottom()}),     .

 . ,   {@link android.view.View#getRight()}
  : <code>getLeft() + getWidth()</code>.
   </p>


<h2 id="SizePaddingMargins">,   </h2>
   <p>
         . ,
    -.
   </p>

   <p>
      <em> </em>
<em> </em>.
    .
  ,   {@link android.view.View#getMeasuredWidth()}
{@link android.view.View#getMeasuredHeight()}.
   </p>

   <p>
        <em></em>  <em></em> (
<em> </em>  <em> </em>).

.
   ,     .      ,
{@link android.view.View#getWidth()}  {@link android.view.View#getHeight()}.
   </p>

   <p>
         .
    , ,     .

. ,   ,  2,   ,
 2     .
{@link android.view.View#setPadding(int, int, int, int)}.   ,
{@link android.view.View#getPaddingLeft()}, {@link android.view.View#getPaddingTop()},
{@link android.view.View#getPaddingRight()}  {@link android.view.View#getPaddingBottom()}.
   </p>

   <p>
        ,
.      .
{@link android.view.ViewGroup}
{@link android.view.ViewGroup.MarginLayoutParams}.
   </p>

   <p>
<a href="{@docRoot}guide/topics/resources/more-resources.html#Dimension"> </a>.
   </p>


<style type="text/css">
div.layout {
  float:left;
  width:200px;
  margin:0 0 20px 20px;
}
div.layout.first {
  margin-left:0;
  clear:left;
}
</style>


<h2 id="CommonLayouts">  </h2>

<p>    {@link android.view.ViewGroup}
   .         ,
Android.</p>

<p class="note"><strong>.</strong>   ,
       ,
 .      ,      (
   ).</p>

<!--
<h2 id="framelayout">FrameLayout</h2>
<p>{@link android.widget.FrameLayout FrameLayout} is the simplest type of layout
object. It's basically a blank space on your screen that you can
later fill with a single object &mdash; for example, a picture that you'll swap in and out.
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,
partially or totally obscuring them (unless the newer object is transparent).
</p>
-->


<div class="layout first">
  <h4><a href="layout/linear.html"> </a></h4>
  <a href="layout/linear.html"><img src="{@docRoot}images/ui/linearlayout-small.png" alt="" /></a>
  <p>,          .      ,
  .</p>
</div>

<div class="layout">
  <h4><a href="layout/relative.html"> </a></h4>
  <a href="layout/relative.html"><img src="{@docRoot}images/ui/relativelayout-small.png" alt="" /></a>
  <p>           (
   )     (     ).</p>
</div>

<div class="layout">
  <h4><a href="{@docRoot}guide/webapps/webview.html"> -</a></h4>
  <a href="{@docRoot}guide/webapps/webview.html"><img src="{@docRoot}images/ui/webview-small.png" alt="" /></a>
  <p> -.</p>
</div>


<h2 id="AdapterViews" style="clear:left">    </h2>

<p>        ,   ,
{@link android.widget.AdapterView}       .
{@link android.widget.AdapterView}  {@link android.widget.Adapter}
    . {@link android.widget.Adapter}
   {@link android.widget.AdapterView}&mdash; {@link android.widget.Adapter}
  ( , ,      )
 ,      {@link android.widget.AdapterView}.</p>

<p>  ,      ,    :</p>

<div class="layout first">
  <h4><a href="layout/listview.html">   </a></h4>
  <a href="layout/listview.html"><img src="{@docRoot}images/ui/listview-small.png" alt="" /></a>
  <p>       .</p>
</div>

<div class="layout">
  <h4><a href="layout/gridview.html">   </a></h4>
  <a href="layout/gridview.html"><img src="{@docRoot}images/ui/gridview-small.png" alt="" /></a>
  <p>        .</p>
</div>


<h3 id="FillingTheLayout" style="clear:left">   </h3>

<p>   {@link android.widget.AdapterView},   {@link android.widget.ListView}
{@link android.widget.GridView},   {@link android.widget.AdapterView}
{@link android.widget.Adapter},          {@link
android.view.View},     .</p>

<p> Android     {@link android.widget.Adapter},
        {@link android.widget.AdapterView}.
    :</p>

<dl>
  <dt>{@link android.widget.ArrayAdapter}</dt>
    <dd>    ,       .   {@link
android.widget.ArrayAdapter}          {@link
java.lang.Object#toString()}          {@link
android.widget.TextView}.
      <p>,    ,      {@link
android.widget.ListView},   {@link android.widget.ArrayAdapter}
,         :</p>
<pre>
ArrayAdapter&lt;String> adapter = new ArrayAdapter&lt;String>(this,
        android.R.layout.simple_list_item_1, myStringArray);
</pre>
<p>    :</p>
<ul>
  <li>  {@link android.content.Context};</li>
  <li>,     {@link android.widget.TextView}     ;</li>
  <li> .</li>
</ul>
<p>
{@link android.widget.ListView#setAdapter setAdapter()}    {@link android.widget.ListView}:</p>
<pre>
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);
</pre>

      <p>     ,    {@link
java.lang.Object#toString()}    .       ,
  {@link android.widget.TextView} (,
{@link android.widget.ImageView}),   {@link
android.widget.ArrayAdapter}    {@link android.widget.ArrayAdapter#getView
getView()},        .</p>

</dd>

  <dt>{@link android.widget.SimpleCursorAdapter}</dt>
    <dd>    ,        {@link android.database.Cursor}.
 {@link android.widget.SimpleCursorAdapter},   ,
      {@link android.database.Cursor},            {@link android.database.Cursor}
. ,
     ,   ,    {@link
android.database.Cursor},
.          {@link
android.database.Cursor},        ,     ,
     :</p>
<pre>
String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                        ContactsContract.CommonDataKinds.Phone.NUMBER};
int[] toViews = {R.id.display_name, R.id.phone_number};
</pre>
<p>    {@link android.widget.SimpleCursorAdapter}    ,
     ,  {@link android.database.Cursor}      :</p>
<pre>
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
        R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
ListView listView = getListView();
listView.setAdapter(adapter);
</pre>
<p> {@link android.widget.SimpleCursorAdapter}
{@link android.database.Cursor}         {@code
fromColumns}    {@code toViews}.</p>.</dd>
</dl>


<p>            ,
 ,     {@link android.widget.ArrayAdapter#notifyDataSetChanged()}.
    ,         .</p>


<h3 id="HandlingUserSelections"> </h3>

<p>        {@link android.widget.AdapterView},
  {@link android.widget.AdapterView.OnItemClickListener}. :</p>

<pre>
// Create a message handling object as an anonymous class.
private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click
    }
};

listView.setOnItemClickListener(mMessageClickedHandler);
</pre>