码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-04-19 18:04:21      阅读:319      评论:0      收藏:0      [点我收藏+]

标签:toolbar   actionbar   android   网易新闻客户端   

首先看效果图,网易新闻客户端的特点是双向侧滑,并且左上角的图标会随着菜单的侧滑会有动画效果。
技术分享

我们采用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

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

标签:toolbar   actionbar   android   网易新闻客户端   

原文地址:http://blog.csdn.net/sbsujjbcy/article/details/45130117

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!