Chapter 10 - Views Part 2
-
Upload
sittiphol-phanvilai -
Category
Education
-
view
127 -
download
0
Transcript of Chapter 10 - Views Part 2
![Page 1: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/1.jpg)
Views Part 2
![Page 2: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/2.jpg)
ImageView
ImageView Displays an arbitrary image, such as an
icon. The ImageView class can load images from various sources (such as
resources or content providers), takes care of compu@ng its measurement
from the image so that it can be used in any layout manager, and provides
various display op@ons such as scaling and @n@ng.
![Page 3: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/3.jpg)
ImageView
Lab
android:src android:adjustViewBounds android:scaleType
![Page 4: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/4.jpg)
ImageBu1on
ImageBuEon
Displays a buEon with an image (instead of text) that can be pressed or
clicked by the user.
![Page 5: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/5.jpg)
ImageBu1on
Lab
android:src android:adjustViewBounds android:scaleType android:background
![Page 6: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/6.jpg)
The 9-Patch
![Page 7: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/7.jpg)
The 9-Patch
![Page 8: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/8.jpg)
The 9-Patch
![Page 9: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/9.jpg)
Selector
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/btn_default_pressed”android:state_pressed="true"/>
<item android:drawable="@drawable/btn_default_selected”android:state_selected="true"/>
<item android:drawable="@drawable/btn_default_selected”android:state_focused="true"/>
<item android:drawable=”@drawable/btn_default_normal"/>
</selector>
<Button android:background=“@drawable/selector_btn_default”.../>
drawable/selector_btn_default.xml
![Page 10: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/10.jpg)
Make it scroll!: ScrollView
<ScrollView android:layout_width=“match_parent” android:layout_height=“match_parent” > <!–- Only 1 child allowed --> ... </ScrollView>
Use HorizontalScrollView for Horizontal Scrolling
![Page 11: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/11.jpg)
Lab
100dp
#C62828 Padding: 16dp
Font: ?sp
#B71C1C
hEps://dl.dropboxusercontent.com /u/19243435/bg2.jpg
hEps://dl.dropboxusercontent.com /u/19243435/logo.jpg
ทำเลย เดี๋ยวมา!,
By con@nuing, you accept Terms of Use and Privacy Policy
Reimagined with over 30,000 new topics
![Page 12: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/12.jpg)
Lab
![Page 13: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/13.jpg)
Custom View
Custom View Custom ViewGroup
![Page 14: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/14.jpg)
Custom View
Custom View
How to decide whether we should use Custom View or not? • Custom Draw
• Again … don’t fix the posi@on, do everything rela@vely
• Handle Input Event
![Page 15: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/15.jpg)
Custom ViewGroup
* Use quite a lot
How to decide whether we should use Custom View or not?
• Group Layout for Reuse • Handle Input Event
• Do something with non-standard behavior
Custom ViewGroup
![Page 16: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/16.jpg)
Custom View: Best Code Structure
• init • initWithAErs
Lab: Test onDraw Lab: Ini1ate with XML Live Demo
![Page 17: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/17.jpg)
Custom View: Input Events
• onClick • onLongClick • onTouchEvent • GestureDetector
Live Demo
![Page 18: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/18.jpg)
Custom View: A1ributes
1) Define the aEributes in attr.xml
2) Declare xmlns and pass value to xml element
Live Demo
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name=“CustomViewStyleable"> <attr name=“isBlue" format=“boolean"/> </declare-styleable> </resources>
![Page 19: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/19.jpg)
Custom View: A1ributes
3) Retrieve value through context.getTheme().obtainStyledAEributes(…)
TypedArray a = context.getTheme().obtainStyledAttributes( attrs, R.styleable.CustomViewStyleable, defStyleAttr, defStyleRes); try { isBlue = a.getBoolean(R.styleable.CustomViewStyleable_isBlue, false); } finally { a.recycle(); }
![Page 20: Chapter 10 - Views Part 2](https://reader031.fdocuments.in/reader031/viewer/2022022411/58ec86991a28abc32a8b46b1/html5/thumbnails/20.jpg)
Custom ViewGroup: Best Code Structure
• initInflate • initInstances • initWithAErs
Lab: Test Infla1on Lab: Access to UI Components Lab: Ini1ate with XML Live Demo