首先看效果图，网易新闻客户端的特点是双向侧滑，并且左上角的图标会随着菜单的侧滑会有动画效果。
我们采用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
时间： 2024-10-04 22:03:16