44
Hello View Frank Xu Gannon University

Frank Xu Gannon University. Linear Layout Relative Layout Table Layout

Embed Size (px)

Citation preview

Page 1: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Hello ViewFrank Xu

Gannon University

Page 2: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Linear Layout Relative Layout Table Layout

Layout

Page 3: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

LinearLayout

Page 4: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

There is a root LinearLayout ◦ defines its orientation to be vertical—all child View

s (of which it has two) will be stacked vertically. The first child is another LinearLayout 

◦ uses a horizontal orientation The second child is a LinearLayout 

◦ uses a vertical orientation. Each of these nested LinearLayouts contain

◦ several TextView elements, ◦ are oriented with each other in the manner

defined by their parent LinearLayout.

LinearLayout

Page 5: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Relative Layout

Page 6: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 7: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Purpose of RelativeLayout RelativeLayout 

◦ is a ViewGroup that displays child View elements in relative positions.

The position of a View can be specified as◦ relative to sibling elements

to the left-of or below a given element◦ in positions relative to the RelativeLayout area

aligned to the bottom, left of center

Page 8: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Table Layout

Page 10: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

HelloGridView

Page 11: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.

In this tutorial, you'll create a grid of image thumbnails. When an item is selected, a toast message will display the position of the image.

Grid View

Page 12: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 13: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Fill entire screen

Page 14: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 15: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

HelloGridView

Page 16: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

The GridView is captured from the layout with findViewById(int).

The setAdapter() method then sets a custom adapter (ImageAdapter) as the source for all items to be displayed in the grid. ◦ The ImageAdapter is created in the next step.

To do something when an item in the grid is clicked, the setOnItemClickListener() method is passed a new AdapterView.OnItemClickListener. ◦ This anonymous instance defines the onItemClick() callback

method to show a Toast that displays the index position (zero-based) of the selected item

◦ in a real world scenario, the position could be used to get the full sized image for some other task

How it works?

Page 17: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 18: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 19: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 20: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

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.).

The ViewGroup subclass is the base class for layouts, which are invisible containers that hold other Views (or other ViewGroups) and define their layout properties.

What is a View/Group View?

Page 21: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

The first method necessary is getView(). This method creates a new View for each image added to the ImageAdapter. When this is called, a View is passed in, which is normally a recycled object (at

least after this has been called once), so there's a check to see if the object is null. If it is null, an ImageView is instantiated and configured with desired properties for the image presentation

getView()

Page 22: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Image View

Page 23: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Init ImageView setLayoutParams(ViewGroup.LayoutParams) sets the height and width

for the View—this ensures that, no matter the size of the drawable, each image is resized and cropped to fit in these dimensions, as appropriate.

setScaleType(ImageView.ScaleType) declares that images should be cropped toward the center (if necessary).

setPadding(int, int, int, int) defines the padding for all sides. (Note that, if the images have different aspect-ratios, then less padding will cause for more cropping of the image if it does not match the dimensions given to the ImageView.)

Page 24: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Toast

Page 25: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

HelloTabWidget

Page 26: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 27: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Create three separate Activities Start a new project named HelloTabWidget. Create three separate Activity classes in

your project:◦ ArtistsActivity, ◦ AlbumsActivity, and ◦ SongsActivity.

These will each represent a separate tab. For now, make each one display a simple message using a TextView.

Page 28: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

This doesn't use a layout file. Just create a TextView, give it some text and set that as the content.

Page 29: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Register activities

Page 30: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Three of the core components of an application — activities, services, and broadcast receivers — are activated through messages, called intents.

Intent messaging is a facility for late run-time binding between components in the same or different applications. 

The intent itself, an Intent object, is a passive data structure holding an abstract description of an operation to be performed

Opt- intents

Page 31: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

To inform the system which implicit intents they can handle

Activities, services, and broadcast receivers can have one or more intent filters.

Each filter describes a capability of the component, a set of intents that the component is willing to receive.

Opt - Intent filters

Page 32: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

 Icon and xml file for each tab the selected icon to be a dark color (grey) the unselected icon to be a light color (white)

Page 33: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

UI- main.xml

Page 34: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

The TabHost requires◦ a TabWidget ◦ a FrameLayout ◦ a vertical LinearLayout

The FrameLayout is where the content for each tab goes, ◦ which is empty now ◦ because the TabHost will automatically embed eachActivity

 within it TabWidget and the FrameLayout elements have the

IDs tabs and tabcontent, respectively. ◦ These names must be used so that the TabHost can retrieve

references to each of them. It expects exactly these names

TabHost

Page 36: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 37: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

ListView

Page 38: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 39: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

list_item.xml Start a new project named HelloListView. Create an XML file named list_item.xml and

save it inside the res/layout/ folder.

This file defines the layout for each item that will be placed in the ListView.

Page 40: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

HelloListView.java

Page 41: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

setListAdapter(ListAdapter) automatically adds a ListView to fill the entire screen of the ListActivity.

This method takes ◦ an ArrayAdapter, which manages the array of list

items that will be placed into the ListView. The ArrayAdapter constructor takes

◦ the application Context, ◦ the layout description for each list item (created in

the previous step), and ◦ a List of objects to insert in the ListView (defined

next).

setListAdapter

Page 43: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout
Page 44: Frank Xu Gannon University.  Linear Layout  Relative Layout  Table Layout

Opt- country hard coded