GUI Widget. Lecture6

Transcription

1 GUI Widget Lecture6

2 AnalogClock/Digital Clock Button CheckBox DatePicker EditText Gallery ImageView/Button MapView ProgressBar RadioButton Spinner TextView TimePicker WebView Android Widgets

3 Designing a UI Open XML file for your layout (e.g. content_main.xml) Drag widgets from left Palette to the preview image Set their properties in lower-right Properties panel

4 Events Event: An external stimulus your program can respond to Common kinds of events include: Mouse motion/tapping, keys pressed Timers expiring, Network data available Event-driven programming: overall execution of your program is largely dictated by user events Commonly used in graphical programs To respond to events in a program, you must: Write methods to handle each kind of event ( listener methods) Attach those methods to particular GUI widgets

5 Button A clickable widget with a text label Key attributes: android:clickable= true android:onclick= functionname android:text= buttontext

6 Event Handling -- 1 /* *function to call in activity when clicked *must be public, void, and take a View argument */ public void functionname(view view) [ }

7 Setting an Event Listener Select the widget in the Design view Scroll down its Properties until you find onclick Type the name of a method you will write to handle the click Switch to the Text view and find the XML for that button Click the light bulb and choose to Create the method

8 Event Handling -- 2 In Java file: Button firstbutton = (Button) findviewbyid(r.id.uniqueid); firstbutton.setonclicklistener(new public void onclick(view view) {. } });

9 View Objects Each widget has an associated Java object you can access They are subclasses of parent class View Examples: Button, TextView, EditText, View objects get/set methods -> Design properties: Background, bottom, ID, left, margin, padding, right, text, textalignment, textsize, top, typeface, visibility, x, y, x,.. Example: for a Button s text property: there will be methods: public CharSequence gettext() public void settext(string text) Find list of properties in Design view, or typing.get on a button in Java code, or at: developer.android.com/reference

10 RadioButton A toggleable on/off switch; part of a group Key attributes: Android:checked= true set to true to make it initially checked android:clickable= true android:onclick= functionname android:text= buttontext

11 RadioButton Need to be nested inside a RadioGroup tag in XML so that only one can be selected at a time

12 <RadioGroup android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:onclick="pickturtle" android:text="leo" android:checked="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RadioButton android:onclick="pickturtle" android:text="mike" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RadioGroup>

13 Reusing onclick handler MainActivity.java public class MainActivity extends Activity { // check which radio button was clicked public void pickturtle(view view) { if (view.getid() == R.id.leo) { } else if (view.getid() == R.id.mike) { } else if (view.getid() == R.id.don) { } else if (view.getid() == R.id.raph) { } }

14 ImageView

15 Resources

16 ImageButton

17 EditText

18 Spinner A drop-down menu of selectable choices Key attributes: android:clickable= true if false, disable the spinner options title text

19 String resources Declare constant strings and arrays in res/ values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name= arrayname"> <item>value1</item> <item>value2</item> <item>value3</item> </string-array> </resources>

20 Handler Refer to them in Java code: As a resource: R.string.name, R.array.name As a string or array: getresources().getstring(r.string.name) getresources().getstringarray(r.array.name) Handle events: Must get the Spinner object using findviewbyid Then call its setonitemselectedlistener method

21 activity_main.xml <RelativeLayout> <Spinner android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_alignparentstart="true"/> </RealtiveLayout>

22 strings.xml In res/values/strings.xml <?xml version="1.0" encoding="utf-8"?> <resources> <string name= choose_type > Choose Conversion Type </ string> <string-array name= conversiontypes"> <item>gallon</item> <item>liter</item> <item>cup</item> </string-array> </resources>

23 public void additemstounittypespinner(){ MainActivity.java // Get a reference to the spinner unittypespinner = (Spinner) findviewbyid(r.id.unit_type_spinner); // Create an ArrayAdapter using the string array and a default spinner layout ArrayAdapter<CharSequence> unittypespinneradapter = ArrayAdapter.createFromResource(this, R.array.conversionTypes, android.r.layout.simple_spinner_item); // Specify the layout to use when the list of choices appears unittypespinneradapter.setdropdownviewresource(android.r.layout.simple_spinner _dropdown_item); } // Apply the adapter to the spinner unittypespinner.setadapter(unittypespinneradapter);

24 MainActivity.java public void addlistenertounittypespinner() { unittypespinner = (Spinner) findviewbyid(r.id.unit_type_spinner); unittypespinner.setonitemselectedlistener(new AdapterView.OnItemSelectedListener() { public void onitemselected(adapterview<?> parent, View arg1, int pos, long arg3) { // Get the item selected in the Spinner String itemselectedinspinner = parent.getitematposition(pos).tostring(); } } public void onnothingselected(adapterview<?> arg0) { // TODO maybe add something here later } });

25 ListView An ordered collection of selectable choices Key attributes in XML: android:clickable= true if false, disable the list options

26 Static List Content is fixed and known before the app runs Declare the list elements in the strings.xml resource file strings.xml activity_main.xml <resources> <ListView <string-array name= os > <item> Android</item> mylist <item>iphone</item> /> </string-array> </resources>

27 Dynamic List Contents is read or generated as the program runs Come from a data file, or from the Internet, etc. Must be set in the Java code

28 List Adapters Helps turn list data into list view items Common adapters: ArrayAdapter, CursorAdapter Syntax for creating an adapter: ArrayAdapter<String> name = new ArrayAdapter<String>(activity, layout, array); The activity is usually this The default layout for lists Get the array by read your file or data source of choice It can be an array like String[] or a list like ArrayList<String> Attach it by calling setadapter method of ListView

29 setadapter Once you have an adapter, you can attach it to your list by calling the setadapter method of the ListView object in the java code ArrayList<String> myarray = ; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, myarray); ListView list =(ListView) findviewbyid(r.id.mylist); List.setAdapter(myAdapter);

30 Handling List Events Unfortunately lists don t use a simple onclick event Several fancier GUI widgets use other kinds of events The event listeners must be attached in the Java code, not in the XML Understanding how to attach these event listeners requires the use of Java anonymous inner classes

31 Anonymous inner class A shorthand syntax for declaring a small class without giving it an explicit name The class can be made to extend a given super class or implement a given interface Typically the class is declared and a single object of it is constructed and used all at once

32 List events List views respond to the following events: setonitemclicklistener(adapterview.onitemclick Listener) Listener for when an item in the list has been clicked setonitemlongclicklistener(adapterview.onite mlongclicklistener) Listener for when an item in the list has been clicked and held setonitemselectedlistener(adapterview.onitem SelectedListener) Listener for when an item in the list has been selected

33 ListAdapter theadapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, favoritetv); // ListViews display data in a scrollable list ListView thelistview = (ListView) findviewbyid(r.id.thelistview); // Tells the ListView what data to use thelistview.setadapter(theadapter); thelistview.setonitemclicklistener(new AdapterView.OnItemClickListener() public void onitemclick(adapterview<?> adapterview, View view, int position, long id) { String tvpicked = "You selected " + String.valueOf(adapterView.getItemAtPosition(position)); Toast.makeText(MainActivity.this, tvpicked, Toast.LENGTH_SHORT).show(); } });

34 Spinner vs. ListView Both have a data source Both need attach adapter to the widget Spinner can be shown in drop-down form ListView can show all data on the view directly

35 Spinner vs. ListView Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one. ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list. No initial value Does not have to select one

36

37