Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 1
CHAPTER CHAPTER 44:: LAYOUTS AND VIEWSLAYOUTS AND VIEWS
1
Dr. Sonia Saïd LAJMIPhD in Computer Sciences
Level 5: Baccalaureus in Computer Sciences
Layout.xmlLayout.xml
2
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 2
Layout RequirementsLayout Requirements
android:layout_width: The width of the element.
android:layout_height: The height of the element.
Both of those width and height attributes can either take a numeric size value or simply a constant based on the expected size behavior. The supported constant values are:
◦ match_Parent /fill_parent View wants to be as big as its parent.
◦ wrap-_Content View wants to be just big enough to enclose its content.
3
Linear LayoutLinear Layout The LinearLayout organizes its elements in a linear
fashion either as a horizontal or a vertical row
4
The android:orientation attribute can take the following values:
horizontal: Organized as a horizontal row.
vertical: Organized as a vertical row.
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 3
Linear Layout WeightLinear Layout Weight
By default, the space distribution is done equally for each child element
5
Linear Layout GravityLinear Layout Gravity
LinearLayout positions its elements aligned top.
android:layout_gravity used to change default behavior.
specify how View element should be positioned on the screen.
in Horizontal Orientation
◦ top: Position the View at the top of its container.
◦ center_vertical: Position the View in the vertical center of its container.
◦ bottom: Position the View to the bottom of its container.
in Vertical Orientation
◦ left: Position the View to the left of its container.
◦ center_horizontal Position the View in the horizontal center of its container.
◦ right: Position the View to the right of its container.
6
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 4
Relative LayoutRelative Layout all kinds of user interfaces can be designed by LinearLayouts;
RelativeLayout to design complex user interfaces
Positioning Relative to a View
◦ android:layout_above: Position the bottom edge above View.
◦ android:layout_alignBaseline: Position the baseline on the baseline of View
◦ android:layout_alignBottom: Position the bottom edge to match that of View
◦ android:layout_alignEnd: Position the end edge to match that of the View
◦ android:layout_alignLeft: Position the left edge to match that of the View
◦ android:layout_alignRight: Position the right edge to match that of the View
◦ android:layout_alignStart: Position the start edge to match that of the View.
7
Positioning Relative to a ViewPositioning Relative to a View
android:layout_alignTop: Position the top edge to match that of the View.
android:layout_below: Position the top edge below that of the View.
android:layout_toEndOf: Position the start edge to match the end edge of the View.
android:layout_toLeftOf: Position the right edge to match the left edge of the View.
android:layout_toRightOf: Position the left edge to match the right edge of the View.
android:layout_toStartOf: Position the end edge to match the
start edge of the View.8
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 5
Positioning Relative to Parent ViewPositioning Relative to Parent View
android:layout_alignParentBottom: Position thebottom edge to match that of the parent view.
android:layout_alignParentEnd: Position the end edgeto match that of the parent view.
android:layout_alignParentLeft: Position the left edgeto match that of the parent view.
android:layout_alignParentRight: Position the rightedge to match that of the parent view.
android:layout_alignParentStart: Position the startedge to match that of the parent view.
9
Positioning Relative to Parent ViewPositioning Relative to Parent View
android:layout_alignParentTop: Position the top edge to match
that of the parent view.
android:layout_centerHorizontal: If true, centers this view
horizontally within its parent.
android:layout_centerInParent: If true, centers this view both
horizontally and vertically within its parent.
android:layout_centerVertical: If true, centers this view vertically
within its parent.
10
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 6
Grid ViewGrid View
11
Grid ViewGrid View android:columnWidth: Width of each column.
android:gravity: Gravity of cell content.
android:horizontalSpacing: Horizontal spacingbetween columns.
android:numColumns: Number of columns to show.
android:stretchMode: How columns should stretch to fill the empty space. It can take the following:
◦ none: Stretching is disabled.
◦ spacingWidth: Spacing between each column is stretched.
◦ columnWidth: Each column is stretched.
◦ spacingWidthUniform: Spacing between each column is uniformly stretched.
android:verticalSpacing: Vertical spacing between rows.12
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 7
Accessing Individual Views in a Accessing Individual Views in a LayoutLayout Assigning a Unique ID to a View Element
13
Finding a View by Its Unique ID
ViewsViews
• Output Controls
• TextView
• ImageView
• ProgressBar
• Space
• Input Controls
• EditText
• Button
• ImageButton
• ToggleButton, Switch, and CheckBox
• Radio Button14
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 8
Text ViewText View
15
Text ViewText View android:autoLink: If set, automatically converts links
such as URLs (uniform resource locators) and e-mailaddresses in the text to clickable links.
android:ellipsize: If set, words that are longer than the available
width get ellipsized instead of broken in the middle
—such as start, middle, end.
android:gravity: Text gravity, such as right|bottom.
android:singleLine: If set, the text won’t span to multiple lines.
android:text: Text to display.
android:textColor: Text color, such as #ff0000.
android:textSize: Size of the text, such as 12sp.
android:textStyle: Text style, such as bold, italic.
android:typeface: Text typeface, such as normal, sans.16
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 9
ImageViewImageView
17
ImageViewImageView
android:adjustViewBounds: If set, adjusts its bounds to preserve the aspect ratio.
android:cropToPadding: If set, crops the image to fitwithin its padding.
android:scaleType: Controls how the image should bescaled, such as matrix, fitXY, fitStart, fitCenter,
fitEnd, etc.
android:src: Image source as a resource ID or a color.
android:tint: Tinting color for the image.
android:tintMode: Blending mode to apply image tint,such as multiply, add.
18
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 10
ProgressBarProgressBar
19
ProgressBarProgressBar
android:indeterminate: If set, enables theindeterminate mode.
android:max: Maximum value the progress can take.
android:progress: Progress value.
style: The style for the ProgressBar; some of the stylesthat are provided by the Android platform are
◦ @android:style/Widget.ProgressBar.Horizontal :Horizontal progress bar.
◦ @android:style/Widget.ProgressBar.Small: Small spinner icon for indeterminate progress bar.
◦ @android:style/Widget.ProgressBar.Large: Large spinnericon for indeterminate progress bar.@android:style/Widget.ProgressBar.Inverse: Reversespinning icon for indeterminate progress bar.
20
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 11
SpaceSpace
Space is a lightweight View object that can be used to insert gaps between other components in both directions.
21
ViewsViews
• Output Controls
• TextView
• ImageView
• ProgressBar
• Space
• Input Controls
• EditText
• Button
• ImageButton
• ToggleButton, Switch, and CheckBox
• Radio Button22
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 12
EditTextEditText
android:autoText: If set, automatically corrects some ofthe common spelling errors.
android:capitalize: If set, automatically capitalizeswhat the user types.
android:cursorVisible: If set, makes the cursor visible.
android:digit: If set, only accepts the numeric input.
android:enabled: Specifies whether the control is enabled.
android:password: If set, displays the characters as password dots instead of themselves.
android:phoneNumber: If set, enables the phone number input method.
23
ButtonButton
The Button is a subclass of the TextView class. Allrelevant XML attributes of a TextView also apply to a Button.
24
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 13
ImageButtonImageButton
ImageButton not a subclass of the Button class
Is subclass of ImageView class. All XMLattributes supported by the ImageView also apply to the ImageButton,
the click events on an ImageButton are still received through the OnClickListener interface
25
ToggleButtonToggleButton
android:disabledAlpha: The alpha to apply to the indicator
when disabled.
android:textOff: Text to show when not checked.
android:textOn: Text to show when checked.
android:checked: Toggled or not.
26
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 14
SwitchSwitch
android:showText: Show the text or not.
android:textOff: Text to show when not checked.
android:textOn: Text to show when checked.
android:checked: Switched or not.
android:thumb: Drawable to use as the thumb.
android:track: Drawable to use as the track.
27
CheckBoxCheckBox
CheckBox subclass Button class,
supports all the XML attributes supported by the Button class
+android:checked: Checked or not.
28
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 15
CheckBoxCheckBox
Getting the Checked State
29
Getting Notified on Checked State Change
Radio ButtonRadio Button RadioButton subclass Button class,
accepts all of the XML attributes of the Button class,
+ android:checked checked state by default.
30
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 16
Getting Notified on Getting Notified on RadioButtonRadioButtonChecked ChangeChecked Change
31
if(email.isChecked())//do something
Getting the Checked State
Event ListenerEvent Listener
There are 3 manners to get an event after the user make the action(click, focus, itemclick,…):
set the listener with:
Objcet.setOnXXXListener(new OnXXXListener(){
OnXXX(..){..}…})
In the layout/layout.xml, add android:onXXX (i.e,
onClick)=“X” property and definie X(View V) in the corresponding activity
You can’t redefine onXXX() (abuse of inheritence!)32
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 17
to create a DYNAMIC layout contents –one where the contents are dynamic (maybe read in from database or???)
Subclasses of AdapterView
RELATED LAYOUT TAGSRELATED LAYOUT TAGS
SOME Examples of Layout Tags that can load SOME Examples of Layout Tags that can load contents/data dynamicallycontents/data dynamically
ListView Gallery GridView
All these (and there are more) are descendants of AdapterView
22/10/2017
(c) Dr Sonia Sail LAJMI College of Computer Sciences & IT (girl Section) 18
ListView <ListView …..>ListView <ListView …..>
A view that shows items in a
vertically scrolling list.
Attributes
android:divider Drawable or color to draw between list items.
android:dividerHeight Height of the divider.
android:entries Reference to an array resource that will populate the ListView.
android:footerDividersEnabled When set to false, the ListView will not draw the divider before each footer view.
android:headerDividersEnabled When set to false, the ListView will
not draw the divider after each header view.
CodeCode——setting up Gallerysetting up Gallery
@Overridepublic void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.main); //use xml file that contain a <Gallery>
Gallery gallery = (Gallery) findViewById(R.id.gallery);gallery.setAdapter(new ImageAdapter(this));
gallery.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView parent, View v, int position,
long id) {Toast.makeText(HelloGallery.this, "" + position,
Toast.LENGTH_SHORT).show();}
});}
We need a “HANDLE” to the Gallerywe created from XML in our Java code to