04. Learn the basic widget. DKU-MUST Mobile ICT Education Center

Transcription

1 04. Learn the basic widget DKU-MUST Mobile ICT Education Center

2 Goal Understanding of the View and Inheritance of View. Learn how to use the default widget. Learn basic programming of the Android App. Page 2

3 1. Overview the view View and the view of a group This class represents the basic building block for user interface components. A View occupies a rectangular area on the screen and is responsible for drawing and event handling. View is the base class for widgets, which are used to create interactive UI components(buttons, text fields, etc.). Layout inherits from a subclass of View named ViewGroup. Viewgroup is a widget that contains and arranges other widget. 위젯 widget 레이아웃 layout Page 3

4 1. Overview the view View and the view of a group View Class Hierarchy Page 4

5 1. Overview the view View and the view of a group How to find the class inheritance relationship ( Page 5

6 1. Overview the view View and the view of a group [Directly released 4-1] Find the each class(scroollview, DigitalClock, CalendarView and another class) inheritance relationships in the Page 6

7 1. Overview the View XML attribute of the View class Widget, Layout and all inherits the properties and methods of the View class. Exam of the Button Page 7

8 1. Overview the View XML attribute of the View class id attribute When defining your layout in XML, you may first be surprised to learn that the android:id is optional! You only need to add an android:id attribute to any View component in the layout file when you want to reference the associated component. That is, you want to reference the component in your Java code or when defining layout in XML Widget Variable Name = (Widget Type) findviewbyid(r.id.widgetid) Button button1; Button1 = (Button) findviewbyid(r.id.btn1) Page 8

9 1. Overview the View XML attribute of the View class id attribute exam Page 9

10 1. Overview the View XML attribute of the View class layout_width, layout_height attribute fill_parent : The view should be as big as its parent(minus padding). This constant is deprecated starting from API Level 8 and is replaced by match_parent. match_parent : The view should be as big as its parent (minus padding). Introduced in API Level 8. Wrap_content : The view should be only big enough to enclose its content (plus padding) Exam Page 10

11 1. Overview the View XML attribute of the View class background attribute Android:background A drawable to use as the background. This can be either a reference to a full drawable resource(such as a PNG image, 9- patch, XML state list description, etc), or a solid color such as "#ff000000" (black). May be a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb". This corresponds to the global attribute resource symbol background. Exam Page 11

12 1. Overview the View XML attribute of the View class padding attribute Sets the padding, in pixels, of all four edges. Padding is defined as space between the edges of the view and the view's content. A views size will include it's padding. If a background is provided, the padding will initially be set to that (0 if the drawable does not have padding). Explicitly setting a padding value will override the corresponding padding found in the background. Must be a dimension value, which is a floating point number appended with a unit such as "14.5sp". Available units are: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters). 예제 Page 12

13 1. Overview the View XML attribute of the View class layout_margin attribute Specifies extra space on the side of this view. This space is outside this view's each side android:layout_marginbottom, android:layout_marginend, android:layout_marginleft, android:layout_marginright, android:layout_marginstart, android:layout_margintop Exam Page 13

14 1. Overview the View XML attribute of the View class visibility attribute Controls the initial visibility of the view. Must be one of the following constant values. - visible : Visible on screen; the default value - invisible : Not displayed, but taken into account during layout (space is left for it) - gone : Completely hidden, as if the view had not been added. Exam Page 14

15 1. Overview the View XML attribute of the View class clickable attribute Defines whether this view reacts to click events. Must be a boolean value, either "true" or "false". enabled attribute Whether or not the Android system can instantiate components of the application - "true" if it can, and "false" if not. If the value is "true", each component's enabled attribute determines whether that component is enabled or not. If the value is "false", it overrides the component-specific values; all components are disabled. Exam Page 15

16 1. Overview the View XML attribute of the View class rotation attribute rotation of the view, in degrees. Must be a floating point value, such as "1.2". This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type. Exam Page 16

17 1. Overview the View XML attribute of the View class [Direct released 4-2] Let's coding the XML code as shown in the following figure. Setting the Button, TextView, EditText, Button Change the various attribute Page 17

18 2. Learn the Basic Widget TextView Related properties textcolor : Text color. - May be a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb". textsize : Size of the text. - Recommended dimension type for text is "sp" for scaled-pixels (example: 15sp). - Must be a dimension value, which is a floating point number appended with a unit such as "14.5sp". - Available units are: px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), mm (millimeters).typeface textstyle : Style(bold, italic, bolditalic) for the text. - Must be one or more (separated by ' ') of the following constant values. singleline - Constrains the text to a single horizontally scrolling line instead of letting it wrap onto multiple lines, and advances focus instead of inserting a newline when you press the enter key. The default value is false (multi-line wrapped text mode) for non-editable text, but if you specify any value for inputtype, the default is true (single-line input field mode). - Must be a boolean value, either "true" or "false". Page 18

19 2. Learn the Basic Widget TextView TextView Exam Page 19

20 2. Learn the Basic Widget Setting the XML Attribute with Java Codes Exam Page 20

21 2. Learn the Basic Widget Setting the XML Attribute with Java Codes XML attributes and related methods Page 21

22 2. Learn the Basic Widget Button and EditText Compatible with the TextView and a Button Page 22

23 2. Learn the Basic Widget Button and EditText Button hierarchy Button XML and Java code written Step 3 Declaration Button variable Assignment Button Widget to a variable Define Java code(class action) when the user clicks the button //coding to work. Page 23

24 2. Learn the Basic Widget Button and EditText EditText hierarchy EditText XML and Java code written Step 3 Declaration EditText variable Assignment EditText Widget to a variable Import the values entered in the EditText Page 24

25 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (1/6) Very Simple calculator. Enter two integers When you press each button, the calculation result printed in the TextView. Project information Project Name : Project4_1 Package Name : com.cookandroid.project4_1 Build SDK : Goolge API 15 or 16 Minimum Required SDK : API 15 or 16 Anctivity Name : Project4_1Activity Layout name : main title : Project4_1 Page 25

26 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (2/6) Screen Design : EditText 2, Button 4, TextView 1 Page 26

27 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (3/6) Java Coding 1 Declaration 7 widget variable connection the 7 widget in main.xml Declared two string variables save two strings to be entered Declared a integer variable save a integer to be stored Page 27

28 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (4/6) Java Coding 2 Two EditText assigned to a variable Button (plus) is assigned to a variable. One TextView is assigned to a variable. Page 28

29 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (5/6) Java Coding 3 Define the Touch Event Listener in button Coding the ontouch() method Page 29

30 2. Learn the Basic Widget [Practice 4-1] Create a super calculator (6/6) Complete Java code code completion - Subtraction, multiplication, division Page 30

31 2. Learn the Basic Widget [Direct released 4-3] Practice 4-1 to add or change the following features Click to change the touch Add a button(get the rest of the values) When you click the button without entering a value, an error message is output. used Toast Real values to calculate Division by zero, output Toast message and does not compute Page 31

32 3. Using the Basic Widget CompundButton CompundButton hierarchy CheckBox XML and Java code written Step 3 Declaration CheckBox variable Assignment CheckBox Widget to a variable Define Java code(class action) when checkbox to change //coding to work. Page 32

33 3. Using the Basic Widget CompundButton Switch, ToggleButton, RadioButton, RadioGroup Page 33

34 3. Using the Basic Widget ImageView and ImageButton Hierarchy XML code Image file folder : [res]-[drawable] File format : png, jpg, gif Page 34

35 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(1/7) < 시작함 > 를체크하면, 좋아하는애완동물세가지중에서하나를선택하는내용이나온다. 선택후에 < 선택완료 > 버튼을클릭하면해당애완동물의이미지가나타난다 프로젝트정보 프로젝트이름 : Project4_2 패키지이름 : com.cookandroid.project4_2 빌드 SDK : Goolge API 15 또는 16 Minimum Required SDK : API 15 또는 16 액티비티이름 : Project4_2Activity 레이아웃이름 : main 타이틀 : Project4_2 Page 35

36 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(2/7) 프로젝트의 [res]-[drawble-hdpi] 폴더에강아지, 고양이, 토끼그림파일을미리복사한다. Page 36

37 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(3/7) Screen Design TextView, CheckBox, TextView, RadioGroup, RadioButton 3, Button, ImageView Layout - padding Visibility attribute of First TextView & CheckBox is default. visibility attribute of the other widget is invisible widget id are Text1, ChkAgree, Text2, Rgroup1, RdoDog, RdoCat, RdoRabbit, BtnOK, ImgPet Page 37

38 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(4/7) Java Coding 1 Page 38

39 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(5/7) Java coding 2 Page 39

40 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(6/7) Java coding 3 Page 40

41 3. Using the Basic Widget [Practice 4-2] Create a select app favorite pet(7/7) Java coding 4 Page 41

42 3. Using the Basic Widget [Direct Released 4-4] Change the practice 4-2 Change the questions - The Android version of your favorite? Change the <start> to Switch Delete the confirm button When you select the radio button, output the image Add the two button - first button is end When you click this button, end the application - Second button is first When you click this button, move the first page Page 42

43 DKU-MUST Mobile ICT Education Center