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
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
Slide2Slide3Slide4Slide5
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
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
Create Navigation Drawer
Team 2
Zhong
Wang
Jiaming
Dong
Philip Wu
Lingduo
Kong
Slide2Slide3Slide4Slide5Introduction
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.
Slide7Sample
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
>
Slide8Sample 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.
Slide9This 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.
Slide10Prepare 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
:
Slide11onCreate(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);
Slide13imgRightMenu
.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
);
}
}
});
Slide14private
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
;
}
};
Slide15Create 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
);
Slide16ExpandableListAdapter
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.
Slide17ExpandableListAdapter
@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) {
Slide18PreferencesActivity
@Override
protected void
onCreate
(Bundle
savedInstanceState
)
{
@Override
public
boolean
onCreateOptionsMenu
(Menu menu)
{
@Override
public
boolean
onOptionsItemSelected
(
MenuItem
item) {