Home | History | Annotate | Download | only in multiscreen 
      1 page.title=   
      2 parent.title=  
      3 parent.link=index.html
      4 
      5 trainingnavtop=true
      6 next.title=   
      7 next.link=screendensities.html
      8 
      9 @jd:body
     10 
     11 
     12 <!-- This is the training bar -->
     13 <div id="tb-wrapper"> 
     14 <div id="tb"> 
     15 
     16 <h2> </h2>
     17 <ol>
     18   <li><a href="#TaskUseWrapMatchPar">'wrap_content'  'match_parent' </a></li>
     19   <li><a href="#TaskUseRelativeLayout">RelativeLayout </a></li>
     20   <li><a href="#TaskUseSizeQuali">  </a></li>
     21   <li><a href="#TaskUseSWQuali">   </a></li>
     22   <li><a href="#TaskUseAliasFilters">  </a></li>
     23   <li><a href="#TaskUseOriQuali">  </a></li>
     24   <li><a href="#TaskUse9Patch">-  </a></li>
     25 </ol>
     26 
     27 <h2></h2>
     28 
     29 <ul>
     30   <li><a href="{@docRoot}guide/practices/screens_support.html">  </a></li>
     31 </ul>
     32 
     33 <h2> </h2> 
     34  
     35 <div class="download-box"> 
     36 <a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button">  </a>
     37 <p class="filename">NewsReader.zip</p> 
     38 </div> 
     39  
     40 </div> 
     41 </div> 
     42 
     43 <p>       .</p>
     44 <ul> 
     45   <li>    </li> 
     46   <li>    UI  </li> 
     47   <li>    </li>
     48   <li>   </li> 
     49 </ul> 
     50 
     51 
     52 <h2 id="TaskUseWrapMatchPar">'wrap_content'  'match_parent' </h2> 
     53 
     54 <p>             <code>"wrap_content"</code>  <code>"match_parent"</code>  . <code>"wrap_content"</code>              , <code>"match_parent"</code>(API  8  <code>"fill_parent"</code> )       .</p>
     55 
     56 <p>   <code>"wrap_content"</code>          <code>"match_parent"</code>         .    .</p>
     57 
     58 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}
     59 
     60 <p>      <code>"wrap_content"</code>  <code>"match_parent"</code>     .          .</p>
     61 
     62 <p>         .       .</p>
     63 
     64 <img src="{@docRoot}images/training/layout-hvga.png" />
     65 <p class="img-caption"><strong> 1.</strong>  ()   ()    </p>
     66 
     67 
     68 <h2 id="TaskUseRelativeLayout">RelativeLayout </h2> 
     69 
     70 <p>    <PH>{@link android.widget.LinearLayout}  </PH> <code>"wrap_content"</code>  <code>"match_parent"</code>   .  <PH>{@link android.widget.LinearLayout}</PH>          <PH>{@link android.widget.LinearLayout}</PH>   .                  <PH>{@link android.widget.RelativeLayout}</PH>       .      ,      .</p>
     71 
     72 <p>   .</p>
     73 
     74 <pre>
     75 &lt;?xml version="1.0" encoding="utf-8"?&gt;
     76 &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     77     android:layout_width="match_parent"
     78     android:layout_height="match_parent"&gt;
     79     &lt;TextView
     80         android:id="&#64;+id/label"
     81         android:layout_width="match_parent"
     82         android:layout_height="wrap_content"
     83         android:text="Type here:"/&gt;
     84     &lt;EditText
     85         android:id="&#64;+id/entry"
     86         android:layout_width="match_parent"
     87         android:layout_height="wrap_content"
     88         android:layout_below="&#64;id/label"/&gt;
     89     &lt;Button
     90         android:id="&#64;+id/ok"
     91         android:layout_width="wrap_content"
     92         android:layout_height="wrap_content"
     93         android:layout_below="&#64;id/entry"
     94         android:layout_alignParentRight="true"
     95         android:layout_marginLeft="10dp"
     96         android:text="OK" /&gt;
     97     &lt;Button
     98         android:layout_width="wrap_content"
     99         android:layout_height="wrap_content"
    100         android:layout_toLeftOf="&#64;id/ok"
    101         android:layout_alignTop="&#64;id/ok"
    102         android:text="Cancel" /&gt;
    103 &lt;/RelativeLayout&gt;
    104 </pre>
    105 
    106 <p> 2   QVGA    .</p>
    107 
    108 <img src="{@docRoot}images/training/relativelayout1.png" />
    109 <p class="img-caption"><strong> 2.</strong> QVGA ( ) </p>
    110 
    111 <p> 3       .</p>
    112 
    113 <img src="{@docRoot}images/training/relativelayout2.png" />
    114 <p class="img-caption"><strong> 3.</strong> WSVGA ( ) </p>
    115 
    116 <p>      <PH>{@link android.widget.RelativeLayout.LayoutParams}</PH>.</p>
    117 
    118  
    119 <h2 id="TaskUseSizeQuali">  </h2> 
    120 
    121 <p>        .                      .                  .         (:     )     <a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers"> </a>  .</p>
    122 
    123 <p>      ' (two pane)'  (         ).   TV                .        .</p>
    124 
    125 <ul>
    126   <li><code>res/layout/main.xml</code>,  () :
    127 
    128 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    129 </li>
    130   <li><code>res/layout-large/main.xml</code>,   :
    131 
    132 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    133 </li>
    134 </ul>
    135 
    136 <p>     <code>large</code>    .   (: 7  )     .       .</p>
    137 
    138 
    139 <h2 id="TaskUseSWQuali">   </h2>
    140 
    141 <p>Android 3.2         Dell Streak,  Galaxy   7    ''   .     ''    (: 5  7 )        .  Android Android 3.2 ' '   .</p>
    142 
    143 <p>    dp         .    7  600dp         UI (    )              ,      600dp      <code>large</code>    <code>sw600dp</code>  .</p>
    144 
    145 <ul>
    146   <li><code>res/layout/main.xml</code>,  () :
    147 
    148 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    149 </li>
    150   <li><code>res/layout-sw600dp/main.xml</code>,   :
    151 
    152 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    153 </li>
    154 </ul>
    155 
    156 <p>   600dp   <code>layout-sw600dp/main.xml</code>( )      <code>layout/main.xml</code> ( )    .</p>
    157 
    158 <p> Android 3.2   <code>sw600dp</code>             <code>large</code>    .  <code>res/layout-large/main.xml</code>       <code>res/layout-sw600dp/main.xml</code>  .           .</p>
    159 
    160 
    161 <h2 id="TaskUseAliasFilters">  </h2> 
    162 
    163 <p>   Android 3.2     .        (, ,   )   .      UI  7 , TV       UI  UI     .</p>
    164 
    165 <p><ul>
    166 <li><code>res/layout/main.xml:</code>   </li>
    167 <li><code>res/layout-large:</code>   </li>
    168 <li><code>res/layout-sw600dp:</code>   </li>
    169 </ul></p>
    170 
    171 <p>     Android 3.2       Android    TV     .</p>
    172 
    173 <p>       TV            .       .</p>
    174 
    175 <ul>
    176 <li><code>res/layout/main.xml</code>,   </li>
    177 <li><code>res/layout/main_twopanes.xml</code>,   </li>
    178 </ul>
    179 
    180 <p>     .</p>
    181 
    182 <p><ul>
    183 <li><code>res/values-large/layout.xml</code>:
    184 <pre>
    185 &lt;resources>
    186     &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
    187 &lt;/resources>
    188 </pre>
    189 </li>
    190 
    191 <li><code>res/values-sw600dp/layout.xml</code>:
    192 <pre>
    193 &lt;resources>
    194     &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
    195 &lt;/resources>
    196 </pre>
    197 
    198 </li>
    199 </ul></p>
    200 
    201 <p>            <PH>{@code main}</PH>  <PH>{@code main_twopanes}    .</PH>   <code>large</code>  <code>sw600dp</code>   Android     TV (3.2     TV
    202 <PH>{@code large}</PH>,3.2   <code>sw600dp</code> ).</p>
    203 
    204 
    205 <h2 id="TaskUseOriQuali">  </h2> 
    206 
    207 <p>                 .            .</p>
    208 
    209 <p><ul>
    210 <li><b> , :</b>  ,  </li>
    211 <li><b> , :</b>  ,  </li>
    212 <li><b>7 , :</b>  ,   </li>
    213 <li><b>7 , :</b>  , ,   </li>
    214 <li><b>10 , :</b>  , ,   </li>
    215 <li><b>10 , :</b>  , ,   </li>
    216 <li><b>TV, :</b>  , ,   </li>
    217 </ul></p>
    218 
    219 <p>    <code>res/layout/</code>  XML  .                .</p>
    220 
    221 <p><code>res/layout/onepane.xml:</code></p>
    222 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    223 
    224 <p><code>res/layout/onepane_with_bar.xml:</code></p>
    225 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}
    226 
    227 <p><code>res/layout/twopanes.xml</code>:</p>
    228 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    229 
    230 <p><code>res/layout/twopanes_narrow.xml</code>:</p>
    231 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes_narrow.xml all}
    232 
    233 <p>                   .</p>
    234 
    235 <p><code>res/values/layouts.xml</code>:</p>
    236 {@sample development/samples/training/multiscreen/newsreader/res/values/layouts.xml all}
    237 
    238 <p><code>res/values-sw600dp-land/layouts.xml</code>:</p>
    239 {@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-land/layouts.xml
    240 all}
    241 
    242 <p><code>res/values-sw600dp-port/layouts.xml</code>:</p>
    243 {@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-port/layouts.xml
    244 all}
    245 
    246 <p><code>res/values-large-land/layouts.xml</code>:</p>
    247 {@sample development/samples/training/multiscreen/newsreader/res/values-large-land/layouts.xml all}
    248 
    249 <p><code>res/values-large-port/layouts.xml</code>:</p>
    250 {@sample development/samples/training/multiscreen/newsreader/res/values-large-port/layouts.xml all}
    251 
    252 
    253 
    254 <h2 id="TaskUse9Patch">-  </h2>
    255 
    256 <p>             .            .</p>
    257 
    258 <p>                   .                PNG  -   .</p>
    259 
    260 <p>          -  .  -    ( 4,   4  ).</p>
    261 
    262 <img src="{@docRoot}images/training/button.png" />
    263 <p class="img-caption"><strong> 4.</strong> <code>button.png</code></p>
    264 
    265 <p>    <ode
    266 href="{@docRoot}tools/help/draw9patch.html">SDK <code>draw9patch</code></a> (<code>tools/</code>  ) .               .                   5 .</p>
    267 
    268 <img src="{@docRoot}images/training/button_with_marks.png" />
    269 <p class="img-caption"><strong> 5.</strong> <code>button.9.png</code></p>
    270 
    271 <p>       .                    .</p>
    272 
    273 <p> <code>.9.png</code>   .       PNG   -        .</p>
    274 
    275 <p><code>android:background="&#64;drawable/button"</code>       6             .</p>
    276 
    277 <img src="{@docRoot}images/training/buttons_stretched.png" />
    278 <p class="img-caption"><strong> 6.</strong>   <code>button.9.png</code> -  </p>
    279 
    280