View
227
Download
0
Tags:
Embed Size (px)
Citation preview
Android Form Elements
Views
Provide common UI functionality
Form elements: text area, button, radio button, checkbox, dropdown list, etc.
Date and time pickers Auto-complete
Can mostly be placed in UI using main.xml
Layouts
Groups of Views Specify how they are arranged in the window
Linear: arranged side-by-side Relative: with respect to other Views Table: row-by-row Tab: each Activity/View has its own window GridView: m-by-n grid ListView: scrollable list
Adding form elements to the UI
Use the different Layouts and Views in main.xml
Layouts can be nested
Views should specify width and height
– fill_parent: use up as much space as possible
– wrap_content: only use as much space as needed
– weight: relative size compared to other elements
Specify IDs for Views that you will access in code
NestedLinearLayout
LinearLayout
Button
EditText:“howMany”
DrawableView(that we created):“drawableView”
TextView
Modify main.xml in your FunWithDrawing project like this:
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" > 7 8 <LinearLayout 9 android:orientation="horizontal"10 android:layout_width="fill_parent"11 android:layout_height="fill_parent" >1213 <TextView14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" />1718 <EditText android:id="@+id/howMany"19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" />2223 <Button24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!"/>27 </LinearLayout>2829 <edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView"30 android:layout_width="fill_parent" 31 android:layout_height="wrap_content" 32 android:layout_weight="1" />3334 </LinearLayout>
Handling UI Events in Forms
Handling user interaction
Recall that each View has an onTouchEvent method that is automatically called by Android when the user interacts with the View
In the Android View classes, Events are dispatched to registered Listeners depending on the type of action (click, key press, long click, etc.)
For Buttons, you can simply use the main.xml file to specify the method used to handle clicks
Adding a Button click handler
1. Edit main.xml and so that the Button's “onClick” attribute is set to the onSubmitButtonClick method
1. Implement the onSubmitButtonClick method in your class that extends Activity
1.Be sure to use the appropriate method signature!
Add the Button's onClick attribute (line 27) in main.xml...
1 <?xml version="1.0" encoding="utf-8"?> 2 3 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4 android:orientation="vertical" 5 android:layout_width="fill_parent" 6 android:layout_height="wrap_content" > 7 8 <LinearLayout 9 android:orientation="horizontal"10 android:layout_width="fill_parent"11 android:layout_height="fill_parent" >1213 <TextView14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:text="Enter a number" />1718 <EditText android:id="@+id/howMany"19 android:layout_width="wrap_content" 20 android:layout_height="wrap_content" 21 android:layout_weight="1" />2223 <Button24 android:layout_width="wrap_content" 25 android:layout_height="wrap_content" 26 android:text="Submit!" 27 android:onClick="onSubmitButtonClick" />28 </LinearLayout>2930 <edu.upenn.cs4hs.DrawableView android:id="@+id/drawableView" 31 android:layout_width="fill_parent" 32 android:layout_height="wrap_content" 33 android:layout_weight="1" />3435 </LinearLayout>
Next, add this method to your FunWithDrawingActivity class
1 /* 2 * When the button is clicked, this method 3 * gets called. 4 */ 5 public void onSubmitButtonClick(View view) { 6 7 // get the EditText View by its ID 8 EditText et = (EditText)findViewById(R.id.howMany); 910 // get its text11 String text = et.getText().toString();12 // convert to an int13 int howMany = Integer.parseInt(text);14 15 // get the DrawableView by its ID16 DrawableView dv =
(DrawableView)findViewById(R.id.drawableView);17 // set its count variable18 dv.setCount(howMany);19 // redraw the View20 dv.invalidate();21 }
Now change your DrawableView class to draw random squares
1 package edu.upenn.cs4hs; 2 3 public class DrawableView extends View { 4 5 // These stay the same as before 6 public DrawableView(Context c) { 7 super(c); 8 } 9 public DrawableView(Context c, AttributeSet a) {10 super(c, a);11 }12 13 // add this variable to represent the number of squares14 private int count;1516 // this allows the count to be set17 public void setCount(int c) { count = c; }
Rewrite this method in the DrawableView class...
18 // this version of onDraw randomly chooses a color19 // and position for drawing the rectangles20 protected void onDraw(Canvas canvas) {21 22 // this is the “paintbrush”23 Paint paint = new Paint();24 25 // loop for each rectangle to draw26 for (int i = 0; i < count; i++) {27 // set the color randomly28 int whichColor = (int)(Math.random() * 4);29 if (whichColor == 0) paint.setColor(Color.RED);30 else if (whichColor == 1) paint.setColor(Color.GREEN);31 else if (whichColor == 2) paint.setColor(Color.BLUE);32 else paint.setColor(Color.YELLOW);33 34 // set the position randomly35 int x = (int)(Math.random()*200);36 int y = (int)(Math.random()*300);37 38 // draw Rectangle 39 canvas.drawRect(x, y, x+50, y+50, paint);40 }41 42 }43 44 } // end of DrawableView class
Where could you go from here?
Draw random sized rectangles instead of 50x50 squares
Draw random shapes instead of rectangles
Detect that the user has touched one of the random shapes
Detect “gestures” around the shape (by using the sequence of MotionEvent objects that are passed to onTouchEvent)