Android - UI Controls

<blockquote > <p >Input controls are the interactive components in your app&#39;s user interface. Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, check box, zoom buttons, toggle buttons, and many more.</p> </blockquote> <p><img alt="UI Control" src="http://www.tutorialspoint.com/android/images/ui_control.jpg" /></p> <h4 align="center" >UI ELEMENTS</h4> <p >A<b >View</b>is an object that draws something on the screen that the user can interact with and a<b >ViewGroup</b>is an object that holds other View (and ViewGroup) objects in order to define the layout of the user interface.</p> <p >You define your layout in an XML file which offers a human-readable structure for the layout, similar to HTML. For example, a simple vertical layout with a text view and a button looks like this &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&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" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:orientation</span><span class="pun" >=</span><span class="atv" >&quot;vertical&quot;</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:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/text&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&quot;I am a TextView&quot;</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:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/button&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&quot;I am a Button&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/LinearLayout&gt;</span></pre> <h2 >Android UI Controls</h2> <p >There are number of UI controls provided by Android that allow you to build the graphical user interface for your app.</p> <table class="table table-bordered" > <tbody > <tr > <th >S.N.</th> <th >UI Control &amp; Description</th> </tr> <tr > <td >1</td> <td ><a alt="Android TextView Control" href="http://www.tutorialspoint.com/android/android_textview_control.htm" >TextView</a> <p >This control is used to display text to the user.</p> </td> </tr> <tr > <td >2</td> <td ><a alt="Android EditText Control" href="http://www.tutorialspoint.com/android/android_edittext_control.htm" >EditText</a> <p >EditText is a predefined subclass of TextView that includes rich editing capabilities.</p> </td> </tr> <tr > <td >3</td> <td ><a alt="Android AutoCompleteTextView Control" href="http://www.tutorialspoint.com/android/android_autocompletetextview_control.htm" >AutoCompleteTextView</a> <p >The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of completion suggestions automatically while the user is typing.</p> </td> </tr> <tr > <td >4</td> <td ><a alt="Android Button Control" href="http://www.tutorialspoint.com/android/android_button_control.htm" >Button</a> <p >A push-button that can be pressed, or clicked, by the user to perform an action.</p> </td> </tr> <tr > <td >5</td> <td ><a alt="Android ImageButton Control" href="http://www.tutorialspoint.com/android/android_imagebutton_control.htm" >ImageButton</a> <p >AbsoluteLayout enables you to specify the exact location of its children.</p> </td> </tr> <tr > <td >6</td> <td ><a alt="Android CheckBox Control" href="http://www.tutorialspoint.com/android/android_checkbox_control.htm" >CheckBox</a> <p >An on/off switch that can be toggled by the user. You should use check box when presenting users with a group of selectable options that are not mutually exclusive.</p> </td> </tr> <tr > <td >7</td> <td ><a alt="Android ToggleButton Control" href="http://www.tutorialspoint.com/android/android_togglebutton_control.htm" >ToggleButton</a> <p >An on/off button with a light indicator.</p> </td> </tr> <tr > <td >8</td> <td ><a alt="Android RadioButton Control" href="http://www.tutorialspoint.com/android/android_radiobutton_control.htm" >RadioButton</a> <p >The RadioButton has two states: either checked or unchecked.</p> </td> </tr> <tr > <td >9</td> <td ><a alt="Android RadioGroup Control" href="http://www.tutorialspoint.com/android/android_radiogroup_control.htm" >RadioGroup</a> <p >A RadioGroup is used to group together one or more RadioButtons.</p> </td> </tr> <tr > <td >10</td> <td ><a alt="Android ProgressBar Control" href="http://www.tutorialspoint.com/android/android_progressbar.htm" >ProgressBar</a> <p >The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the background.</p> </td> </tr> <tr > <td >11</td> <td ><a alt="Android Spinner Control" href="http://www.tutorialspoint.com/android/android_spinner_control.htm" >Spinner</a> <p >A drop-down list that allows users to select one value from a set.</p> </td> </tr> <tr > <td >12</td> <td ><a alt="Android TimePicker Control" href="http://www.tutorialspoint.com/android/android_timepicker_control.htm" >TimePicker</a> <p >The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode.</p> </td> </tr> <tr > <td >13</td> <td ><a alt="Android DatePicker Control" href="http://www.tutorialspoint.com/android/android_datepicker_control.htm" >DatePicker</a> <p >The DatePicker view enables users to select a date of the day.</p> </td> </tr> </tbody> </table> <h2 >Create UI Controls</h2> <p >Input controls are the interactive components in your app&#39;s user interface. Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, check box, zoom buttons, toggle buttons, and many more.</p> <p >As explained in previous chapter, a view object may have a unique ID assigned to it which will identify the View uniquely within the tree. The syntax for an ID, inside an XML tag is &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pln" >android</span><span class="pun" >:</span><span class="pln" >id</span><span class="pun" >=</span><span class="str" >&quot;@+id/text_id&quot;</span></pre> <p >To create a UI Control/View/Widget you will have to define a view/widget in the layout file and assign it a unique ID as follows &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="pun" >&lt;?</span><span class="pln" >xml version</span><span class="pun" >=</span><span class="str" >&quot;1.0&quot;</span><span class="pln" > encoding</span><span class="pun" >=</span><span class="str" >&quot;utf-8&quot;</span><span class="pun" >?&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" >&quot;http://schemas.android.com/apk/res/android&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;fill_parent&quot;</span><span class="pln" > </span><span class="atn" >android:orientation</span><span class="pun" >=</span><span class="atv" >&quot;vertical&quot;</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:id</span><span class="pun" >=</span><span class="atv" >&quot;@+id/text_id&quot;</span><span class="pln" > </span><span class="atn" >android:layout_width</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:layout_height</span><span class="pun" >=</span><span class="atv" >&quot;wrap_content&quot;</span><span class="pln" > </span><span class="atn" >android:text</span><span class="pun" >=</span><span class="atv" >&quot;I am a TextView&quot;</span><span class="pln" > </span><span class="tag" >/&gt;</span><span class="pln" > </span><span class="tag" >&lt;/LinearLayout&gt;</span></pre> <p >Then finally create an instance of the Control object and capture it from the layout, use the following &minus;</p> <pre class="prettyprint notranslate prettyprinted" > <span class="typ" >TextView</span><span class="pln" > myText </span><span class="pun" >=</span><span class="pln" > </span><span class="pun" >(</span><span class="typ" >TextView</span><span class="pun" >)</span><span class="pln" > findViewById</span><span class="pun" >(</span><span class="pln" >R</span><span class="pun" >.</span><span class="pln" >id</span><span class="pun" >.</span><span class="pln" >text_id</span><span class="pun" >);</span></pre>
RangeTime:0.007385s
RangeMem:215.53 KB
返回顶部 留言