Stanislav Rost CSAIL, MIT

Transcription

1 Session 2: Lifecycles, GUI Stanislav Rost CSAIL, MIT

2 The Plan 1 Activity lifecycle Service lifecycle 2 Selected GUI elements UI Layouts 3 Hands on assignment: RoboChat Application GUI Design

3 Birth, death, and stasis ENTITY LIFECYCLES

4 Activity Lifecycle Lifecycle methods Must call through h to the super class equivalents: public void onstart() { super.onstart();... }

5 Activity Creation OnCreate( ) Similar to a constructor Set up the UI and UI callbacks Populate data models from persistent storage

6 Activity Alive and Visible onresume(), onpause() Bind to, unbind from services Register to/unregister from system services Start, t stop animations Start, stop timer tasks

7 Activity Saving State void onsaveinstancestate(bundle)

8 Activity Restoring State oncreate(bundle) onrestoreinstancestate(bundle)

9 Activity Destruction void finish() or Device orientation changed

10 Service Lifecycle: without Callbacks oncreate() Context.startService(Intent) onstart(intent, int) Service is running ondestroy() Service is shut down Other apps need memory Context.stopService(Intent) or stopself()

11 Service Lifecycle: with Callbacks oncreate() onbind(intent) Service is running ondestroy() Service is shut down Context.bindService(Intent, ServiceConnection, int flags) Returns an IBinder object for communicating with Service Other apps need memory OR All listeners detached from service Context.stopService(Intent) or stopself()

12 Eye candy touch magnets GUI ELEMENTS, LAYOUT AND DESIGN

13 GUI Plan 1 The View Base Class 2 Views Showcase 3 Layouts 4 GUI Design and Programming

14 GUI Building Blocks The main GUI object is View A rectangle of screen real estate Receives input events that apply to the rectangle ViewGroup is an encapsulating View May contain children Views Responsible for the layout of the children Views Typical operations on a View Set properties: layout constraints, graphical attributes Set listeners: event processors for user actions

15 The View Base Class Layout onmeasure( ) onlayout( ) onsizechanged( ) Drawing ondraw(canvas) Input event processing onkeydown/up( ) ontrackballevent( ) ontouchevent( ) Focus onfocuschanged( ) onwindowfocuschanged( )

16 The View Base Class Layout onmeasure( ) onlayout( ) onsizechanged( ) requestlayout() Drawing ondraw(canvas) invalidate() Input event processing Comes from input devices onkeydown/up( ) ontrackballevent( ) ontouchevent( ) Focus onfocuschanged( ) onwindowfocuschanged( ) requestfocus()

17 Views Showcase

18 TextView and EditText Display text labels Enter text (including multi line) TextView inside a ScrollView.setText( ), t(.gettext(): t() rich ih text t format (see: CharacterSequence, SpannableString) Cut / Copy / Paste via shift select, long click Many, many properties

19 Various Clickables Plain Button Plain CheckBox RadioButtons inside a RadioGroup Callback listener classes: View.onClickListener CompoundButton.onCheckedChangedListener RadioGroup.onCheckedChangedListener

20 Images ImageView ImageButton Image statically set via the source property: Programmatically, setimageresource(r.drawable.imagefilename) setimagebitmap(bitmap) setimagedrawable(drawable)

21 Date and Time Pickers DatePicker TimePicker Also available as Dialogs

22 Spinners View View View Elements of Spinners are Views provided by SpinnerAdapter Spinner.setAdapter(SpinnerAdapter)

23 Spinners ArrayAdapter can generate Views from String arrays styled using built in templates: ArrayAdapter<CharSequence> simpleadapter = new ArrayAdapter<CharSequence>(this, android.r.layout.simple_spinner_item, spinner item, choicearray); spinner.setadapter(simpleadapter);

24 ListView Like a Spinner, but layed out flat ListAdapter Specifies total size Provides Views for every slot [0 size) Extend your own class from BaseAdapter to provide entries for both ListViews and Spinners

25 Layouts Layouts are ViewGroups ViewGroup.addView(View) ViewGroup.addView(View, LayoutParams) LayoutParams specify height, ht width constraints t Exact point size WRAP_CONTENT as big as the total size of its internal contents FILL_PARENT fill up the remaining space up to parent size Layouts can contain other layouts Because a layout is a ViewGroup, which extends from View

26 LinearLayout and Size Constraints One View after another, vertically or horizontally ONTENT WRAP_C WRAP_CONTENT WRAP_CONTENT WRAP_CO ONTENT LinearLayout FILL_PARENT, FILL_PARENT

27 LinearLayout and Size Constraints Changed the horizontal constraint to FILL_PARENT ONTENT WRAP_C WRAP_CONTENT FILL_PARENT WRAP_CO ONTENT

28 LinearLayout and Size Constraints Now FILL_PARENT both vertically and horizontally ONTENT WRAP_C WRAP_CONTENT FIL LL_PAREN NT FILL_PARENT

29 LinearLayout and Size Constraints Growing the first View s width constraint makes the second one disappear! WRAP_CONTENT FILL_PARENT

30 LinearLayout and Size Constraints If WEIGHT constraint > 0, FILL_PARENT divides the remaining space according to weight / weights ONTENT WRAP_C FILL_PARENT FILL_PARENT WEIGHT = 1 WEIGHT = 1 WRAP_CO ONTENT

31 LinearLayout If WEIGHT constraint > 0, FILL_PARENT divides the remaining space according to weight / weights ONTENT WRAP_C FILL_PARENT FILL_PARENT WEIGHT = 6 WEIGHT = 1 WRAP_CO ONTENT

32 Nested LinearLayouts Example including a vertical LinearLayout WRAP_CONTENT, WRAP_CONTENT Width constraint, height constraint FILL_PARENT, WRAP_CONTENT WRAP_CONTENT, FILL_PARENT LinearLayout LinearLayout WRAP_CONTENT, FILL_PARENT FILL_PARENT, FILL_PARENT

33 RelativeLayout Uses View IDs to refer to neighbors You can add a view to a GUI layout with an auto incrementing ID number: OF YOUR VIEW> Places Views relative to other Views android:layout_below= id of another view _above _toleftof _torightof _align[top,left,bottom,right] android:layout_alignparent[top,bottom,left,right]= true Also requires length, width constraints

34 GUI Design in XML Layout files reside in res/layout Example: mainlayout.xml <?xml version="1.0" encoding="utf 8"?> <RelativeLayout xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" > Views go here </RelativeLayout>

35 GUI Design in XML Inside the top level RelativeLayout <TextView android:layout_width= fill_parent" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:layout_alignparentleft="true" li tl " android:padding="5sp" android:text= Please select the file to upload" />

36 GUI Design in XML Below the TextView in mainlayout.xml <EditText /> android:layout_width= fill_parent" android:layout_height="wrap_content" i ht " t t"

37 GUI Design in XML Below the EditText in mainlayout.xml <Button android:layout_width= wrap_content" android:layout_height="wrap_content android:layout_alignparentright= alignparentright="true" true android:text= Upload />

38 GUI Design in XML Below the EditText in mainlayout.xml <Button android:layout_width= wrap_content" android:layout_height="wrap_content android:text= Browse... />

39 Using Layouts In Activities Set as Activity content Inflate during run time Construct programmatically

40 Using Layouts In Activities Set as Activity content... setcontentview(r.layout.mainlayout);... browsebutton = (Button)findViewById(R.id.browseButton); id Inflate during run time Construct programmatically

41 Using Layouts In Activities Set as Activity content Inflate during run time, in, for example, a ListAdapter... View v = LayoutInflater.from(getContext()).inflate( ()) ( R.layout.mainLayout, this, false);... Construct programmatically

42 Using Layouts In Activities Set as Activity content Inflate during run time Design programmatically Construct using the View(Context) constructor Use addview(view, LayoutParams) to add views to parents Tedious, inefficient and difficult to maintain

43 A toy application for your education ROBOCHAT: A TUTORIAL APP

44 RoboChat Overview A phone based instant messaging program Communicates with our chat server using HTTP POSTs new messages to the chat server Shows latest posts by periodically loading and displaying a dynamic HTML page generated by the chat server You get to develop elop it!

45 Assignment: RoboChat Interface Use only RelativeLayouts Design exactly as pictured Should adapt to orientation Not as easy as it looks! E mail your.xml layout file Submit by 21:00 to: stanrost@xxx.xxx.xxxx Submit by 21:00 to: stanrost@xxx.xxx.xxxx Include [xxxxxx] in title, and your name in body

46 RoboChat Notes Should display a Toast warning if user attempts to chat without setting nickname first After nickname is set, the top label changes from Enter your nickname: to Your nickname is < >. Enter another below to change it: Chat post should be cleared after the message has been sent to the server

47 RoboChat Protocol Server URLs and the chat protocol Base server URL: chat.appspot.com GET /renderchat Renders the last 32 messages in HTML POST /postmessage nickname=<nickname> body=<text> Adds a new message to the end of the chat

48 Some Unresolved Questions How to make a WebView display a URL? How can I make a WebView reload a URL periodically? How do I make POST requests in an Activity? How do I make the application survive lifecycle events without losing the nickname and the text of a not yet posted new message?

49 Summary of Session II Slides are available for download here: Topics covered Lifecycle events GUI elements Data adapters for Spinners and ListViews Layout Next session: Training Room B, 10:45 Noon Advanced APIs: GPS localization, Google Maps, p, sensors Programming practicum