因为最近项目中用到侧滑菜单,于是就想到了谷歌提供的这个类网上看了看资料完成了侧滑菜单的功能,并写了一个demo记录下来,加深记忆和以后做类似功能时,直接看看笔记比住较方便
主布局文件分为两个一个是侧滑菜单覆盖toolbar一个是不覆盖toolbar具体看效果图,无赖不会上传gif
1.覆盖toolbar
2、不覆盖toolbar
2、menu
主布局文件(覆盖toolbar)
我们侧滑菜单的view是一个listview 所以listview的布局需要加
android:layout_gravity="start"属性
需要右侧滑的时候设置为end即可
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--当需要侧滑菜单覆盖ToolBar时,必须把DrawerLayout作为根布局-->
<!--toolbar和内容区域需要一个viewGroup包裹起来才行-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="#ffffff"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
<!-- 主要内容的视图 切换显示fragment-->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- 侧滑菜单 -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"
android:divider="#d8d8d8"
android:dividerHeight="0.5dp" />
</android.support.v4.widget.DrawerLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="标题"
android:textColor="#ffffff"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
<!--这里toolbar放在DrawerLayout上面代表侧滑菜单不覆盖toolbar-->
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 主要内容的视图 切换显示fragment-->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- 侧滑菜单 -->
<ListView
android:id="@+id/left_drawer"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorPrimary"
android:divider="#d8d8d8"
android:dividerHeight="0.5dp" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
menu文件
<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">
<item
android:id="@+id/action_edit"
android:icon="@mipmap/boat"
android:orderInCategory="80"
android:title="侧滑菜单"
app:showAsAction="never" />
<item
android:id="@+id/action_share"
android:icon="@mipmap/anji"
android:orderInCategory="90"
android:title="菜单2"
app:showAsAction="never" />
<item
android:id="@+id/action_overflow"
android:orderInCategory="100"
android:title="菜单3"
android:icon="@mipmap/elect"
app:showAsAction="never" />
</menu>
style文件
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowNoTitle">true</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
<!-- 溢出菜单文字颜色-->
<item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
<!--溢出菜单样式 -->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>
</style>
<!-- 左边的箭头指示-->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@android:color/white</item>
</style>
<!--溢出菜单样式 -->
<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:dropDownWidth">wrap_content</item>
<item name="android:paddingRight">5dp</item>
<!--为下拉菜单提供一个背景-->
<item name="android:popupBackground">?attr/colorPrimary</item>
<!--竖直方向的偏移,这里的话我们设置为4dp,默认值这里是-4dp;-->
<item name="android:dropDownVerticalOffset">4dip</item>
<!--指定下拉菜单与文本之间的水平间距;-->
<item name="android:dropDownHorizontalOffset">0dip</item>
</style>
<!--溢出菜单文字样式-->
<style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
<item name="android:textColor">@color/white</item>
</style>
</resources>
strings文件
<resources>
<string name="app_name">Demo</string>
<string name="close">关闭</string>
<string name="open">打开</string>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3b7fd4</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="white">#ffffff</color>
</resources>
fragment页面布局和类我就不贴了很简单
下面是主activity类
package com.winfo.wenjie.toolbar;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.content.ContextCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import java.lang.reflect.Field;
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {
//侧滑菜单的布局
private DrawerLayout drawerLayout;
//标题栏
private Toolbar toolbar;
private String[] items = {"首页", "动态", "设置"};
private int imgIds[] = {R.mipmap.boat , R.mipmap.elect , R.mipmap.anji};
//侧滑菜单的内容项
private ListView listView;
private MyAdapter adapter;
//切换的页面
private Fragment1 f1;
private Fragment2 f2;
private Fragment3 f3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("");//设置标题
setSupportActionBar(toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
listView = (ListView) findViewById(R.id.left_drawer);
adapter = new MyAdapter();
listView.setAdapter(adapter);
listView.setOnItemClickListener(this);
adapter.setSelectedItem(0);//默认选中第一个item
f1 = new Fragment1();
mContent = f1;//默认显示fragment1
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.add(R.id.content_frame, f1);
ft.commit();
ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
drawerToggle.syncState();//将左上角的图标和侧滑监听进行联动 达到动画效果显示
drawerLayout.addDrawerListener(drawerToggle);//设置侧滑菜单的监听
}
/**
* 修改显示的内容 不会重新加载
**/
private Fragment mContent;
public void switchContent(Fragment to) {
if (mContent != to) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
if (!to.isAdded()) { // 先判断是否被add过
transaction.hide(mContent).add(R.id.content_frame, to).commit(); // 隐藏当前的fragment,add下一个到Activity中
} else {
transaction.hide(mContent).show(to).commit(); // 隐藏当前的fragment,显示下一个
}
mContent = to;
}
}
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
switch (position) {
case 0:
if (f1 == null) {
f1 = new Fragment1();
}
switchContent(f1);
adapter.setSelectedItem(0);
break;
case 1:
if (f2 == null) {
f2 = new Fragment2();
}
switchContent(f2);
adapter.setSelectedItem(1);
break;
case 2:
if (f3 == null) {
f3 = new Fragment3();
}
switchContent(f3);
adapter.setSelectedItem(2);
break;
}
drawerLayout.closeDrawers();//自动关闭侧滑菜单
adapter.notifyDataSetChanged();
}
private class MyAdapter extends BaseAdapter {
private int selestedItemPos = -1;
@Override
public int getCount() {
return items.length;
}
@Override
public Object getItem(int position) {
return items[position];
}
@Override
public long getItemId(int position) {
return position;
}
private void setSelectedItem(int positon) {
this.selestedItemPos = positon;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, parent, false);
holder = new ViewHolder();
holder.tv = (TextView) convertView.findViewById(R.id.id_tv);
holder.icon = (ImageView)convertView.findViewById(R.id.id_icon);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tv.setText(items[position]);
holder.icon.setImageResource(imgIds[position]);
//选中设置字体为高亮显示
if (selestedItemPos == position) {
holder.tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.colorAccent));
} else {
holder.tv.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.white));
}
return convertView;
}
class ViewHolder {
TextView tv;
ImageView icon;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
setIconVisible(menu,true);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if(id == R.id.action_edit){
if(drawerLayout.isDrawerOpen(Gravity.START)){
drawerLayout.closeDrawer(Gravity.START);
return true;
}else{
drawerLayout.openDrawer(Gravity.START);
}
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* *显示溢出菜单图标
**/
public void setIconVisible(Menu menu, boolean visable){
Field field;
try {
field = menu.getClass().getDeclaredField("mOptionalIconsVisible");
field.setAccessible(true);
field.set(menu, visable);
} catch (Exception e) {
e.printStackTrace();
}
}
}