文档章节

Android开发之学习官方文档Navigation Drawer记录

A
 Angels_安杰
发布于 2015/12/10 15:40
字数 2420
阅读 129
收藏 3

Creating a Navigation Drawer

PreviousNext

This lesson teaches you to:

Create a Drawer Layout

Initialize the Drawer List

Handle Navigation Click Events

Listen for Open and Close Events

Open and Close with the App Icon

The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

导航抽屉式一个显示应用程序的主要导航选项的面板,它显示在屏幕的左边。在大部分时间内它是隐藏状态的,当用户用一直手指从屏幕的左边缘滑动时,导航抽屉就会显示出来。或者在栈顶的应用程序,用户在操作栏触摸应用程序的图标时,它也会显示出来。

This lesson describes how to implement a navigation drawer using the DrawerLayout APIs available in the Support Library.

本段描述如何使用支持库中的DrawerLayout 的APIS 去实现一个导航抽屉

Navigation Drawer Design

Before you decide to use a navigation drawer in your app, you should understand the use cases and design principles defined in the Navigation Drawer design guide.

在你决定在你的应用程序中使用一个导航抽屉前,你应该了解在Navigation Drawer 设计指导中的使用案例和设计规则。

Create a Drawer Layout

创建一个抽屉布局

To add a navigation drawer, declare your user interface with aDrawerLayout object as the root view of your layout. Inside theDrawerLayout, 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.

添加一个导航抽屉,你需要将你的用户界面用一个DrawerLayout 对象作为你布局文件的根视图。DrawerLayout添加一个包含主要文本的视图,该文本视图为在屏幕中主要去显示文本内容。在抽屉隐藏时,该视图也是你的主要布局。另外一个视图包含了导航抽屉里的内容视图

For example, the following layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content (populated by a Fragment at runtime), and a ListView for the navigation drawer.

<android.support.v4.widget.DrawerLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/drawer_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<!-- The main content view -->

<FrameLayout

android:id="@+id/content_frame"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<!-- The navigation drawer -->

<ListView android:id="@+id/left_drawer"

android:layout_width="240dp"

android:layout_height="match_parent"

android:layout_gravity="start"

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp"

android:background="#111"/>

</android.support.v4.widget.DrawerLayout>

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.

在DrawerLayout中,主文本视图必须是第一个字视图。因为xml的执行顺序意味着Z轴和抽屉必须在文本的顶部

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.

主文本视图的宽高设置为匹配父窗体。因为在抽屉处于隐藏状态下进入UI界面时作为主要的视图。

The drawer view (the ListView) must specify its horizontal gravity with the android:layout_gravityattribute. 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).

抽屉视图必须制定是水平方向的listView。制定start代替left

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.

抽屉视图制定的宽是按dp为代码计算高匹配父窗体。抽屉的宽应该不超过320dp一边用户可以一直看到主文本的一部分

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

在你的activity中,第一件事情应该是初始化这个导航抽屉的列表项。如何去实现取决于你的应用程序的内容。但是一个导航抽屉通常由一个listView构成,所以如果你使用listView的话应该给它填充一个适配器

For example, here's how you can initialize the navigation list with a string array:

public class MainActivity extends Activity {

private String[] mPlanetTitles;

private DrawerLayout mDrawerLayout;

private ListView mDrawerList;

...

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mPlanetTitles = getResources().getStringArray(R.array.planets_array);

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerList = (ListView) findViewById(R.id.left_drawer);

// Set the adapter for the list view

mDrawerList.setAdapter(new ArrayAdapter<String>(this,

R.layout.drawer_list_item, mPlanetTitles));

// Set the list's click listener

mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

...

}

}

This code also calls setOnItemClickListener() to receive click events in the navigation drawer's list. The next section shows how to implement this interface and change the content view when the user selects an item.

Handle Navigation Click Events

When the user selects an item in the drawer's list, the system calls , android.view.View, int, long)">onItemClick() on theOnItemClickListener given to setOnItemClickListener().

当用户在抽屉列表中选择一个项时,系统在OnItemClickListener的onItemClick方法

What you do in the , android.view.View, int, long)">onItemClick() method depends on how you've implemented your app structure. In the following example, selecting each item in the list inserts a different Fragment into the main content view (theFrameLayout element identified by the R.id.content_frame ID):

在onItemClick方法中做什么取决于你如何实现你的应用程序结构。下面的例子演示选择每一个项都插入一个不同的Fragment到这个主要的文本视图。

private class DrawerItemClickListener implements ListView.OnItemClickListener {

@Override

public void onItemClick(AdapterView parent, View view, int position, long id) {

selectItem(position);

}

}

/** Swaps fragments in the main content view */

private void selectItem(int position) {

// Create a new fragment and specify the planet to show based on position

Fragment fragment = new PlanetFragment();

Bundle args = new Bundle();

args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);

fragment.setArguments(args);

// Insert the fragment by replacing any existing fragment

FragmentManager fragmentManager = getFragmentManager();

fragmentManager.beginTransaction()

.replace(R.id.content_frame, fragment)

.commit();

// Highlight the selected item, update the title, and close the drawer

mDrawerList.setItemChecked(position, true);

setTitle(mPlanetTitles[position]);

mDrawerLayout.closeDrawer(mDrawerList);

}

@Override

public void setTitle(CharSequence title) {

mTitle = title;

getActionBar().setTitle(mTitle);

}

Listen for Open and Close Events

监听打开或者关闭事件

To listen for drawer open and close events, call setDrawerListener() on your DrawerLayout and pass it an implementation of DrawerLayout.DrawerListener. This interface provides callbacks for drawer events such asonDrawerOpened() and onDrawerClosed().

在你的DrawerLayout中调用setDrawerListener去监听抽屉的打开或者关闭事件。你可以实现DrawerLayout.DrawerListener.去达到以上操作的目的。该接口提供了抽屉事件的回调方法。

However, rather than implementing the DrawerLayout.DrawerListener, if your activity includes the action bar, you can instead extend the ActionBarDrawerToggle class. The ActionBarDrawerToggle implementsDrawerLayout.DrawerListener so you can still override those callbacks, but it also facilitates the proper interaction behavior between the action bar icon and the navigation drawer (discussed further in the next section).

然而,如果你的activity包括了action bar ,你可以集成ActionBarDrawerToggle类,而不是实现DrawerLayout.DrawerListener。ActionBarDrawerToggle实现了DrawerLayout.DrawerListener一边你仍然可以重写那些回调方法,但是这样有助于完善操作栏图标和导航抽屉的交互行为(将在下一章节讨论。

As discussed in the Navigation Drawer design guide, you should modify the contents of the action bar when the drawer is visible, such as to change the title and remove action items that are contextual to the main content. The following code shows how you can do so by overriding DrawerLayout.DrawerListener callback methods with an instance of the ActionBarDrawerToggle class:

正如导航抽屉设置指南中所讨论的,在抽屉是可见状态时,你应该修改action bar的内容,例如改变主要文本上下文的标题或者移除操作项。以下代码向你展示如何在ActionBarDrawerToggle的实例对象中去覆盖DrawerLayout.DrawerListener回调方法

public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;

private ActionBarDrawerToggle mDrawerToggle;

private CharSequence mDrawerTitle;

private CharSequence mTitle;

...

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

...

mTitle = mDrawerTitle = getTitle();

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,

R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

/** Called when a drawer has settled in a completely closed state. */

public void onDrawerClosed(View view) {

super.onDrawerClosed(view);

getActionBar().setTitle(mTitle);

invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

}

/** Called when a drawer has settled in a completely open state. */

public void onDrawerOpened(View drawerView) {

super.onDrawerOpened(drawerView);

getActionBar().setTitle(mDrawerTitle);

invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()

}

};

// Set the drawer toggle as the DrawerListener

mDrawerLayout.setDrawerListener(mDrawerToggle);

}

/* Called whenever we call invalidateOptionsMenu() */

@Override

public boolean onPrepareOptionsMenu(Menu menu) {

// If the nav drawer is open, hide action items related to the content view

boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);

menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);

return super.onPrepareOptionsMenu(menu);

}

}

The next section describes the ActionBarDrawerToggle constructor arguments and the other steps required to set it up to handle interaction with the action bar icon.

下面章节讨论ActionBarDrawerToggle的构造参数和其他的在创建和操作action bar 图标时的要求的步骤

Open and Close with the App Icon

Users can open and close the navigation drawer with a swipe gesture from or towards the left edge of the screen, but if you're using the action bar, you should also allow users to open and close it by touching the app icon. And the app icon should also indicate the presence of the navigation drawer with a special icon. You can implement all this behavior by using the ActionBarDrawerToggle shown in the previous section.

用户可以从屏幕的左边缘用一个滑动操作打开或者关闭导航抽屉,但如果你使用action bar,你应该允许用户通过触摸应用程序图标打开和关闭导航抽屉。应用突变也应该用一个指定的图标指明导航抽屉。你通过可以使用ActionBarDrawerToggle是实现所有的行为

To make ActionBarDrawerToggle work, create an instance of it with its constructor, which requires the following arguments:

The Activity hosting the drawer.

The DrawerLayout.

A drawable resource to use as the drawer indicator.

The standard navigation drawer icon is available in the Download the Action Bar Icon Pack.

A String resource to describe the "open drawer" action (for accessibility).

A String resource to describe the "close drawer" action (for accessibility).

Then, whether or not you've created a subclass of ActionBarDrawerToggle as your drawer listener, you need to call upon your ActionBarDrawerToggle in a few places throughout your activity lifecycle:

public class MainActivity extends Activity {

private DrawerLayout mDrawerLayout;

private ActionBarDrawerToggle mDrawerToggle;

...

public void onCreate(Bundle savedInstanceState) {

...

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

mDrawerToggle = new ActionBarDrawerToggle(

this, /* host Activity */

mDrawerLayout, /* DrawerLayout object */

R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */

R.string.drawer_open, /* "open drawer" description */

R.string.drawer_close /* "close drawer" description */

) {

/** Called when a drawer has settled in a completely closed state. */

public void onDrawerClosed(View view) {

super.onDrawerClosed(view);

getActionBar().setTitle(mTitle);

}

/** Called when a drawer has settled in a completely open state. */

public void onDrawerOpened(View drawerView) {

super.onDrawerOpened(drawerView);

getActionBar().setTitle(mDrawerTitle);

}

};

// Set the drawer toggle as the DrawerListener

mDrawerLayout.setDrawerListener(mDrawerToggle);

getActionBar().setDisplayHomeAsUpEnabled(true);

getActionBar().setHomeButtonEnabled(true);

}

@Override

protected void onPostCreate(Bundle savedInstanceState) {

super.onPostCreate(savedInstanceState);

// Sync the toggle state after onRestoreInstanceState has occurred.

mDrawerToggle.syncState();

}

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

mDrawerToggle.onConfigurationChanged(newConfig);

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Pass the event to ActionBarDrawerToggle, if it returns

// true, then it has handled the app icon touch event

if (mDrawerToggle.onOptionsItemSelected(item)) {

return true;

}

// Handle your other action bar items...

return super.onOptionsItemSelected(item);

}

...

}


© 著作权归作者所有

A
粉丝 5
博文 138
码字总数 105958
作品 0
广州
程序员
私信 提问
Navigation Drawer详解-Google推出的用来取代Sliding Menu的控件(一

相信Sliding Menu很多人都用过,在Android和iOS的app中,越来越多的开发者都会把自己的菜单界面放在一个列表里,然后让用户通过向右(或者向左)滑动的操作看到应用所有的功能。Google官方的...

科技创造
2014/10/07
0
0
Android Navigation Drawer简记

Android Navigation Drawer简记 小憩之地2014-04-20396 阅读 AndroidNavigation 一段时间没有接触Android开发,发现多了不少东西。比如这里的navigation drawer,现在已经有官方support lib...

小憩之地
2014/04/20
0
0
开源中国 OsChina Android 客户端源码分析(2)滑动菜单DrawerLayout

1滑动菜单oschina使用了android.support.v4.widget.DrawerLayout,之前没有用过这个控件,百度了下,大致了解如下: 1.1类似与LinearLayout,就是一个布局控件。 1.2使用时,其有两部分组成,...

姬鑫
2015/05/20
0
3
Android Studio3.3 Navigation Editor(导航编辑器)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yiranhaiziqi/article/details/86593535 Android Studio3.3 Navigation Editor(导航编辑器)简单使用 AS 3.3...

ImportSUC
01/22
0
0
解决?android:attr/listPreferredItemHeightSmall requires API level 14 (current min is 10)问题

Android-解决Navigation Drawer自定义drawer_list_item.xml在API14以下版本中不能添加两个attr的问题 如果AndroidMenifest中的android:minSdkVersion="?"低于14的话会出现?android:attr/lis......

已销号
2014/08/29
7.6K
0

没有更多内容

加载失败,请刷新页面

加载更多

RocketMQ的事务投递

RocketMQ的事务投递 这是阿里的分布式事务图: 1、A服务先发送个Half Message给Brock端,消息中携带 B服务 即将要+100元的信息。 2、当A服务知道Half Message发送成功后,那么开始第3步执行本...

春哥大魔王的博客
15分钟前
1
0
Qt编写自定义控件31-面板仪表盘控件

一、前言 在Qt自定义控件中,仪表盘控件是数量最多的,写仪表盘都写到快要吐血,可能是因为各种工业控制领域用的比较多吧,而且仪表盘又是比较生动直观的,这次看到百度的echart中有这个控件...

飞扬青云
21分钟前
1
0
DisplayPort 迎来重大更新,数据带宽性能提高3倍

VESA宣布了他们对DisplayPort接口三年来的第一次重大更新。 与DP 1.4a相比,DisplayPort 2.0提供了三倍于DP 1.4a的数据带宽性能,支持超过8K的分辨率,更高的刷新率和更高分辨率的HDR,以及其...

linuxCool
28分钟前
1
0
《Linux就该这么学》2019年7月20日第八天上课笔记

du命令 du -sh /newFS/ 察看文件/文件夹数据占用量 SWAP 交换分区的设置 磁盘容量配额 RHEL 5/6 usrquota RHEL 7 quota 软硬连接 ln 软 指针指向inode 硬 建立新的inode RAID 0 1 5 1+0...

2lodoss
30分钟前
1
0
适合钱包应用开发的ERC20代币数据集

Erc20Tokens数据集包含超过1000种主流的以太坊ERC20代币的描述数据清单和图标,可用于钱包等区块链应用的开发,支持使用Java、Python、Php、NodeJs、C#等各种开发语言查询主流ERC20代币的相关...

汇智网教程
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部