layouts adapter lab#3 - skkuarcs.skku.edu/pmwiki/uploads/courses/swpractice3/... · introduction...
TRANSCRIPT
Mobile Programming Practice
▪ Layouts
▪ Adapter
▪ Lab#3
1
Prof. Hwansoo Han
T.A. Sung-in Hong
T.A. Minseop Jeong
Lecture schedule
Spring 2019 (Tuesday)
This schedule can be changed
M
A
R
C
H
5 12 19 26
IntroductionAndroid overview
& basic layoutLayout Advanced UI
A
P
R
I
L
2 9 16 23 30
Broadcast receivers
PA#1Services Project proposal
MID TERM
(no exam)
Content providers
M
A
Y
7 14 21 28
Advanced concepts
(1)
APIs (1)
PA#2APIs (2) Profile
J
U
N
E
4 11 18
Intro. to the Kotlin
Project
Final
Presentation
END TERM
(no class)
2
Layouts
▪ The View objects are called “widgets”
• Can be one of many subclasses, such as Button or TextView
▪ The ViewGroup objects are called “layouts”
• Can be one of many types that provide a different layout
structure, such as LinearLayout or ConstraintLayout
3
Layout parameters
▪ XML layout attributes named layout_something
define layout parameters for the View that are
appropriate for the ViewGroup in which it resides
4
Layout position
▪ A View has a location, expressed as a
pair of left and top coordinates, and
two dimensions, expressed as a width
and a height. The unit for location and
dimensions is the pixel.
▪ It is possible to retrieve the location of
a view by invoking the methods
getLeft() and getTop()
• To avoid unnecessary computations,
getRight() and getBottom() are offered.
• getRight() returns getLeft() + getWidth()
5
location
width
heig
ht
Layout Size
▪ The size of a view is expressed with a
width and a height.
▪ Drawing width and drawing height
• define the actual size of the view on the screen
• getWidth() and getHeight()
▪ Measured width and measured height
• define how big a view wants to be within its parent
• getMeasuredWidth() and getMeasuredHeight()
6
Margin, border, and padding
▪ Margin
• The space between border and its parent
▪ Padding
• The space between border and content
• setPadding(int, int, int, int) : left, top, right, bottom
• getPaddingLeft(), getPaddingTop(), getPaddingRight() and getPaddingBottom()
7*https://medium.com/@geekanamika/android-beginners-views-layouts-657a5bbeebe2
Common layouts
▪ Each subclass of the ViewGroup class provides
a unique way to display the views you nest
within it.
▪ Below are some of the more common layout
types that are built into the Android platform.
8
<Linear layout> <Relative layout> <Web view>
Example of LinearLayout
9
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical" >
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/to" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/subject" />
<EditText
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="@string/message" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="@string/send" />
</LinearLayout>
Example of RelativeLayout
10
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<Spinner
android:id="@+id/dates"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/times" />
<Spinner
android:id="@id/times"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/name"
android:layout_alignParentRight="true" />
<Button
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_below="@id/times"
android:layout_alignParentRight="true"
android:text="@string/done" />
</RelativeLayout>
Adapter
▪ When the content for your layout is
dynamic or not pre-determined, you can
use a layout that subclasses AdapterView
to populate the layout with views at
runtime.
▪ A subclass of the AdapterView class uses
an Adapter to bind data to its layout.
11
Example of adapter
12
…
import android.widget.ArrayAdapter;import android.widget.Spinner;import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {Spinner mySpinner;
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.layout_main); //example of RelativeLayout
mySpinner = findViewById(R.id.dates);ArrayList<String> myDates = new ArrayList<>();myDates.add("Mon, March, 25, 2019");myDates.add("Tue, March, 26, 2019");myDates.add("Wed, March, 27, 2019");ArrayAdapter<String> adapter1 = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1,myDates);mySpinner.setAdapter(adapter1);
}
…
[Lab – Practice #3]
13
▪ Make a list which enables to
add a new item by a user on
runtime
▪ Implement your activity to
using the list
APPENDIX A –
Layout Types and Attributes
14
Layout types
▪ Linear Layout
• LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally
▪ Relative Layout
• RelativeLayout is a view group that displays child views in relative positions
▪ Table Layout
• TableLayout is a view that groups views into rows and columns
▪ Absolute Layout
• AbsoluteLayout enables you to specify the exact location of its children
▪ Frame Layout
• The FrameLayout is a placeholder on screen that you can use to display a single view
▪ List View
• ListView is a view group that displays a list of scrollable items
▪ Grid View
• GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
15
Layout attributes
android:id
This is the ID which uniquely identifies the view.
android:layout_width
This is the width of the layout.
android:layout_height
This is the height of the layout
android:layout_marginTop
This is the extra space on the top side of the layout.
android:layout_marginBottom
This is the extra space on the bottom side of the layout.
android:layout_marginLeft
This is the extra space on the left side of the layout.
android:layout_marginRight
This is the extra space on the right side of the layout.
android:layout_gravity
This specifies how child Views are positioned.
16
android:layout_weight
This specifies how much of the extra space in th
e layout should be allocated to the View.
android:layout_x
This specifies the x-coordinate of the layout.
android:layout_y
This specifies the y-coordinate of the layout.
android:layout_width
This is the width of the layout.
android:layout_width
This is the width of the layout.
android:paddingLeft
This is the left padding filled for the layout.
android:paddingRight
This is the right padding filled for the layout.
android:paddingTop
This is the top padding filled for the layout.
android:paddingBottom
This is the bottom padding filled for the layout.