在main.xml中使用DrawerLayout,它允许在布局中放入两个直接子控件,第一个是主屏幕显示内容,第二个是滑动屏幕显示内容
<?xml version="1.0" encoding="utf-8"?> <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/draw_lay" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout 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="match_parent" > <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </FrameLayout> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:text="滑动界面" android:textSize="30sp" android:background="#FFF"/><1--layout_gravity必须设置,可为left、right、start设置滑动方向--> </android.support.v4.widget.DrawerLayout>
此时滑动菜单就可以显示了,但有时用户不知道滑动菜单的存在,所以我们在标题栏中在加入一个图标以供用户点击
MainActivity中的代码
package com.example.materialtest; import android.support.v4.view.GravityCompat; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private DrawerLayout mDrawer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar=(Toolbar)findViewById(R.id.toolBar); setSupportActionBar(toolbar); mDrawer=(DrawerLayout)findViewById(R.id.draw_lay);//获取滑动菜单实例 ActionBar actionBar=getSupportActionBar();//获取ToolBar实例 if(actionBar!=null){ actionBar.setDisplayHomeAsUpEnabled(true);//显示导航按钮 actionBar.setHomeAsUpIndicator(R.drawable.f);//此时导航按钮是后退键,我们把它换掉 } } public boolean onCreateOptionsMenu(Menu menu){ getMenuInflater().inflate(R.menu.toolbar,menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home://该按钮WieHomeAsUp按钮,名称不可变 mDrawer.openDrawer(GravityCompat.START);//点击时滑出滑动菜单 break; case R.id.item1: Toast.makeText(this,"你点击了第一个按钮",Toast.LENGTH_SHORT).show(); break; case R.id.item2: Toast.makeText(this,"你点击了第二个按钮",Toast.LENGTH_SHORT).show(); break; case R.id.item3: Toast.makeText(this,"你点击了第三个按钮",Toast.LENGTH_SHORT).show(); break; } return true; } }
NavigationView的使用
NavigationView可以帮我们更简单的写出更加美观的滑动菜单
使用NavigationView之前由于它是support内的所以我们首先要添加依赖,build.gradle中添加
compile 'com.android.support:design:26.0.0-alpha1' compile 'de.hdodenhof:circleimageview:2.1.0'
这里注意依赖的版本一定要与Android的配置一样否则会报错同样在build.gradle中有下面三行代码,我这里全是用的26的
compileSdkVersion 26 targetSdkVersion 26 compile 'com.android.support:appcompat-v7:26.+'
在menu文件夹下创建navmenu.xml具体代码如下
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"><!--group是一个组,single表示所有菜单只可以单选--> <item android:id="@+id/nav1" android:icon="@drawable/nav1" android:title="nav_1"/> <item android:id="@+id/nav2" android:icon="@drawable/nav2" android:title="nav_2"/> <item android:id="@+id/nav3" android:icon="@drawable/nav3" android:title="nav_3"/> <item android:id="@+id/nav4" android:icon="@drawable/nav4" android:title="nav_4"/> </group> </menu>
在layout下新建navhead.xml,代码如下,其中使用了一些相对布局的元素
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="180dp"
android:background="?attr/colorPrimary">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:id="@+id/de_image"
android:src="@drawable/head"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="王**"
android:textColor="#FFF"
android:layout_above="@+id/address"
android:textSize="14sp"
/>
<TextView
android:id="@+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83763489453181@qq.com"
android:textColor="#FFF"
android:layout_alignParentBottom="true"
android:textSize="14sp"
/>
</RelativeLayout>
修改main.xml,删除之前的文本域将DrawerLayout添加进去
<?xml version="1.0" encoding="utf-8"?> <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/draw_lay" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout 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="match_parent" > <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_menu" app:headerLayout="@layout/navhead"/> </android.support.v4.widget.DrawerLayout>
修改MainActivity,代码如下
package com.example.materialtest;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Toolbar toolbar=(Toolbar)findViewById(R.id.toolBar);
setSupportActionBar(toolbar);
mDrawer=(DrawerLayout)findViewById(R.id.draw_lay);
NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);//NavigationView
navigationView.setItemIconTintList(null);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.f);
}
//NavigationView
navigationView.setCheckedItem(R.id.nav1);//设置默认选中
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if (item.getItemId()==R.id.nav1){
mDrawer.closeDrawers();
}
return true;
}
});
}
public boolean onCreateOptionsMenu(Menu menu){
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId())
{
case android.R.id.home:
mDrawer.openDrawer(GravityCompat.START);
break;
case R.id.item1:
Toast.makeText(this,"你点击了第一个按钮",Toast.LENGTH_SHORT).show();
break;
case R.id.item2:
Toast.makeText(this,"你点击了第二个按钮",Toast.LENGTH_SHORT).show();
break;
case R.id.item3:
Toast.makeText(this,"你点击了第三个按钮",Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}
这一篇博客和上一篇的结合起来可以达到以下效果
在main.java中加入navigationView.setItemIconTintList(null); 可以解决NavigationView中Icon不显示的问题