Toolbar+DrawerLayout高仿网易新闻客户端,drawerlayout

2016/05/09 02:43
阅读数 347

首先看效果图,网易新闻客户端的特点是双向侧滑,并且左上角的图标会随着菜单的侧滑会有动画效果。 
这里写图片描述

我们采用Toolbar和DrawerLayout实现双向侧滑以及actionbar

在菜单文件里先定义菜单

<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_zone"
        android:title="@string/zone"
        android:orderInCategory="90"
        android:icon="@mipmap/biz_forum_author_icon"
        app:showAsAction="ifRoom" />


    <item android:id="@+id/action_weather"
        android:title="@string/weather"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_weather"
        app:showAsAction="never"/>
    <item android:id="@+id/action_offline"
        android:title="@string/offline"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_offline"
        app:showAsAction="never"/>
    <item android:id="@+id/action_theme"
        android:title="@string/theme"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_theme"
        app:showAsAction="never"/>
    <item android:id="@+id/action_search"
        android:title="@string/search"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_search"
        app:showAsAction="never"/>
    <item android:id="@+id/action_scan"
        android:title="@string/scan"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_scan"
        app:showAsAction="never"/>
    <item android:id="@+id/action_setting"
        android:title="@string/setting"
        android:orderInCategory="100"
        android:icon="@mipmap/biz_main_menu_setting"
        app:showAsAction="never"/></menu>

定义颜色和字符串资源

<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="colorPrimary">@color/material_deep_teal_200</color>
    <color name="colorPrimaryDark">@color/material_deep_teal_500</color>
    <color name="overflowTextColor">#9e9e9e</color></resources>
<resources>
    <string name="app_name">ToolbarDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="main_title">主标题</string>
    <string name="sub_title">副标题</string>
    <string name="open">打开</string>
    <string name="close">关闭</string>
    <string name="zone">个人中心</string>
    <string name="weather">天气</string>
    <string name="offline">离线</string>
    <string name="theme">夜间</string>
    <string name="search">搜索</string>
    <string name="scan">扫一扫</string>
    <string name="setting">设置</string></resources>

编写主题样式,toolbar上的字体颜色,以及左上角的图标动画都在这里定义了

<resources>

    <style name="AppTheme" parent="@style/AppBaseTheme">


    </style>

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 状态栏和标题栏颜色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- 标题颜色-->
        <item name="android:textColorPrimary">@android:color/white</item>
        <!-- 溢出菜单图标颜色-->
        <item name="colorControlNormal">@android:color/white</item>

        <!-- 箭头 -->
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
        <!-- 溢出菜单文字颜色-->
        <item name="textAppearanceLargePopupMenu">@style/OverflowMenuTextAppearance</item>
        <!-- 菜单项点击selector-->
        <item name="actionBarItemBackground">@drawable/abc_item_background_holo_dark</item>    </style>
    <!-- 左边的箭头指示-->
    <style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

    <!--溢出菜单文字样式-->
    <style name="OverflowMenuTextAppearance" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
        <item name="android:textColor">@color/overflowTextColor</item>
    </style></resources>

为了在API19之后达到沉浸式效果,在values-v19下新建style.xml,内容为

<resources>
    <style name="AppTheme" parent="@style/AppBaseTheme">
        <item name="android:windowTranslucentStatus">true</item>    </style></resources>

编写toolbar布局

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:background="?attr/colorPrimaryDark"
    android:minHeight="?attr/actionBarSize"
    />

编写DrawerLayout布局,引入Toolbar

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <android.support.v4.widget.DrawerLayout        android:layout_below="@id/toolbar"
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--主布局-->
        <LinearLayout            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#fff"
            >


        </LinearLayout>
        <!--侧滑菜单左-->
        <LinearLayout            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:background="#009688"
            android:layout_gravity="start">


        </LinearLayout>
        <!--侧滑菜单右-->
        <LinearLayout            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#009688"
            android:layout_gravity="end">


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

为了让溢出的菜单显示出图标,我们需要重新一个方法,使用反射让其显示出来

/**
    **显示溢出菜单图标
    **/
    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {                try {
                    Method m = menu.getClass().getDeclaredMethod(                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (NoSuchMethodException e) {
                    e.printStackTrace();
                } catch (Exception e) {                    throw new RuntimeException(e);
                }
            }
        }        return super.onMenuOpened(featureId, menu);
    }

最后编写主要代码

    protected Toolbar toolbar;    protected DrawerLayout mDrawerLayout;    @Override
    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");//设置标题
        toolbar.setLogo(R.mipmap.base_common_default_icon_big);//设置logo
        setSupportActionBar(toolbar);//设置toolbar
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);

        ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 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);

            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);//设置监听器



    }    @Override
    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);        return true;
    }    @Override
    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();        //noinspection SimplifiableIfStatement
        //点击的是个人中心
        if (id == R.id.action_zone) {            return toggleDrawerLayout();
        }        return super.onOptionsItemSelected(item);
    }    protected boolean toggleDrawerLayout(){        //如果左边的已打开,则关闭左边的,不进行后续操作
        if (mDrawerLayout.isDrawerOpen(Gravity.START)) {
            mDrawerLayout.closeDrawer(Gravity.START);            return true;
        }        //如果左边的没打开,右边的打开了关闭,关闭了打开
        if (mDrawerLayout.isDrawerOpen(Gravity.END)) {
            mDrawerLayout.closeDrawer(Gravity.END);
        } else {
            mDrawerLayout.openDrawer(Gravity.END);
        }        return true;
    }

最后遗留了一个小问题,在溢出菜单里面,网易新闻客户端的文字和图片是有间距的,而这里没有间距,找了好久的属性没找到怎么设置,所以如果有大神知道怎么设置,请指教。

已知的设置间距的方法有下面几种 
1,修改图片资源,增加左边距和右边距 
2,在文字前面加多个空格 
3,使用popupwindow弹出

以上方法,1,2过于暴力,不推荐使用,3虽然可行,但是个人觉得也不是好的方法,最好的方法是找出这么一个属性,直接设置,但是本人水平有限,暂时还未发现这个属性,所以请大神们指教。

源码下载 
http://download.csdn.net/detail/sbsujjbcy/8609983


展开阅读全文
打赏
3
6 收藏
分享
加载中
更多评论
打赏
0 评论
6 收藏
3
分享
返回顶部
顶部