Android SlidingMenu 仿網易新聞用戶端布局

前面兩篇文章中的SlidingMenu都出現在左側，今天來模仿一下網易新聞用戶端左右兩邊都有SlidingMenu的效果，以下是網易新聞用戶端效果：

不扯閑話了，直接進入正題吧

frame_content.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/content"

android:layout_width="match_parent"

android:layout_height="match_parent" />

frame_left_menu.xml

android:id="@+id/left_menu"

frame_right_menu.xml

android:id="@+id/right_menu"

在主Activity 初始化 SlidingMenu

package com.example.slidingmenuwangyi;

import android.annotation.SuppressLint;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.Toast;

import com.example.slidingmenuwangyi.fragment.CommunityFragment;

import com.example.slidingmenuwangyi.fragment.FindPeopleFragment;

import com.example.slidingmenuwangyi.fragment.HomeFragment;

import com.example.slidingmenuwangyi.fragment.MenuFragment;

import com.example.slidingmenuwangyi.fragment.MenuFragment.SLMenuListOnItemClickListener;

import com.example.slidingmenuwangyi.fragment.PagesFragment;

import com.example.slidingmenuwangyi.fragment.PhotosFragment;

import com.example.slidingmenuwangyi.fragment.RightMenuFragment;

import com.example.slidingmenuwangyi.fragment.WhatsHotFragment;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;

import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;

public class MainActivity extends SlidingFragmentActivity implements SLMenuListOnItemClickListener{

private SlidingMenu mSlidingMenu;

@SuppressLint("NewApi")

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setTitle("Home");

// setTitle(R.string.sliding_title);

setContentView(R.layout.frame_content);

//set the Behind View

setBehindContentView(R.layout.frame_left_menu);

// customize the SlidingMenu

mSlidingMenu = getSlidingMenu();

mSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//設定左右都可以劃出SlidingMenu菜單

mSlidingMenu.setSecondaryMenu(R.layout.frame_right_menu); //設定右側菜單的布局檔案

mSlidingMenu.setSecondaryShadowDrawable(R.drawable.drawer_shadow);

// mSlidingMenu.setShadowWidth(5);

// mSlidingMenu.setBehindOffset(100);

mSlidingMenu.setShadowDrawable(R.drawable.drawer_shadow);//設定陰影圖檔

mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width); //設定陰影圖檔的寬度

mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset); //SlidingMenu劃出時首頁面顯示的剩餘寬度

mSlidingMenu.setFadeDegree(0.35f);

//設定SlidingMenu 的手勢模式

//TOUCHMODE_FULLSCREEN 全屏模式，在整個content頁面中，滑動，可以打開SlidingMenu

//TOUCHMODE_MARGIN 邊緣模式，在content頁面中，如果想打開SlidingMenu,你需要在螢幕邊緣滑動才可以打開SlidingMenu

//TOUCHMODE_NONE 不能通過手勢打開SlidingMenu

mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

//設定 SlidingMenu 内容

FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();

fragmentTransaction.replace(R.id.left_menu, new MenuFragment());

fragmentTransaction.replace(R.id.right_menu, new RightMenuFragment());

fragmentTransaction.replace(R.id.content, new HomeFragment());

fragmentTransaction.commit();

//使用左上方icon可點，這樣在onOptionsItemSelected裡面才可以監聽到R.id.home

getActionBar().setDisplayHomeAsUpEnabled(true);

// getActionBar().setLogo(R.drawable.ic_logo);

}

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case android.R.id.home:

toggle(); //動态判斷自動關閉或開啟SlidingMenu

// getSlidingMenu().showMenu();//顯示SlidingMenu

// getSlidingMenu().showContent();//顯示内容

return true;

case R.id.action_refresh:

Toast.makeText(getApplicationContext(), R.string.refresh, Toast.LENGTH_SHORT).show();

case R.id.action_person:

if(mSlidingMenu.isSecondaryMenuShowing()){

mSlidingMenu.showContent();

}else{

mSlidingMenu.showSecondaryMenu();

}

default:

return super.onOptionsItemSelected(item);

}

public void selectItem(int position, String title) {

// update the main content by replacing fragments

Fragment fragment = null;

switch (position) {

case 0:

fragment = new HomeFragment();

break;

case 1:

fragment = new FindPeopleFragment();

case 2:

fragment = new PhotosFragment();

case 3:

fragment = new CommunityFragment();

case 4:

fragment = new PagesFragment();

case 5:

fragment = new WhatsHotFragment();

default:

}

if (fragment != null) {

FragmentManager fragmentManager = getSupportFragmentManager();

fragmentManager.beginTransaction()

.replace(R.id.content, fragment).commit();

// update selected item and title, then close the drawer

setTitle(title);

mSlidingMenu.showContent();

} else {

// error in creating fragment

Log.e("MainActivity", "Error in creating fragment");

}

左邊SlidingMenu Fragment

package com.example.slidingmenuwangyi.fragment;

import java.util.ArrayList;

import android.app.Activity;

import android.content.res.TypedArray;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ListView;

import com.example.slidingmenuwangyi.R;

import com.example.slidingmenuwangyi.adapter.NavDrawerListAdapter;

import com.example.slidingmenuwangyi.entity.NavDrawerItem;

public class MenuFragment extends Fragment implements OnItemClickListener {

private ListView mDrawerList;

private String[] mNavMenuTitles;

private TypedArray mNavMenuIconsTypeArray;

private ArrayList<NavDrawerItem> mNavDrawerItems;

private NavDrawerListAdapter mAdapter;

private SLMenuListOnItemClickListener mCallback;

private int selected = -1;

public void onAttach(Activity activity) {

try {

mCallback = (SLMenuListOnItemClickListener) activity;

} catch (ClassCastException e) {

throw new ClassCastException(activity.toString()

+ " must implement OnResolveTelsCompletedListener");

super.onAttach(activity);

// TODO Auto-generated method stub

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View rootView = inflater.inflate(R.layout.fragment_menu, null);

findView(rootView);

return rootView;

private void findView(View rootView) {

mDrawerList = (ListView) rootView.findViewById(R.id.left_menu);

mNavMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);

// nav drawer icons from resources

mNavMenuIconsTypeArray = getResources()

.obtainTypedArray(R.array.nav_drawer_icons);

mNavDrawerItems = new ArrayList<NavDrawerItem>();

// adding nav drawer items to array

// Home

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[0], mNavMenuIconsTypeArray

.getResourceId(0, -1)));

// Find People

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[1], mNavMenuIconsTypeArray

.getResourceId(1, -1)));

// Photos

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[2], mNavMenuIconsTypeArray

.getResourceId(2, -1)));

// Communities, Will add a counter here

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[3], mNavMenuIconsTypeArray

.getResourceId(3, -1), true, "22"));

// Pages

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[4], mNavMenuIconsTypeArray

.getResourceId(4, -1)));

// What's hot, We will add a counter here

mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[5], mNavMenuIconsTypeArray

.getResourceId(5, -1), true, "50+"));

// Recycle the typed array

mNavMenuIconsTypeArray.recycle();

// setting the nav drawer list adapter

mAdapter = new NavDrawerListAdapter(getActivity(),

mNavDrawerItems);

mDrawerList.setAdapter(mAdapter);

mDrawerList.setOnItemClickListener(this);

if(selected!=-1){

mDrawerList.setItemChecked(selected, true);

mDrawerList.setSelection(selected);

}else{

mDrawerList.setItemChecked(0, true);

mDrawerList.setSelection(0);

public void onItemClick(AdapterView<?> parent, View view, int position,

long id) {

// update selected item and title, then close the drawer

mDrawerList.setItemChecked(position, true);

mDrawerList.setSelection(position);

if(mCallback!=null){

mCallback.selectItem(position, mNavMenuTitles[position]);

selected = position;

/**

* 左側菜單點選回調接口

* @author FX_SKY

public interface SLMenuListOnItemClickListener{

public void selectItem(int position,String title);

MenuFragment 布局檔案fragment_menu.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="match_parent" >

<ListView

android:id="@+id/left_menu"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="start"

android:choiceMode="singleChoice"

android:divider="@android:color/transparent"

android:dividerHeight="0dp"

android:background="#111"/>

</RelativeLayout>

右邊SlidingMenu Fragment

public class RightMenuFragment extends Fragment{

View rootView = inflater.inflate(R.layout.fragment_right_menu, null);

RightMenuFragment 布局檔案 fragment_right_menu.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#464646">

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="70dip">

<ImageView

android:id="@+id/right_permsg_center_img_usericon"

android:layout_width="60dip"

android:layout_height="60dip"

android:layout_marginLeft="5dip"

android:layout_marginTop="5dip"

android:layout_marginBottom="5dip"

android:src="@drawable/night_biz_pc_account_avatar_bg"

android:scaleType="fitXY"/>

<TextView

android:id="@+id/right_permsg_center_tv_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="AABBV"

android:layout_toRightOf="@id/right_permsg_center_img_usericon"

android:layout_marginLeft="10dip"

android:textColor="@color/whilte"

android:textSize="15sp"

android:layout_marginTop="13dip"/>

android:id="@+id/right_permsg_center_img_icon"

android:layout_width="15dip"

android:layout_height="15dip"

android:scaleType="fitXY"

android:layout_below="@id/right_permsg_center_tv_name"

android:src="@drawable/biz_pc_main_money_icon"

android:layout_alignLeft="@id/right_permsg_center_tv_name"/>

android:id="@+id/right_permsg_center_tv_level"

android:layout_toRightOf="@id/right_permsg_center_img_icon"

android:text="科長"

android:textSize="10sp"

android:layout_alignBaseline="@id/right_permsg_center_img_icon"

android:layout_marginTop="2dip"/>

<ImageButton

android:id="@+id/right_permsg_center_imgbtn_select"

android:layout_width="30dip"

android:layout_height="30dip"

android:layout_alignParentRight="true"

android:layout_marginRight="10dip"

android:background="@drawable/app_recommend_arrow"

android:layout_centerVertical="true"/>

</RelativeLayout>

<LinearLayout

android:layout_height="wrap_content"

android:orientation="horizontal">

<Button

android:id="@+id/right_permsg_center_btn_thread"

android:text="我的跟帖"

android:drawableTop="@drawable/biz_pc_go_tie"

android:background="#00000000"

android:layout_weight="1"

android:id="@+id/right_permsg_center_btn_collect"

android:text="我的收藏"

android:drawableTop="@drawable/biz_pc_go_favor"

android:id="@+id/right_permsg_center_btn_msgpush"

android:text="消息推送"

android:drawableTop="@drawable/biz_pc_go_msg"

</LinearLayout>

主Fragment HomeFragment

import java.util.List;

import android.support.v4.view.PagerTabStrip;

import android.support.v4.view.ViewPager;

import com.example.slidingmenuwangyi.adapter.ContentFragmentPagerAdapter;

import com.example.slidingmenuwangyi.entity.ContentBean;

public class HomeFragment extends Fragment {

private ViewPager mViewPager;

private static final String[] titles = {"One","Two","Three","Four","Five"};

private List<ContentBean> list = new ArrayList<ContentBean>();

private ContentFragmentPagerAdapter mAdapter;

public HomeFragment(){}

View rootView = inflater.inflate(R.layout.fragment_home, container, false);

initData();

private void initData() {

for(int i=0;i<titles.length;i++){

ContentBean cb = new ContentBean();

cb.setTitle(titles[i]);

cb.setContent(titles[i]+"_"+(i+1));

list.add(cb);

mViewPager = (ViewPager) rootView.findViewById(R.id.mViewPager);

PagerTabStrip mPagerTabStrip = (PagerTabStrip) rootView.findViewById(R.id.mPagerTabStrip);

mPagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.select_text_color));

mAdapter = new ContentFragmentPagerAdapter(getActivity().getSupportFragmentManager(),list);

mViewPager.setAdapter(mAdapter);

public void onStart() {

if(mAdapter!=null){

mAdapter.notifyDataSetChanged();

super.onStart();

HomeFragment 布局檔案 fragment_home.xml

<android.support.v4.view.ViewPager

android:id="@+id/mViewPager"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<android.support.v4.view.PagerTabStrip

android:id="@+id/mPagerTabStrip"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top"/>

<!-- <android.support.v4.view.PagerTitleStrip

android:id="@+id/mPagerTitleStrip"

android:layout_width="match_parent"

android:layout_gravity="top" /> -->

</android.support.v4.view.ViewPager>

别的就不貼了，自己下載下傳下來看吧

運作效果如下

其它幹貨下載下傳資源已放入微信公衆号【一個碼農的日常】

本文轉自歡醉部落格園部落格，原文連結http://www.cnblogs.com/zhangs1986/p/3654638.html如需轉載請自行聯系原作者

歡醉

Android SlidingMenu 仿網易新聞用戶端布局

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

Android電視機（機頂盒）初次開發的一些經驗分享

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method