Android組件創(chuàng)建DrawerLayout導航
概述
本篇博客是對developer.android.com/上的Training課程的簡單翻譯,若是覺得翻譯出來的理解有困難,請點擊下方鏈接查看原文!
關于DrawerLayout的Training:http://developer.android.com/training/implementing-navigation/nav-drawer.html
關于DrawerLayout的API:http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
創(chuàng)建抽屜布局
創(chuàng)建一個抽屜布局必須得以DrawerLayout作為XML文件的根節(jié)點,記住,DrawerLayout引用的是Android.support.v4.DrawerLayout,然后在布局內(nèi)部添加內(nèi)容視圖區(qū)域和一個或者兩個抽屜視圖區(qū)域,這里理解抽屜視圖即為上面描述的菜單視圖。例如下面一段布局中顯示,在布局中添加一個FrameLayout作為內(nèi)容區(qū)域(通常用來呈現(xiàn)Fragment),另外在下面定義了一個listView用來呈現(xiàn)抽屜菜單視圖:
<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>
這個布局文件示范了一些重要的布局特征.
- 主要內(nèi)容的視圖(FrameLayout)必須是DrawLayout的第一個子元素, 因為導航抽屜是在主要內(nèi)容視圖的上面.
- 主要內(nèi)容視圖設置為匹配父視圖的寬度和高度, 因為它代表了整個界面導航抽屜是隱藏的.
- 抽屜視圖(ListView)必須指定其水平重力與android:layout_gravity屬性。支持從右到左(RTL)語言,指定值與 "start" 代替 "left"(所以抽屜里出現(xiàn)在布局的右側(cè)當布局是RTL時).
- 抽屜視圖指定其寬度用dp單位和高度匹配父視圖。抽屜里的寬度不能超過320 dp, 所以用戶總是可以看到主要內(nèi)容視圖的一部分.
初始化抽屜列表
在你的Activity中, 第一件事就是初始化導航抽屜列表里面的元素, 你如何做取決于你的應用程序的內(nèi)容,但一個導航抽屜通常包括一個ListView, 因此清單應該由一個Adapter填充(例如ArrayAdapter或SimpleCursorAdapter).
例如, 這里演示了如何用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());
...
}
}
這個代碼調(diào)用setOnItemClickListener()去接收導航抽屜列表的點擊事件. 下一節(jié)將展示如何實現(xiàn)這個接口,當用戶選擇一個Item時改變內(nèi)容視圖.
處理導航點擊事件
當用戶選擇了抽屜列表里面的一個Item時, 系統(tǒng)調(diào)用onItemClickListener上的onItemClick(), 給setOnItemClickListener().
你在onItemClick()方法里面做什么, 取決于你的app實現(xiàn)的結(jié)構(gòu). 在下面的例子中, 選擇每一個Item都會在主要內(nèi)容的布局中插入一個不同的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);
}
監(jiān)聽打開和關閉事件
偵聽抽屜打開和關閉事件,調(diào)用你的DrawerLayout setDrawerListener(), 并將其傳遞給DrawerLayout.DrawerListener的實現(xiàn). 這個接口提供了回調(diào)抽屜事件, 如onDrawerOpened()和onDrawerClosed ()。
然而, 相對于實現(xiàn)DrawerLayout.DrawerListener, 如果你的Activity包括工具欄, 可以代替繼承ActionBarDrawerToggle類. ActionBarDrawerToggle實現(xiàn)了DrawerLayout.DrawerListener. 所以你仍然可以覆蓋這些回調(diào), 但它也有助于正確的交互行為, 在工具欄的圖標和導航抽屜之間(下一節(jié)將進一步討論)。
就像在導航抽屜設計指南一樣,當抽屜是可見的時候, 你應該修改工具欄的內(nèi)容, 如改變標題和刪除操作Item. 下面的代碼用ActionBarDrawerToggle類的一個實例, 顯示了如何重寫DrawerLayout.DrawerListener的回調(diào)方法:
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);
}
}
下一節(jié)描述ActionBarDrawerToggle構(gòu)造函數(shù)參數(shù)和其他所需的步驟來設置它來處理工具欄的圖標.
打開關閉應用圖標
用戶可以打開和關閉導航抽屜, 通過手指從屏幕左側(cè)的邊緣滑動, 但如果你使用工具欄, 你應該也能允許用戶打開和關閉它, 通過觸摸應用程序圖標. 應用程序圖標也可以顯示一個特殊的圖標關于導航抽屜的狀態(tài). 你可以實現(xiàn)所有這些行為通過使用ActionBarDrawerToggle, 如前一節(jié)所示。
讓ActionBarDrawerToggle工作, 創(chuàng)建一個它的實例用它的構(gòu)造方法, 這就需要以下參數(shù):
- 持有抽屜的Activity.
- DrawerLayout對象.
- 一個Drawable資源作為抽屜指示器.
- 字符串資源描述"打開抽屜"動作.
- 字符串資源描述"關閉抽屜"動作.
然后, 無論你是否已經(jīng)創(chuàng)建了一個ActionBarDrawerToggle的子類作為你的抽屜的Listener, 你需要在幾個Activity生命周期的地方, 調(diào)用你的ActionBarDrawerToggle:
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);
}
...
}

官方Demo:http://xiazai.jb51.net/201701/yuanma/NavigationDrawer(jb51.net).rar
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android之側(cè)滑菜單DrawerLayout的使用介紹
- Android組件DrawerLayout仿網(wǎng)易新聞v4.4側(cè)滑菜單
- Android DrawerLayout實現(xiàn)抽屜效果實例代碼
- Android Drawerlayout側(cè)拉欄事件傳遞問題的解決方法
- Android實現(xiàn)右邊抽屜Drawerlayout效果
- Android DrawerLayout帶有側(cè)滑功能的布局類(2)
- Android DrawerLayout帶有側(cè)滑功能的布局類(1)
- Android App中DrawerLayout抽屜效果的菜單編寫實例
- Android組件之DrawerLayout實現(xiàn)抽屜菜單
- Android開發(fā)之DrawerLayout實現(xiàn)抽屜效果
相關文章
Android自定義View實現(xiàn)抽獎轉(zhuǎn)盤
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)抽獎轉(zhuǎn)盤,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12
Android ConnectivityManager網(wǎng)絡管理詳解
在android平臺中ConnectivityManager主要負責查詢網(wǎng)絡連接狀態(tài)以及在連接狀態(tài)有變化的時候發(fā)出通知,這篇文章主要介紹了Android ConnectivityManager網(wǎng)絡管理2022-11-11
Android實現(xiàn)QQ登錄界面遇到問題及解決方法
本文給大家介紹android仿qq登錄界面的實現(xiàn)代碼,在實現(xiàn)此功能過程中遇到各種問題,但是最終都順利解決,如果大家對android qq登錄界面實現(xiàn)方法感興趣的朋友一起學習吧2016-09-09
Android實現(xiàn)GridView中的item自由拖動效果
在前一個項目中,實現(xiàn)了一個功能是gridview中的item自由拖到效果,實現(xiàn)思路很簡單,主要工作就是交換節(jié)點,以及拖動時的移動效果,下面小編給大家分享具體實現(xiàn)過程,對gridview實現(xiàn)拖拽效果感興趣的朋友一起看看吧2016-11-11
Android Flutter利用CustomPaint繪制基本圖形詳解
CustomPaint其實和前端的Canvas基本上是一樣的,前端Canvas支持的繪制方法CustomPaint都支持,畢竟CustomPaint其實也是基于Canvas實現(xiàn)的。本篇我們來介紹 CustomPaint 基本圖形的繪制,感興趣的可以了解一下2022-07-07
Android基于TextView屬性android:ellipsize實現(xiàn)跑馬燈效果的方法
這篇文章主要介紹了Android基于TextView屬性android:ellipsize實現(xiàn)跑馬燈效果的方法,涉及Android跑馬燈效果所涉及的TextView相關屬性與使用方法,需要的朋友可以參考下2016-08-08
Android開發(fā)之利用ListView動態(tài)刷新某個Item
這篇文章主要介紹了Android開發(fā)之利用ListView動態(tài)刷新某個Item的方法,文章給出了詳解的示例代碼,相信對大家的理解和學習具有一定的參考借鑒價值,有需要的朋友們下面來一起跟著小編學習學習吧。2016-12-12
Android studio git創(chuàng)建與刪除標簽(Tag)的教程詳解
這篇文章主要介紹了Android studio git創(chuàng)建與刪除標簽(Tag)的教程詳解,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-12-12

