574
技術社區[雲棲]
Android抽屜效果 DrawerLayout 入門經驗總結
今天試了試這個抽屜布局的效果,結果很崩潰無語
網上很多資料都千篇一律,感覺都有問題,下麵總結下幾點經驗:
先上個效果圖:
1. layout 布局文件中怎麼寫:
<android.support.v4.widget.DrawerLayout xmlns:andro android: android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F6F6F6" > <!-- 抽屜底部遮罩層 默認不可見 --> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" /> <!-- 抽屜打開後顯示的菜單 默認不可見 --> <ListView android: android:layout_width="240dp" android:layout_height="match_parent" android:layout_gravity="start" android:choiceMode="singleChoice" android:background="#FFF" /> <!-- 其他頁麵內容將直接顯示 --> <android.support.v4.view.ViewPager android: android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> </android.support.v4.widget.DrawerLayout>
要兼容低版本的話用 android.support.v4.widget.DrawerLayout
裏麵固定的結構:
第一個子節點是:FrameLayout 顯示為透明黑色遮罩,點擊後自動關閉抽屜,不寫也能運行,但觸屏時會崩潰
第二個子節點是:ListView
這兩個默認是不顯示的,其他布局視圖都會直接顯示出來
我一開始看了網上很多例子,但都沒有提說到除了抽屜的布局視圖之外的視圖究竟放哪裏,我嚐試了很多方法,發現隻能將其他布局視圖代碼放在 DrawerLayout 內部才能正常使用,否則要麼是相互覆蓋,或者就是觸屏事件失效,滾動等效果全部失效。
2. JAVA代碼
package com.ai9475.meitian.ui; import android.content.Intent; import android.content.res.Configuration; import android.os.Bundle; import android.support.v4.app.ActionBarDrawerToggle; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.ArrayAdapter; import android.widget.ListView; import com.ai9475.meitian.R; import com.ai9475.util.ZLog; import com.joanzapata.android.iconify.IconDrawable; import com.joanzapata.android.iconify.Iconify; /** * 日記列表 * Created by ZHOUZ on 14-3-10. */ public final class MainActivity extends BaseActivity { private static final String TAG = "MainActivity"; private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mDrawerToggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ZLog.i(TAG, "onCreate"); setContentView(R.layout.activity_main); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); String[] list = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"}; ListView listView = (ListView) findViewById(R.id.drawerListView); listView.setAdapter(new ArrayAdapter<String>(this, R.layout.list_drawer_item, list)); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout); mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START); if (mDrawerLayout == null) { ZLog.i(TAG, "mDrawerLayout is null"); } mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) { @Override public void onDrawerClosed(View drawerView) { ZLog.i(TAG, "onDrawerClosed"); super.onDrawerClosed(drawerView); getSupportActionBar().setTitle("close drawer"); supportInvalidateOptionsMenu(); } @Override public void onDrawerOpened(View drawerView) { ZLog.i(TAG, "onDrawerOpened"); super.onDrawerOpened(drawerView); getSupportActionBar().setTitle("open drawer"); supportInvalidateOptionsMenu(); } }; mDrawerLayout.setDrawerListener(mDrawerToggle); } @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 onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); getMenuInflater().inflate(R.menu.main, menu); MenuItem home = menu.findItem(R.id.goto_main_activity); if (home != null) { home.setIcon(new IconDrawable(this, Iconify.IconValue.fa_home) .colorRes(R.color.nav_icon) .actionBarSize()); } MenuItem my = menu.findItem(R.id.goto_my_activity); if (my != null) { my.setIcon(new IconDrawable(this, Iconify.IconValue.fa_user) .colorRes(R.color.nav_icon) .actionBarSize()); } MenuItem tags = menu.findItem(R.id.goto_tags_activity); if (tags != null) { tags.setIcon(new IconDrawable(this, Iconify.IconValue.fa_search) .colorRes(R.color.nav_icon) .actionBarSize()); } MenuItem edit = menu.findItem(R.id.goto_edit_activity); if (edit != null) { edit.setIcon(new IconDrawable(this, Iconify.IconValue.fa_plus) .colorRes(R.color.nav_icon) .actionBarSize()); } MenuItem more = menu.findItem(R.id.show_more_menu); if (more != null) { more.setIcon(new IconDrawable(this, Iconify.IconValue.fa_ellipsis_vertical) .colorRes(R.color.nav_icon) .actionBarSize()); } MenuItem exit = menu.findItem(R.id.goto_exit); if (exit != null) { exit.setIcon(new IconDrawable(this, Iconify.IconValue.fa_sign_out) .colorRes(R.color.nav_icon) .actionBarSize()); } return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item != null && item.getItemId() == android.R.id.home) { if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) { mDrawerLayout.closeDrawer(GravityCompat.START); } else { mDrawerLayout.openDrawer(GravityCompat.START); } return true; } super.onOptionsItemSelected(item); int id = item.getItemId(); Intent intent; switch (id) { case R.id.goto_my_activity: if (this.checkLogin(MyActivity.class)) { intent = new Intent(this, MyActivity.class); startActivity(intent); } break; } return true; } }
我使用了 actionBar ,網上的很多教程都提到使用 actionBar 的 home 按鈕來控製 抽屜的打開和關閉,但卻都沒有提到如何控製的,甚至官方例子裏麵也沒有看到,我試了半天都沒有觸發 ActionBarDrawerToggle 裏麵的時間,後來好不容易找到一篇文章提說到自己實現控製開關抽屜的方法,於是加入該代碼在 onOptionsItemSelected 中才終於實現了:
if (item != null && item.getItemId() == android.R.id.home) { if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) { mDrawerLayout.closeDrawer(GravityCompat.START); } else { mDrawerLayout.openDrawer(GravityCompat.START); } return true; }
好了幾經折騰終於能看到效果了,遮蓋正常、VerPager 以及 pager 內部的 fragment中的 listView 的觸屏滾動事件均正常
正以為大功告成的時候,又發現個無語的問題,抽屜裏麵的 ListView 居然不能滾動,臥槽啊。。。穀歌搜索了好半天沒找到解決辦法,實在頂不住了,放棄吧。。
話說這個抽屜效果太難看了,兼容性也太差了,問題這麼多,還是那個 slidingMenu 好些。
還是暫時放棄這個 DrawerLayout 了,浪費生命
最後更新:2017-04-03 12:55:36