侧滑菜单DrawerLayout+Toolbar结合使用,切换菜单

1 篇文章 0 订阅
1 篇文章 0 订阅

因为最近项目中用到侧滑菜单,于是就想到了谷歌提供的这个类网上看了看资料完成了侧滑菜单的功能,并写了一个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>


不覆盖toolbar

<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>


color文件
<?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();
        }
    }

}





  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值