Create Navigation Drawer PowerPoint Presentation

Create Navigation Drawer PowerPoint Presentation

2018-02-04 27K 27 0 0

Description

Team 2. Zhong. Wang. Jiaming. Dong. Philip Wu. Lingduo. Kong. Introduction. The navigation drawer is a panel that displays the app’s main navigation options on the . left (or optionally from right) . ID: 627993

Embed code:

Download this presentation



DownloadNote - The PPT/PDF document "Create Navigation Drawer" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentations text content in Create Navigation Drawer

Slide1

Create Navigation Drawer

Team 2

Zhong

Wang

Jiaming

Dong

Philip Wu

Lingduo

Kong

Slide2

Slide3

Slide4

Slide5

Introduction

The navigation drawer is a panel that displays the app’s main navigation options on the

left (or optionally from right)

edge of the screen.

It is hidden most of the time, but is revealed when the user swipes a finger from the

left (or optionally from right)

edge of the screen

or, while at the top level of the app, the user touches the app icon in the action bar.

Slide6

- implement

a navigation drawer using the

DrawerLayout

APIs available in the

Support Library

.

Create a Drawer Layout

- To

add a navigation drawer, declare your user interface with a

DrawerLayout

object as the root view of your layout.

- Inside

the

DrawerLayout

, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

Slide7

Sample

DrawerLayout

<

android.support.v4.widget.DrawerLayout

xmlns:android

="http://schemas.android.com/

apk

/res/android"

xmlns:tools

="http://schemas.android.com/tools"

android:layout_width

="

match_parent

"

android:layout_height

="

match_parent

"

android:id

="@+id/

drawer_layout

"

android:background

="#FFFFFF"

tools:context

=".

MainActivity

"

>

<!--

The main content view

-->

<

FrameLayout

android:id

="@+id/

Frame_Layout

"

android:layout_width

="

match_parent

"

android:layout_height

="

match_parent

"

/>

<!-- The navigation drawer

-->

<

ExpandableListView

android:id

="@+id/

drawer_list_right

"

android:layout_width

="240dp"

android:layout_height

="

match_parent

"

android:layout_gravity

="end"

android:divider

="@

android:color

/transparent"

android:background

="#FFFFFF"

/>

</

android.support.v4.widget.DrawerLayout

>

Slide8

Sample DrawerLayout

- the above layout

uses a

DrawerLayout

with two child views:

Change activity_main.xml to navigation drawer layout

.

a

FrameLayout

to contain the main content (populated by a

Fragment

at runtime),

and

a

ListView

(

ExandableListView

) for

the navigation drawer.

Slide9

This layout demonstrates some important layout characteristics

:

The main content view (the

FrameLayout

above)

must be the first child

in the

DrawerLayout

because the XML order implies z-ordering and the drawer must be on top of the content

.

The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden

.

The drawer view (the

ListView

)

must specify its horizontal gravity

with the

android:layout_gravity

attribute. To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL

).

The drawer view specifies its width in

dp

units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

Slide10

Prepare MainActivity

properties

DrawerLayout

mDrawerlayout

;

ActionBarDrawerToggle

mDrawerToggle

;

ImageButton

imgRightMenu

;

ExpandableListAdapter

mDrawerList_Right

;

ExpandableListView

expendListView

;

List<String>

listDataHeader

;

HashMap

<String, List<String>>

listDataChild

;

Initialize the Drawer List

In your activity, one of the first things to do is initialize the navigation drawer's list of items. How you do so depends on the content of your app, but a navigation drawer often consists of a

ListView

, so the list should be populated by an

Adapter

(such as

ArrayAdapter

or

SimpleCursorAdapter

).

For example,

you can initialize the navigation list with a

string array

:

Slide11

onCreate(Bundle)

@Override

protected void

onCreate

(Bundle

savedInstanceState

) {

super

.onCreate

(

savedInstanceState

);

setContentView

(

R.layout.

activity_main

);

//===============Initialization of Variables=========================//

mDrawerlayout

= (

DrawerLayout

)

findViewById

(

R.id.

drawer_layout

);

imgRightMenu

= (

ImageButton

)

findViewById

(

R.id.

imgRightMenu

);

mDrawerlayout

.setDrawerListener

(

mDrawerToggle

);

expendListView

= (

ExpandableListView

)

findViewById

(

R.id.

drawer_list_right

);

// Set the list's click listener

expendListView

.setOnGroupClickListener

(

myListGroupClicked

);

prepareListData

();

mDrawerList_Right

=

new

ExpandableListAdapter

(

this

,

listDataHeader

,

listDataChild

);

// Set the adapter for the list view

expendListView

.setAdapter

(

mDrawerList_Right

);

Slide12

//============== Define a Custom Header for Navigation drawer=================//

LayoutInflater

inflator = (

LayoutInflater

)

this

.getSystemService

(

Context.

LAYOUT_INFLATER_SERVICE

);

View v =

inflator.inflate

(

R.layout.

navigation_header

,

null

);

imgRightMenu

= (

ImageButton

)

v.findViewById

(

R.id.

imgRightMenu

);

getSupportActionBar

().

setHomeButtonEnabled

(

true

);

//

getSupportActionBar

().

setDisplayHomeAsUpEnabled

(true);

getSupportActionBar

().

setDisplayShowTitleEnabled

(

false

);

getSupportActionBar

().

setDisplayUseLogoEnabled

(

false

);

getSupportActionBar

().

setDisplayShowCustomEnabled

(

true

);

getSupportActionBar

().

setBackgroundDrawable

(

new

ColorDrawable

(

Color.

parseColor

(

"#1281A9"

)));

getSupportActionBar

().

setIcon

(

new

ColorDrawable

(

getResources

().

getColor

(

android.R.color.

transparent

)));

getSupportActionBar

().

setCustomView

(v);

Slide13

imgRightMenu

.setOnClickListener

(

new OnClickListener

() {

@Override

public void

onClick

(View v) {

//

TODO Auto-generated method stub

if

(

mDrawerlayout

.isDrawerOpen

(

expendListView

)) {

mDrawerlayout

.closeDrawer

(

expendListView

);

}

else

{

mDrawerlayout

.openDrawer

(

expendListView

);

}

}

});

Slide14

private

ExpandableListView.OnGroupClickListener

myListGroupClicked

=

new

ExpandableListView.OnGroupClickListener

() {

public

boolean

onGroupClick

(

ExpandableListView

parent, View v,

int

groupPosition

,

long

id) {

if

(

groupPosition

==

3

) {

Intent preference =

new

Intent(

MainActivity.

this

,

PreferencesActivity.

class

);

startActivity

(preference);

}

return false

;

}

};

Slide15

Create menu and submenus

listDataHeader

=

new

ArrayList

<String>();

listDataChild

=

new

HashMap

<String, List<String>>();

// Adding child data

listDataHeader

.add

(

"Top 250

"

);

… …

//

Adding child data

List<String> top250 =

new

ArrayList

<String>();

top250.add(

"The Shawshank Redemption"

);

top250.add(

"The Godfather

"

);

listDataChild

.put

(

listDataHeader

.get

(

0

), top250);

// Header, Child data

listDataChild

.put

(

listDataHeader

.get

(

1

),

nowShowing

);

Slide16

ExpandableListAdapter

An adapter that links a

ExpandableListView

with the underlying data.

The

implementation of this interface will provide access to the data of the children (categorized by groups), and also instantiate

View

s for children and groups.

Slide17

ExpandableListAdapter

@Override

public

View

getChildView

(

int

groupPosition

,

final

int

childPosition

,

boolean

isLastChild

, View

convertView

,

ViewGroup

parent)

{

@Override

public

View

getGroupView

(

int

groupPosition

,

boolean

isExpanded

,

View

convertView

,

ViewGroup

parent) {

Slide18

PreferencesActivity

@Override

protected void

onCreate

(Bundle

savedInstanceState

)

{

@Override

public

boolean

onCreateOptionsMenu

(Menu menu)

{

@Override

public

boolean

onOptionsItemSelected

(

MenuItem

item) {


About DocSlides
DocSlides allows users to easily upload and share presentations, PDF documents, and images.Share your documents with the world , watch,share and upload any time you want. How can you benefit from using DocSlides? DocSlides consists documents from individuals and organizations on topics ranging from technology and business to travel, health, and education. Find and search for what interests you, and learn from people and more. You can also download DocSlides to read or reference later.