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

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

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

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

/****显示溢出菜单图标**/@Overridepublic 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;@Overrideprotected 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);//设置logosetSupportActionBar(toolbar);//设置toolbarmDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close) {@Overridepublic void onDrawerOpened(View drawerView) {super.onDrawerOpened(drawerView);}@Overridepublic void onDrawerClosed(View drawerView) {super.onDrawerClosed(drawerView);}};mDrawerToggle.syncState();mDrawerLayout.setDrawerListener(mDrawerToggle);//设置监听器}@Overridepublic 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;}@Overridepublic 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高仿网易新闻客户端相关推荐

Android高仿网易新闻客户端之动态添加标签
承接上一篇文章:Android高仿网易新闻客户端之首页,今天来实现动态添加标签效果. 动态标签页是一个流式布局,实现了宽度自动换行高度自动分配的功能,代码如下: FlowLayout.java pac ...
Android高仿网易新闻客户端之首页
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用V ...
android 高仿网易新闻,Android高仿网易新闻客户端
关于实现网易新闻客户端的界面,以前写过很多博客,请参考: 今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现. ViewPagerIndica ...
Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherl ...
android分类功能,Android 仿网易新闻客户端分类排序功能
先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好 gridviewsort.gif 如何实现拖拽一个Item 用WindowManager添加一个ImageView,并且将这个Imag ...
仿网易新闻客户端UI界面小Demo
图一图二图三仿网易新闻客户端UI界面Demo 图一:新闻模块 UI界面:点击下方按钮,显示相应内容的页面信息图三:点击新闻模块上方按钮显示体育,娱乐,科技等页面,相应的内容. 所涉及的知识点: ...
android 仿网易标签切换,Android 仿网易新闻客户端Tab标签
Android 开源框架ViewPageIndicator和ViewPager仿网易新闻客户端Tab标签 http://blog.csdn.net/xiaanming/article/details/ ...
仿网易新闻客户端的上面的tab和下面的功能条
2019独角兽企业重金招聘Python工程师标准>>> 仿网易新闻客户端的上面的tab和下面的功能条 package com.and.netease; import com.and. ...
android 仿网易新闻客户端源码都有
原文:android 仿网易新闻客户端源码都有 android 仿网易新闻服务端源码源代码下载地址: http://www.zuidaima.com/share/1550463560944640.h ...

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

Toolbar+DrawerLayout高仿网易新闻客户端相关推荐

最新文章

热门文章