06. Advanced Widget. DKU-MUST Mobile ICT Education Center

Transcription

1 06. Advanced Widget DKU-MUST Mobile ICT Education Center

2 Goal Learn how to deal with advanced widget. Learn how the View Container and its applications Learn how to set the AndroidManiFest.xml Page 2

3 1. Advanced Widget Date/Time Widget Analog clock, Digital clock XML Code Example of the Analog/Digital clock Page 3

4 1. Advanced Widget Date/Time Widget Chronometer XML Code Example of the Chronometer Page 4

5 1. Advanced Widget Date/Time Widget TimePicker, DatePicker, CalendarView XML Code Example of TimePicker, DatePicker, CalendarView 캘린더뷰는허니콤 (3.0) 부터지원됨 Page 5

6 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(1/8) Create a Date/Time Booking(Reservation) App Using the Date/Time Widget Project Info. Project Name : Project6_1 Package Name : com.cookandroid.project6_1 Build SDK : Goolge API 15 or 16 Minimum Required SDK : API 15 or 16 Activity Name : Project6_1Activity Layout Name : main Page 6

7 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(2/8) Design Screen (1/2) LinearLayout Chronometer 1, Button 1 Widget id : chronometer1, btnstart RadioGroup RadioButton 2 RaioButton Widget id : rdocal, rdotime LinearLayout CalendarView 1, TimePicker 1 in the FrameLayout LinearLayout, layout_weight is 1 Widget id : calendarview1, timepicker1 LinearLayout Button 1, TextView 10 Button id : btnend TextView id(odd number of times) : tvyear, tvmonth, tvday, tvhour, tvminute Page 7

8 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(3/8) Design the Screen (2/2) Page 8

9 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(4/8) Java Coding 1 Page 9

10 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(5/8) Java Coding 2 12 widgets on the widget variable assignment. First, CalendarView, TimePicker Invisible Page 10

11 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(6/8) Java Coding 3 When you click RadioButton, write the Click Event (Show the eather CalendarView or TimePicker) Page 11

12 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(7/8) Java Coding 4 Write the Click Listener(event) When you click the Reservation Start, start the Chronometer. When you click the Reservation End, end the Chronometer. Page 12

13 1. Advanced Widget Date/Time Widget [Practice 6-1] Create a Date/Time booking App(8/8) Java Coding 5 When you click the Reservation End, show the TextView(Date, Month, Year CalenderView setting) and TimePicker(Hour, Minute TimePicker setting) Page 13

14 1. Advanced Widget Date/Time Widget Change the <Practice 6-1> [Self Test 6-1] Change the CalendarView to DatePicker Delete the Reservation Start and Reservation End When you click the chronometer, reservation start. When you long click the year, acction the reservation end. Before you click on the Chronometer, RadioButton, DatePicker, TimePicker is not set to visible. When you click the Chronometer, RadioButton visible. When you long click the year, RadioButton, DatePicker, TimePicker invisible. Page 14

15 1. Advanced Widget Other related widget AutoCompleteTextView, MultiAutoCompleteTextView AutoCompleteTextView An editable text view that shows completion suggestions automatically while the user is typing. The list of suggestions is displayed in a drop down menu from which the user can choose an item to replace the content of the edit box with. The drop down can be dismissed at any time by pressing the back key or, if no item is selected in the drop down, by pressing the enter/dpad center key. The list of suggestions is obtained from a data adapter and appears only after a given number of characters defined by the threshold. Page 15

16 1. Advanced Widget Other related widget AutoCompleteTextView, MultiAutoCompleteTextView MultiAutoCompleteTextView An editable text view, extending AutoCompleteTextView, that can show completion suggestions for the substring of the text where the user is typing instead of necessarily for the entire thing. You must provide a MultiAutoCompleteTextView.Tokenizer to distinguish the various substrings. Page 16

17 1. Advanced Widget Other related widget XML Code Example of AutoCompleteTextView, MultiAutoCompleteTextView Page 17

18 1. Advanced Widget Other related widget Java Code of AutoCompleteTextView, MultiAutoCompleteTextView Page 18

19 1. Advanced Widget Other related widget ProgressBar, SeekBar, RatingBar Page 19

20 1. Advanced Widget Other related widget XML Code Example of ProgressBar, SeekBar, RatingBar Page 20

21 2. View Container Simple Function of the View Container ScrollView Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display. A ScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through. You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView. The TextView class also takes care of its own scrolling, so does not require a ScrollView, but using the two together is possible to achieve the effect of a text view within a larger container. ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView. Page 21

22 2. View Container Simple Function of the View Container XML Code Example of ScrollView Page 22

23 2. View Container Simple Function of the View Container SlidingDrawer SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen. SlidingDrawer can be used vertically or horizontally. A special widget composed of two children views: the handle, that the users drags, and the content, attached to the handle and dragged with it. SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance. The size of the SlidingDrawer defines how much space the content will occupy once slid out so SlidingDrawer should usually use match_parent for both its dimensions. Inside an XML layout, SlidingDrawer must define the id of the handle and of the content: Page 23

24 2. View Container Simple Function of the View Container SlidingDrawer Basic Form Page 24

25 2. View Container Simple Function of the View Container XML Code Example of SlidingDrawer Page 25

26 2. View Container Simple Function of the View Container(Requires Java linkage) ViewFlipper Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval. Basic Form Page 26

27 2. View Container Simple Function of the View Container(Requires Java linkage) XML Code Example of ViewFlipper Page 27

28 2. View Container Complex Function of the View Container(Requires Java linkage) Java Code Example of ViewFlipper Page 28

29 2. View Container Complex Function of the View Container(Requires Java linkage) TabHost Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves. Basic Form Page 29

30 2. View Container Complex Function of the View Container(Requires Java linkage) TabHost Java Code Page 30

31 2. View Container Complex Function of the View Container(Requires Java linkage) XML Code Example of TabHost Page 31

32 2. View Container Complex Function of the View Container(Requires Java linkage) Java Code Example of TabHost Page 32

33 2. View Container Complex Function of the View Container(Requires Java linkage) WebView A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more. Note that, in order for your Activity to access the Internet and load web pages in a WebView, you must add the INTERNET permissions to your Android Manifest file - <uses-permission android:name="android.permission.internet" /> Page 33

34 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (1/8) Creating a simple web browser When you type a URL in the edit text, go to the URL Project Info. Project Name : Project6_2 Package Name : com.cookandroid.project6_2 build SDK : Goolge API 15 or 16 Minimum Required SDK : API 15 or 16 Activity Name : Project6_2Activity Layout Name : main Title : Project6_2 Page 34

35 2. View Container Design of Screen Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (2/8) Add a LinearLayout, - One EditText, Two Botton Create a WebView at the bottom Widget Id are edturl, btngo, btnback, webview1 Page 35

36 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (3/8) AndroidManifest.xml (1/2) Page 36

37 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (4/8) AndroidManifest.xml (2/2) Page 37

38 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (5/8) Java coding 1 Page 38

39 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (6/8) Java Coding 2 Automatically override the method Position the mouse cursor in the CookWebViewClient class, Select the Eclipse menu [Source]- [Override/Implements Methods] Select the shouldoverrideurlloading() method Page 39

40 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (7/8) Java coding 3 Page 40

41 2. View Container Complex Function of the View Container(Requires Java linkage) [Practice 6-2] Creating a simple web browser (8/8) Adding Internet Permissions in the AndroidManifest.xml Page 41

42 DKU-MUST Mobile ICT Education Center