Android組件創(chuàng)建DrawerLayout導(dǎo)航
概述
本篇博客是對developer.android.com/上的Training課程的簡單翻譯,若是覺得翻譯出來的理解有困難,請點擊下方鏈接查看原文!
關(guān)于DrawerLayout的Training:http://developer.android.com/training/implementing-navigation/nav-drawer.html
關(guān)于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的第一個子元素, 因為導(dǎo)航抽屜是在主要內(nèi)容視圖的上面.
- 主要內(nèi)容視圖設(shè)置為匹配父視圖的寬度和高度, 因為它代表了整個界面導(dǎo)航抽屜是隱藏的.
- 抽屜視圖(ListView)必須指定其水平重力與android:layout_gravity屬性。支持從右到左(RTL)語言,指定值與 "start" 代替 "left"(所以抽屜里出現(xiàn)在布局的右側(cè)當(dāng)布局是RTL時).
- 抽屜視圖指定其寬度用dp單位和高度匹配父視圖。抽屜里的寬度不能超過320 dp, 所以用戶總是可以看到主要內(nèi)容視圖的一部分.
初始化抽屜列表
在你的Activity中, 第一件事就是初始化導(dǎo)航抽屜列表里面的元素, 你如何做取決于你的應(yīng)用程序的內(nèi)容,但一個導(dǎo)航抽屜通常包括一個ListView, 因此清單應(yīng)該由一個Adapter填充(例如ArrayAdapter或SimpleCursorAdapter).
例如, 這里演示了如何用String array來初始化一個導(dǎo)航列表.
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()去接收導(dǎo)航抽屜列表的點擊事件. 下一節(jié)將展示如何實現(xiàn)這個接口,當(dāng)用戶選擇一個Item時改變內(nèi)容視圖.
處理導(dǎo)航點擊事件
當(dāng)用戶選擇了抽屜列表里面的一個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)聽打開和關(guān)閉事件
偵聽抽屜打開和關(guā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), 但它也有助于正確的交互行為, 在工具欄的圖標(biāo)和導(dǎo)航抽屜之間(下一節(jié)將進(jìn)一步討論)。
就像在導(dǎo)航抽屜設(shè)計指南一樣,當(dāng)抽屜是可見的時候, 你應(yīng)該修改工具欄的內(nèi)容, 如改變標(biāo)題和刪除操作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ù)和其他所需的步驟來設(shè)置它來處理工具欄的圖標(biāo).
打開關(guān)閉應(yīng)用圖標(biāo)
用戶可以打開和關(guān)閉導(dǎo)航抽屜, 通過手指從屏幕左側(cè)的邊緣滑動, 但如果你使用工具欄, 你應(yīng)該也能允許用戶打開和關(guān)閉它, 通過觸摸應(yīng)用程序圖標(biāo). 應(yīng)用程序圖標(biāo)也可以顯示一個特殊的圖標(biāo)關(guān)于導(dǎo)航抽屜的狀態(tài). 你可以實現(xiàn)所有這些行為通過使用ActionBarDrawerToggle, 如前一節(jié)所示。
讓ActionBarDrawerToggle工作, 創(chuàng)建一個它的實例用它的構(gòu)造方法, 這就需要以下參數(shù):
- 持有抽屜的Activity.
- DrawerLayout對象.
- 一個Drawable資源作為抽屜指示器.
- 字符串資源描述"打開抽屜"動作.
- 字符串資源描述"關(guān)閉抽屜"動作.
然后, 無論你是否已經(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 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)抽屜效果
相關(guān)文章
Android MarginDesign控件TabLayout導(dǎo)航欄使用詳解
這篇文章主要為大家詳細(xì)介紹了Android MarginDesign控件TabLayout導(dǎo)航欄使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01基于Android ContentProvider的總結(jié)詳解
本篇文章是對Android ContentProvider進(jìn)行了詳細(xì)的總結(jié)與分析,需要的朋友參考下2013-05-05Android xUtils更新到3.0后的基本使用規(guī)則詳解
xUtils是基于android的開發(fā)框架,簡化了很多的開發(fā)步驟,可以說是非常好的開發(fā)工具。下面小編給大家?guī)砹薃ndroid xUtils更新到3.0后的基本使用規(guī)則詳解,感興趣的朋友一起學(xué)習(xí)吧2016-08-08Android實現(xiàn)圖片循環(huán)播放的實例方法
2013-05-05AndroidX下使用Activity和Fragment的變化詳解
這篇文章主要介紹了AndroidX下使用Activity和Fragment的變化詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04