UI——Material Design設計之滑動菜單詳解

滑動菜單

          滑動菜單是Material Design 中最常見的效果之一。

       所謂的滑動菜單就是將一些菜單選項隱藏起來，而不是放置在主屏幕上，然後可以通過滑動的方式將菜單顯示出來。這種方式既節省了屏幕空間，又實現了非常好的動畫效果，是Material Design中推薦的做法。

          DrawerLayout

         藉助這個控件，實現滑動菜單簡單又方便。首先它是一個佈局，在佈局中允許放入兩個直接子控件，第一個子控件是主屏幕中顯示的內容，第二個子控件是滑動菜單中顯示的內容。因此，我們可以對activity_main.xml中的代碼做如下修改：

             

    <!-- 第二部分 隱藏部分-->

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
  android:text="This is menu"
android:textSize="30sp"
android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>      

        可以看出，最外層使用了DrawerLayout，這個控件是由support-v4庫提供的。DrawerLayout中放置了兩個直接子控件，第一個子控件是FrameLayout，用於作爲主屏幕中顯示的內容；第二個子控件這裏使用了一個TextView，用於作爲滑動菜單中顯示的內容，其實使用什麼都可以。

       但是，關於第二個子控件有一點需要注意，layout_gravity這個屬性是必須指定的，用於說明滑動控件所處位置。指定left表示在左邊，right表示在右邊，這裏我指定了start，表示會根據系統語言進行判斷，如果系統語言是從左往右的，比如英語、漢語，滑動菜單就在左邊，如果系統語言是從右往左的，比如阿拉伯語，滑動菜單就在右邊。

       現在，就可以運行程序了！！！

        上圖，因爲只有在屏幕的左側邊緣進行拖動時才能將菜單拖出來，但是很多用戶根本就不知道？

        Material Design 建議的做法是在Toolbar的最左邊加入一個導航按鈕，點擊按鈕也會將滑動菜單的內容展示出來。防止一些用戶不知道屏幕左側邊緣是可以拖動的。

        下面開始實現這個功能，修改MainActivity中的代碼，如下所示：    

public class MainActivity extends AppCompatActivity{ private DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout); //獲取ActionBar ActionBar actionBar=getSupportActionBar(); if(actionBar != null){

//顯示導航按鈕 actionBar.setDisplayHomeAsUpEnabled(true); //設置圖片 actionBar.setHomeAsUpIndicator(R.drawable.ic_menu); } } 。 。 。 @Override public boolean onOptionsItemSelected( MenuItem item ){ switch(item.getItemId()){

//HomeAsUp按鈕id永遠是android.R.id.home case android.R.id.home: //顯示滑動菜單 mDrawerLayout.openDrawer(GravityCompat.START); break; ... default: } return true; } }  

製作滑動菜單：

         NavigationView

       是Design Support 庫中提供的一個控件，它不僅是嚴格按照Material Design的要求進行設計的，而且還可以將

滑動菜單頁面的實現變得非常簡單。下面我們來學習：

        首先，要將Design Support庫引入到項目中才行。打開app/build.gradle文件，在dependencies閉包中添加如下

內容：

dependencies{
     compile fileTree(dir: 'libs', include:['*.jar'])
     compile 'com.android.support:appcompat-v7:24.2.1'
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:design:24.2.1'
     compile 'de.hdodenhof:circleimageview:2.1.0'
 }