Android - UI Design Tutorial

<p >In this chapter we will look at the different UI components of android screen. This chapter also covers the tips to make a better UI design and also explains how to design a UI.</p> <h2 >UI screen components</h2> <p >A typical user interface of an android application consists of action bar and the application content area.</p> <ol class="list" > <li > <p >Main Action Bar</p> </li> <li > <p >View Control</p> </li> <li > <p >Content Area</p> </li> <li > <p >Split Action Bar</p> </li> </ol> <p >These components have also been shown in the image below &minus;</p> <p><img alt="Anroid UI Tutorial" src="http://www.tutorialspoint.com/android/images/ui1.jpg" /></p> <h2 >Understanding Screen Components</h2> <p >The basic unit of android application is the activity. A UI is defined in an xml file. During compilation, each element in the XML is compiled into equivalent Android GUI class with attributes represented by methods.</p> <h3 >View and ViewGroups</h3> <p >An activity is consist of views. A view is just a widget that appears on the screen. It could be button e.t.c. One or more views can be grouped together into one GroupView. Example of ViewGroup includes layouts.</p> <h3 >Types of layout</h3> <p >There are many types of layout. Some of which are listed below:</p> <ul class="list" > <li > <p >Linear Layout</p> </li> <li > <p >Absolute Layout</p> </li> <li > <p >Table Layout</p> </li> <li > <p >Frame Layout</p> </li> <li > <p >Relative Layout</p> </li> </ul> <h3 >Linear Layout</h3> <p >Linear layout is further divided into horizontal and vertical layout. It means it can arrange views in a single column or in a single row. Here is the code of linear layout(vertical) that includes a text view.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=&rdquo;</span><span class="lit" >1.0</span><span class="pun" >&rdquo;</span><span class="pln" > encoding</span><span class="pun" >=&rdquo;</span><span class="pln" >utf</span><span class="pun" >-</span><span class="lit" >8</span><span class="pun" >&rdquo;?&gt;</span><span class="pln" > </span><span class="tag" >&lt;LinearLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&rdquo;http://schemas.android.com/apk/res/android&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:orientation</span><span class="pun" >=</span><span class="atv" >&rdquo;vertical&rdquo;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;TextView</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&rdquo;@string/hello&rdquo;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/LinearLayout&gt;</span></pre> <h3 >AbsoluteLayout</h3> <p >The AbsoluteLayout enables you to specify the exact location of its children. It can be declared like this.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;AbsoluteLayout</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&rdquo;http://schemas.android.com/apk/res/android&rdquo;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;Button</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;188dp&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&rdquo;Button&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_x</span><span class="pun" >=</span><span class="atv" >&rdquo;126px&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_y</span><span class="pun" >=</span><span class="atv" >&rdquo;361px&rdquo;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/AbsoluteLayout&gt;</span></pre> <h3 >TableLayout</h3> <p >The TableLayout groups views into rows and columns. It can be declared like this.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;TableLayout</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&rdquo;http://schemas.android.com/apk/res/android&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;TableRow&gt;</span><span class="pln" > </span><span class="tag" >&lt;TextView</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&rdquo;User</span><span class="pln" > </span><span class="atn" >Name</span><span class="pln" >:&rdquo; </span><span class="atn" >android:width</span><span class="pln" > </span><span class="pun" >=</span><span class="atv" >&rdquo;120dp&rdquo;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;EditText</span><span class="pln" > </span><span class="atn" >android:id</span><span class="pun" >=</span><span class="atv" >&rdquo;@+id/txtUserName&rdquo;</span><span class="pln" > </span><span class="atn" >android:width</span><span class="pun" >=</span><span class="atv" >&rdquo;200dp&rdquo;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/TableRow&gt;</span><span class="pln" > </span><span class="tag" >&lt;/TableLayout&gt;</span></pre> <h3 >RelativeLayout</h3> <p >The RelativeLayout enables you to specify how child views are positioned relative to each other.It can be declared like this.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="tag" >&lt;RelativeLayout</span><span class="pln" > </span><span class="atn" >android:id</span><span class="pun" >=</span><span class="atv" >&rdquo;@+id/RLayout&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;fill_parent&rdquo;</span><span class="pln" > </span><span class="atn" >xmlns:android</span><span class="pun" >=</span><span class="atv" >&rdquo;http://schemas.android.com/apk/res/android&rdquo;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;/RelativeLayout&gt;</span></pre> <h3 >FrameLayout</h3> <p >The FrameLayout is a placeholder on screen that you can use to display a single view. It can be declared like this.</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=&rdquo;</span><span class="lit" >1.0</span><span class="pun" >&rdquo;</span><span class="pln" > encoding</span><span class="pun" >=&rdquo;</span><span class="pln" >utf</span><span class="pun" >-</span><span class="lit" >8</span><span class="pun" >&rdquo;?&gt;</span><span class="pln" > </span><span class="tag" >&lt;FrameLayout</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_alignLeft</span><span class="pun" >=</span><span class="atv" >&rdquo;@+id/lblComments&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_below</span><span class="pun" >=</span><span class="atv" >&rdquo;@+id/lblComments&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_centerHorizontal</span><span class="pun" >=</span><span class="atv" >&rdquo;true&rdquo;</span><span class="pln" > </span><span class="tag" >&gt;</span><span class="pln" > </span><span class="tag" >&lt;ImageView</span><span class="pln" > </span><span class="atn" >android:src</span><span class="pln" > </span><span class="pun" >=</span><span class="pln" > </span><span class="atv" >&ldquo;@drawable/droid&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&rdquo;wrap_content&rdquo;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/FrameLayout&gt;</span></pre> <p >Apart form these attributes, there are other attributes that are common in all views and ViewGroups. They are listed below &minus;</p> <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >View &amp; description</th> </tr> <tr > <td >1</td> <td ><b >layout_width</b> <p >Specifies the width of the View or ViewGroup</p> </td> </tr> <tr > <td >2</td> <td ><b >layout_height</b> <p >Specifies the height of the View or ViewGroup</p> </td> </tr> <tr > <td >3</td> <td ><b >layout_marginTop</b> <p >Specifies extra space on the top side of the View or ViewGroup</p> </td> </tr> <tr > <td >4</td> <td ><b >layout_marginBottom</b> <p >Specifies extra space on the bottom side of the View or ViewGroup</p> </td> </tr> <tr > <td >5</td> <td ><b >layout_marginLeft</b> <p >Specifies extra space on the left side of the View or ViewGroup</p> </td> </tr> <tr > <td >6</td> <td ><b >layout_marginRight</b> <p >Specifies extra space on the right side of the View or ViewGroup</p> </td> </tr> <tr > <td >7</td> <td ><b >layout_gravity</b> <p >Specifies how child Views are positioned</p> </td> </tr> <tr > <td >8</td> <td ><b >layout_weight</b> <p >Specifies how much of the extra space in the layout should be allocated to the View</p> </td> </tr> </tbody> </table> <h2 >Units of Measurement</h2> <p >When you are specifying the size of an element on an Android UI, you should remember the following units of measurement.</p> <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Unit &amp; description</th> </tr> <tr > <td >1</td> <td ><b >dp</b> <p >Density-independent pixel. 1 dp is equivalent to one pixel on a 160 dpi screen.</p> </td> </tr> <tr > <td >2</td> <td ><b >sp</b> <p >Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes</p> </td> </tr> <tr > <td >3</td> <td ><b >pt</b> <p >Point. A point is defined to be 1/72 of an inch, based on the physical screen size.</p> </td> </tr> <tr > <td >4</td> <td ><b >px</b> <p >Pixel. Corresponds to actual pixels on the screen</p> </td> </tr> </tbody> </table> <h2 >Screen Densities</h2> <table class="table table-bordered" > <tbody > <tr > <th >Sr.No</th> <th >Density &amp; DPI</th> </tr> <tr > <td >1</td> <td ><b >Low density (ldpi)</b> <p >120 dpi</p> </td> </tr> <tr > <td >2</td> <td ><b >Medium density (mdpi)</b> <p >160 dpi</p> </td> </tr> <tr > <td >3</td> <td ><b >High density (hdpi)</b> <p >240 dpi</p> </td> </tr> <tr > <td >4</td> <td ><b >Extra High density (xhdpi)</b> <p >320 dpi</p> </td> </tr> </tbody> </table> <h2 >Optimizing layouts</h2> <p >Here are some of the guidelines for creating efficient layouts.</p> <ul class="list" > <li > <p >Avoid unnecessary nesting</p> </li> <li > <p >Avoid using too many Views</p> </li> <li > <p >Avoid deep nesting</p> </li> </ul>
RangeTime:0.006293s
RangeMem:219.56 KB
返回顶部 留言