1 page.title=Supporting Different Screen Sizes 2 parent.title=Designing for Multiple Screens 3 parent.link=index.html 4 5 trainingnavtop=true 6 next.title=Supporting Different Screen Densities 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"> Smallest-width</a></li> 22 <li><a href="#TaskUseAliasFilters"> </a></li> 23 <li><a href="#TaskUseOriQuali"> </a></li> 24 <li><a href="#TaskUse9Patch"> nine-patch</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> , ;</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> ( <code>"fill_parent"</code> API 8 ) .</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>. News Reader () () .</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 <?xml version="1.0" encoding="utf-8"?> 76 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 77 android:layout_width="match_parent" 78 android:layout_height="match_parent"> 79 <TextView 80 android:id="@+id/label" 81 android:layout_width="match_parent" 82 android:layout_height="wrap_content" 83 android:text="Type here:"/> 84 <EditText 85 android:id="@+id/entry" 86 android:layout_width="match_parent" 87 android:layout_height="wrap_content" 88 android:layout_below="@id/label"/> 89 <Button 90 android:id="@+id/ok" 91 android:layout_width="wrap_content" 92 android:layout_height="wrap_content" 93 android:layout_below="@id/entry" 94 android:layout_alignParentRight="true" 95 android:layout_marginLeft="10dp" 96 android:text="OK" /> 97 <Button 98 android:layout_width="wrap_content" 99 android:layout_height="wrap_content" 100 android:layout_toLeftOf="@id/ok" 101 android:layout_alignTop="@id/ok" 102 android:text="Cancel" /> 103 </RelativeLayout> 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> , , . , . .</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"> Smallest-width</h2> 140 141 <p> , Android 3.2, "" . Dell Streak, Galaxy Tab 7 . - (, 5- 7- ), "" . Android 3.2 Smallest-width.</p> 142 143 <p> dp. , 7 600 dp, , ( ), , <code>large</code> <code>sw600dp</code>. , 600 dp, .</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> , , 600 dp, <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> Smallest-width Android 3.2 . - (small, normal, large xlarge). , 7- , , :</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.</p> 172 173 <p> , . , :</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 <resources> 186 <item name="main" type="layout">@layout/main_twopanes</item> 187 </resources> 188 </pre> 189 </li> 190 191 <li><code>res/values-sw600dp/layout.xml</code>: 192 <pre> 193 <resources> 194 <item name="main" type="layout">@layout/main_twopanes</item> 195 </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 ( 3.2 202 <PH>{@code large}</PH>, <code>sw600dp</code>).</p> 203 204 205 <h2 id="TaskUseOriQuali"> </h2> 206 207 <p> , . , News Reader .</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>, </b>: .</li> 217 </ul></p> 218 219 <p> XML- <code>res/layout/</code>. , :</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"> nine-patch</h2> 255 256 <p> , . , .</p> 257 258 <p> , , , , . nine-patch PNG-, , , .</p> 259 260 <p> , nine-patch. . 4 ( 4 ), nine-patch.</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"><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>. , , nine-patch, PNG-.</p> 274 275 <p> ( <code>android:background="@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> nine-patch.</p> 279 280
