您的位置:首页 > 移动开发 > Android开发

【DrawerLayout+NavigationView】android侧滑菜单实现

2018-03-21 17:07 597 查看
首先话不多说上个图:





实现的效果如上图。
主布局activity_main.xml:<?xml version="1.0" encoding
4000
="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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start"
android:id="@+id/drawer_layout_activity_main"
>

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

<android.support.design.widget.NavigationView
android:id="@+id/drawer_navigation"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#BBBBBB"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer_menu"
/>

</android.support.v4.widget.DrawerLayout>主布局include的布局:app_bar_main.xml<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_activity_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:titleTextColor="#000000"
app:title="我的练习"
app:navigationIcon="@drawable/ic_context_menu_free"
/>

<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000"
/>

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

</LinearLayout>NavigationView的头布局:<?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="match_parent"
>

<ImageView android:id="@+id/img_close_slidemenu"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/icon_left_arrow"
android:layout_margin="5dp"
android:clickable="true"
/>

<ImageView android:id="@+id/img_user_headpic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@id/img_close_slidemenu"
android:src="@drawable/all_apps" />

<TextView android:id="@+id/tv_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="啊木木"
android:layout_below="@id/img_user_headpic"
android:layout_marginTop="5dp"
android:layout_centerHorizontal="true"
/>

<ImageView android:id="@+id/iv_down_arrow"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/icon_down_arrow2"
android:layout_toRightOf="@id/tv_user_name"
android:layout_below="@id/img_user_headpic"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:clickable="true"
/>

<TextView android:id="@+id/tv_child_term"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="三年级 下学期"
android:layout_below="@id/tv_user_name"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
/>

<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#A5A5A5"
android:layout_below="@id/tv_child_term"
android:layout_marginTop="5dp"
/>

</RelativeLayout>
以及drawer_menu.xml<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="@+id/drawer_menu_g1">
<item
android:id="@+id/myExercises"
android:title="我的练习"
android:icon="@drawable/exercise_record_icon"
/>
<item
android:id="@+id/myCollection"
android:title="我的收藏"
android:icon="@drawable/collect_item_icon"
/>
<item
android:id="@+id/myWrongTopic"
android:title="我的错题"
android:icon="@drawable/exam_answer_wrong"
/>
<item
android:id="@+id/exercisesRecord"
android:title="练习记录"
android:icon="@drawable/exercise_record_icon"
/>
</group>

<group android:id="@+id/drawer_menu_g2">
<item
android:id="@+id/LogOut"
android:title="退出登陆"
android:icon="@drawable/login_log_icon"
/>
</group>
</menu>app_bar_main include的布局:<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我是主界面"
android:textSize="30sp"
android:layout_gravity="center"
/>
</LinearLayout>最后上MainActivity的代码:/**
* @ClassName: MainActivity
* @Desciption: 登陆后进入的主界面
* @author: zhangshihao
* @date: 2018-3-21
*/

public class MainActivity extends BaseActivity{

private DrawerLayout drawerLayout ;
private Toolbar toolbar;
private NavigationView navigationView;
private View navigationHeaderView;
private ImageView ivCloseSlideMenu;
private ImageView ivDownArrow;

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

private void initView(){
toolbar = (Toolbar) findViewById(R.id.toolbar_activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout_activity_main);
navigationView = (NavigationView) findViewById(R.id.drawer_navigation);
navigationHeaderView = navigationView.getHeaderView(0);
ivCloseSlideMenu = navigationHeaderView.findViewById(R.id.img_close_slidemenu);
ivDownArrow = navigationHeaderView.findViewById(R.id.iv_down_arrow);
setSupportActionBar(toolbar);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.setDrawerListener(toggle);

}

private void handleEvent(){
//侧滑菜单item点击事件处理:
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch(item.getItemId()){
case R.id.myExercises://我的练习
showToast("我的练习");
break;
case R.id.myCollection://我的收藏
showToast("我的收藏");
break;
case R.id.myWrongTopic://我的错题
showToast("我的错题");
break;
case R.id.exercisesRecord://练习记录
showToast("练习记录");
break;
case R.id.LogOut://退出登陆
showToast("退出登陆");
break;
}
return false;
}
});

ivCloseSlideMenu.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
drawerLayout.closeDrawers();
}
});

ivDownArrow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showToast("下箭头点击");
}
});

}如果有疑问请在帖子底下留言,楼主很尽快回复的!
欢迎参观楼主的其他博客!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: