MaterialDesign 之 NavigationView

来源：互联网发布：淘宝购物返利机器人编辑：程序博客网时间：2024/05/21 10:29

学习这篇文章，请先学习ToolBar文章。

先修改MainActivity.java类如下：

public class MainActivity extends AppCompatActivity  {

   @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("MeterialDesign");
setSupportActionBar(toolbar);
// 显示左边的箭头
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}

接着增加项目依赖

修改activity_main.xml布局文件，定义NavigationView

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent" >

    <FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

        <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

            <include layout="@layout/toolbar" />

            <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="这里显示你需要显示的布局"
android:textColor="#000"
android:textSize="20sp" />
        </LinearLayout>

    </FrameLayout>

    <android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/header_navi"
app:itemTextColor="#000"
app:menu="@menu/navi_menu" />

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

这里还需要定义layout/header_navi.xml和menu/navi_menu

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="200dip"
android:background="#4886f3"
android:orientation="vertical"
android:padding="20dip" >

    <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="沙漠死神"
android:textColor="#FFFFFF"
android:textSize="30sp" />

</LinearLayout>

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
   <group android:checkableBehavior="single">
       <item android:icon="@android:drawable/ic_menu_add" android:title="增加"></item>
       <item android:icon="@android:drawable/ic_menu_delete" android:title="删除"></item>
       <item android:title="排序">
           <menu>
               <item android:icon="@android:drawable/ic_menu_sort_alphabetically" android:title="按字母排序"></item>
               <item android:icon="@android:drawable/ic_menu_sort_by_size" android:title="按大小排序"></item>
           </menu>
       </item>
   </group>
</menu>

接下来：先在values/string.xml中添加

<string name="drawer_open">打开</string>
<string name="drawer_close">关闭</string>

然后就是MainActivity.xml里面的代码

public class MainActivity extends AppCompatActivity implements
      OnNavigationItemSelectedListener {

   DrawerLayout mDrawerLayout;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      toolbar.setTitle("MeterialDesign");
      setSupportActionBar(toolbar);
      // 显示左边的箭头
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);

      mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
      ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,
            mDrawerLayout, toolbar, R.string.drawer_open,
            R.string.drawer_close);
      mDrawerToggle.syncState();
      mDrawerLayout.setDrawerListener(mDrawerToggle);

      NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
      view.setNavigationItemSelectedListener(this);

   }

   @Override
   public boolean onNavigationItemSelected(MenuItem menuItem) {
      menuItem.setChecked(true);
      mDrawerLayout.closeDrawers();
      Toast.makeText(this, menuItem.getTitle() + " pressed",
            Toast.LENGTH_SHORT).show();
      return true;
   }

}

实现效果如下：

到此结束，附赠源码

下载地址

0 0