Android SlidingMenu 仿网易新闻客户端布局

2022-11-25 16:26:44

前面两篇文章中的SlidingMenu都出现在左侧，今天来模仿一下网易新闻客户端左右两边都有SlidingMenu的效果，以下是网易新闻客户端效果：

Android SlidingMenu 仿网易新闻客户端布局

Android SlidingMenu 仿网易新闻客户端布局

Android SlidingMenu 仿网易新闻客户端布局

不扯闲话了，直接进入正题吧

frame_content.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/content"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent" />

frame_left_menu.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/left_menu"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent" />

frame_right_menu.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/right_menu"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent" />

在 主Activity 初始化 SlidingMenu

[java] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. package com.example.slidingmenuwangyi;
  2. import android.annotation.SuppressLint;
  3. import android.os.Bundle;
  4. import android.support.v4.app.Fragment;
  5. import android.support.v4.app.FragmentManager;
  6. import android.support.v4.app.FragmentTransaction;
  7. import android.util.Log;
  8. import android.view.Menu;
  9. import android.view.MenuItem;
  10. import android.widget.Toast;
  11. import com.example.slidingmenuwangyi.fragment.CommunityFragment;
  12. import com.example.slidingmenuwangyi.fragment.FindPeopleFragment;
  13. import com.example.slidingmenuwangyi.fragment.HomeFragment;
  14. import com.example.slidingmenuwangyi.fragment.MenuFragment;
  15. import com.example.slidingmenuwangyi.fragment.MenuFragment.SLMenuListOnItemClickListener;
  16. import com.example.slidingmenuwangyi.fragment.PagesFragment;
  17. import com.example.slidingmenuwangyi.fragment.PhotosFragment;
  18. import com.example.slidingmenuwangyi.fragment.RightMenuFragment;
  19. import com.example.slidingmenuwangyi.fragment.WhatsHotFragment;
  20. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
  21. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
  22. public class MainActivity extends SlidingFragmentActivity implements SLMenuListOnItemClickListener{
  23. private SlidingMenu mSlidingMenu;
  24. @SuppressLint("NewApi")
  25. @Override
  26. public void onCreate(Bundle savedInstanceState) {
  27. super.onCreate(savedInstanceState);
  28. setTitle("Home");
  29. //      setTitle(R.string.sliding_title);
  30. setContentView(R.layout.frame_content);
  31. //set the Behind View
  32. setBehindContentView(R.layout.frame_left_menu);
  33. // customize the SlidingMenu
  34. mSlidingMenu = getSlidingMenu();
  35. mSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//设置左右都可以划出SlidingMenu菜单
  36. mSlidingMenu.setSecondaryMenu(R.layout.frame_right_menu);   //设置右侧菜单的布局文件
  37. mSlidingMenu.setSecondaryShadowDrawable(R.drawable.drawer_shadow);
  38. //      mSlidingMenu.setShadowWidth(5);
  39. //      mSlidingMenu.setBehindOffset(100);
  40. mSlidingMenu.setShadowDrawable(R.drawable.drawer_shadow);//设置阴影图片
  41. mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width); //设置阴影图片的宽度
  42. mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset); //SlidingMenu划出时主页面显示的剩余宽度
  43. mSlidingMenu.setFadeDegree(0.35f);
  44. //设置SlidingMenu 的手势模式
  45. //TOUCHMODE_FULLSCREEN 全屏模式，在整个content页面中，滑动，可以打开SlidingMenu
  46. //TOUCHMODE_MARGIN 边缘模式，在content页面中，如果想打开SlidingMenu,你需要在屏幕边缘滑动才可以打开SlidingMenu
  47. //TOUCHMODE_NONE 不能通过手势打开SlidingMenu
  48. mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
  49. //设置 SlidingMenu 内容
  50. FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
  51. fragmentTransaction.replace(R.id.left_menu, new MenuFragment());
  52. fragmentTransaction.replace(R.id.right_menu, new RightMenuFragment());
  53. fragmentTransaction.replace(R.id.content, new HomeFragment());
  54. fragmentTransaction.commit();
  55. //使用左上方icon可点，这样在onOptionsItemSelected里面才可以监听到R.id.home
  56. getActionBar().setDisplayHomeAsUpEnabled(true);
  57. //        getActionBar().setLogo(R.drawable.ic_logo);
  58. }
  59. @Override
  60. public boolean onCreateOptionsMenu(Menu menu) {
  61. // Inflate the menu; this adds items to the action bar if it is present.
  62. getMenuInflater().inflate(R.menu.main, menu);
  63. return true;
  64. }
  65. @Override
  66. public boolean onOptionsItemSelected(MenuItem item) {
  67. switch (item.getItemId()) {
  68. case android.R.id.home:
  69. toggle(); //动态判断自动关闭或开启SlidingMenu
  70. //          getSlidingMenu().showMenu();//显示SlidingMenu
  71. //          getSlidingMenu().showContent();//显示内容
  72. return true;
  73. case R.id.action_refresh:
  74. Toast.makeText(getApplicationContext(), R.string.refresh, Toast.LENGTH_SHORT).show();
  75. return true;
  76. case R.id.action_person:
  77. if(mSlidingMenu.isSecondaryMenuShowing()){
  78. mSlidingMenu.showContent();
  79. }else{
  80. mSlidingMenu.showSecondaryMenu();
  81. }
  82. return true;
  83. default:
  84. return super.onOptionsItemSelected(item);
  85. }
  86. }
  87. @SuppressLint("NewApi")
  88. @Override
  89. public void selectItem(int position, String title) {
  90. // update the main content by replacing fragments
  91. Fragment fragment = null;
  92. switch (position) {
  93. case 0:
  94. fragment = new HomeFragment();
  95. break;
  96. case 1:
  97. fragment = new FindPeopleFragment();
  98. break;
  99. case 2:
  100. fragment = new PhotosFragment();
  101. break;
  102. case 3:
  103. fragment = new CommunityFragment();
  104. break;
  105. case 4:
  106. fragment = new PagesFragment();
  107. break;
  108. case 5:
  109. fragment = new WhatsHotFragment();
  110. break;
  111. default:
  112. break;
  113. }
  114. if (fragment != null) {
  115. FragmentManager fragmentManager = getSupportFragmentManager();
  116. fragmentManager.beginTransaction()
  117. .replace(R.id.content, fragment).commit();
  118. // update selected item and title, then close the drawer
  119. setTitle(title);
  120. mSlidingMenu.showContent();
  121. } else {
  122. // error in creating fragment
  123. Log.e("MainActivity", "Error in creating fragment");
  124. }
  125. }
  126. }

左边SlidingMenu Fragment

[java] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. package com.example.slidingmenuwangyi.fragment;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.content.res.TypedArray;
  5. import android.os.Bundle;
  6. import android.support.v4.app.Fragment;
  7. import android.view.LayoutInflater;
  8. import android.view.View;
  9. import android.view.ViewGroup;
  10. import android.widget.AdapterView;
  11. import android.widget.AdapterView.OnItemClickListener;
  12. import android.widget.ListView;
  13. import com.example.slidingmenuwangyi.R;
  14. import com.example.slidingmenuwangyi.adapter.NavDrawerListAdapter;
  15. import com.example.slidingmenuwangyi.entity.NavDrawerItem;
  16. public class MenuFragment extends Fragment implements OnItemClickListener {
  17. private ListView mDrawerList;
  18. private String[] mNavMenuTitles;
  19. private TypedArray mNavMenuIconsTypeArray;
  20. private ArrayList<NavDrawerItem> mNavDrawerItems;
  21. private NavDrawerListAdapter mAdapter;
  22. private SLMenuListOnItemClickListener mCallback;
  23. private int selected = -1;
  24. @Override
  25. public void onAttach(Activity activity) {
  26. try {
  27. mCallback = (SLMenuListOnItemClickListener) activity;
  28. } catch (ClassCastException e) {
  29. throw new ClassCastException(activity.toString()
  30. + " must implement OnResolveTelsCompletedListener");
  31. }
  32. super.onAttach(activity);
  33. }
  34. @Override
  35. public void onCreate(Bundle savedInstanceState) {
  36. // TODO Auto-generated method stub
  37. super.onCreate(savedInstanceState);
  38. }
  39. @Override
  40. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  41. Bundle savedInstanceState) {
  42. View rootView = inflater.inflate(R.layout.fragment_menu, null);
  43. findView(rootView);
  44. return rootView;
  45. }
  46. private void findView(View rootView) {
  47. mDrawerList = (ListView) rootView.findViewById(R.id.left_menu);
  48. mNavMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);
  49. // nav drawer icons from resources
  50. mNavMenuIconsTypeArray = getResources()
  51. .obtainTypedArray(R.array.nav_drawer_icons);
  52. mNavDrawerItems = new ArrayList<NavDrawerItem>();
  53. // adding nav drawer items to array
  54. // Home
  55. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[0], mNavMenuIconsTypeArray
  56. .getResourceId(0, -1)));
  57. // Find People
  58. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[1], mNavMenuIconsTypeArray
  59. .getResourceId(1, -1)));
  60. // Photos
  61. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[2], mNavMenuIconsTypeArray
  62. .getResourceId(2, -1)));
  63. // Communities, Will add a counter here
  64. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[3], mNavMenuIconsTypeArray
  65. .getResourceId(3, -1), true, "22"));
  66. // Pages
  67. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[4], mNavMenuIconsTypeArray
  68. .getResourceId(4, -1)));
  69. // What's hot, We will add a counter here
  70. mNavDrawerItems.add(new NavDrawerItem(mNavMenuTitles[5], mNavMenuIconsTypeArray
  71. .getResourceId(5, -1), true, "50+"));
  72. // Recycle the typed array
  73. mNavMenuIconsTypeArray.recycle();
  74. // setting the nav drawer list adapter
  75. mAdapter = new NavDrawerListAdapter(getActivity(),
  76. mNavDrawerItems);
  77. mDrawerList.setAdapter(mAdapter);
  78. mDrawerList.setOnItemClickListener(this);
  79. if(selected!=-1){
  80. mDrawerList.setItemChecked(selected, true);
  81. mDrawerList.setSelection(selected);
  82. }else{
  83. mDrawerList.setItemChecked(0, true);
  84. mDrawerList.setSelection(0);
  85. }
  86. }
  87. @Override
  88. public void onItemClick(AdapterView<?> parent, View view, int position,
  89. long id) {
  90. // update selected item and title, then close the drawer
  91. mDrawerList.setItemChecked(position, true);
  92. mDrawerList.setSelection(position);
  93. if(mCallback!=null){
  94. mCallback.selectItem(position, mNavMenuTitles[position]);
  95. }
  96. selected = position;
  97. }
  98. /**
  99. * 左侧菜单 点击回调接口
  100. * @author FX_SKY
  101. *
  102. */
  103. public interface SLMenuListOnItemClickListener{
  104. public void selectItem(int position,String title);
  105. }
  106. }

MenuFragment 布局文件fragment_menu.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5. <ListView
  6. android:id="@+id/left_menu"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"
  9. android:layout_gravity="start"
  10. android:choiceMode="singleChoice"
  11. android:divider="@android:color/transparent"
  12. android:dividerHeight="0dp"
  13. android:background="#111"/>
  14. </RelativeLayout>

右边SlidingMenu Fragment

[java] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. package com.example.slidingmenuwangyi.fragment;
  2. import android.app.Activity;
  3. import android.os.Bundle;
  4. import android.support.v4.app.Fragment;
  5. import android.view.LayoutInflater;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import com.example.slidingmenuwangyi.R;
  9. public class RightMenuFragment extends Fragment{
  10. @Override
  11. public void onAttach(Activity activity) {
  12. super.onAttach(activity);
  13. }
  14. @Override
  15. public void onCreate(Bundle savedInstanceState) {
  16. // TODO Auto-generated method stub
  17. super.onCreate(savedInstanceState);
  18. }
  19. @Override
  20. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  21. Bundle savedInstanceState) {
  22. View rootView = inflater.inflate(R.layout.fragment_right_menu, null);
  23. findView(rootView);
  24. return rootView;
  25. }
  26. private void findView(View rootView) {
  27. }
  28. }

RightMenuFragment 布局文件 fragment_right_menu.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. android:background="#464646">
  7. <!-- 顶部个人基本信息 -->
  8. <RelativeLayout
  9. android:layout_width="fill_parent"
  10. android:layout_height="70dip">
  11. <ImageView
  12. android:id="@+id/right_permsg_center_img_usericon"
  13. android:layout_width="60dip"
  14. android:layout_height="60dip"
  15. android:layout_marginLeft="5dip"
  16. android:layout_marginTop="5dip"
  17. android:layout_marginBottom="5dip"
  18. android:src="@drawable/night_biz_pc_account_avatar_bg"
  19. android:scaleType="fitXY"/>
  20. <TextView
  21. android:id="@+id/right_permsg_center_tv_name"
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:text="AABBV"
  25. android:layout_toRightOf="@id/right_permsg_center_img_usericon"
  26. android:layout_marginLeft="10dip"
  27. android:textColor="@color/whilte"
  28. android:textSize="15sp"
  29. android:layout_marginTop="13dip"/>
  30. <ImageView
  31. android:id="@+id/right_permsg_center_img_icon"
  32. android:layout_width="15dip"
  33. android:layout_height="15dip"
  34. android:scaleType="fitXY"
  35. android:layout_toRightOf="@id/right_permsg_center_img_usericon"
  36. android:layout_below="@id/right_permsg_center_tv_name"
  37. android:src="@drawable/biz_pc_main_money_icon"
  38. android:layout_alignLeft="@id/right_permsg_center_tv_name"/>
  39. <TextView
  40. android:id="@+id/right_permsg_center_tv_level"
  41. android:layout_width="wrap_content"
  42. android:layout_height="wrap_content"
  43. android:layout_below="@id/right_permsg_center_tv_name"
  44. android:layout_toRightOf="@id/right_permsg_center_img_icon"
  45. android:text="科长"
  46. android:textColor="@color/whilte"
  47. android:layout_marginLeft="5dip"
  48. android:textSize="10sp"
  49. android:layout_alignBaseline="@id/right_permsg_center_img_icon"
  50. android:layout_marginTop="2dip"/>
  51. <ImageButton
  52. android:id="@+id/right_permsg_center_imgbtn_select"
  53. android:layout_width="30dip"
  54. android:layout_height="30dip"
  55. android:layout_alignParentRight="true"
  56. android:layout_marginRight="10dip"
  57. android:background="@drawable/app_recommend_arrow"
  58. android:layout_centerVertical="true"/>
  59. </RelativeLayout>
  60. <!-- 中间三个button  我的跟帖，我的收藏，消息推送 -->
  61. <LinearLayout
  62. android:layout_width="fill_parent"
  63. android:layout_height="wrap_content"
  64. android:orientation="horizontal">
  65. <Button
  66. android:id="@+id/right_permsg_center_btn_thread"
  67. android:layout_width="wrap_content"
  68. android:layout_height="wrap_content"
  69. android:text="我的跟帖"
  70. android:drawableTop="@drawable/biz_pc_go_tie"
  71. android:background="#00000000"
  72. android:textColor="@color/whilte"
  73. android:layout_weight="1"
  74. />
  75. <Button
  76. android:id="@+id/right_permsg_center_btn_collect"
  77. android:layout_width="wrap_content"
  78. android:layout_height="wrap_content"
  79. android:text="我的收藏"
  80. android:drawableTop="@drawable/biz_pc_go_favor"
  81. android:background="#00000000"
  82. android:textColor="@color/whilte"
  83. android:layout_weight="1"
  84. />
  85. <Button
  86. android:id="@+id/right_permsg_center_btn_msgpush"
  87. android:layout_width="wrap_content"
  88. android:layout_height="wrap_content"
  89. android:text="消息推送"
  90. android:drawableTop="@drawable/biz_pc_go_msg"
  91. android:background="#00000000"
  92. android:textColor="@color/whilte"
  93. android:layout_weight="1"
  94. />
  95. </LinearLayout>
  96. </LinearLayout>

主Fragment  HomeFragment

[java] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. package com.example.slidingmenuwangyi.fragment;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.os.Bundle;
  5. import android.support.v4.app.Fragment;
  6. import android.support.v4.view.PagerTabStrip;
  7. import android.support.v4.view.ViewPager;
  8. import android.view.LayoutInflater;
  9. import android.view.View;
  10. import android.view.ViewGroup;
  11. import com.example.slidingmenuwangyi.R;
  12. import com.example.slidingmenuwangyi.adapter.ContentFragmentPagerAdapter;
  13. import com.example.slidingmenuwangyi.entity.ContentBean;
  14. public class HomeFragment extends Fragment {
  15. private ViewPager mViewPager;
  16. private static final String[] titles = {"One","Two","Three","Four","Five"};
  17. private List<ContentBean> list = new ArrayList<ContentBean>();
  18. private ContentFragmentPagerAdapter mAdapter;
  19. public HomeFragment(){}
  20. @Override
  21. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  22. Bundle savedInstanceState) {
  23. View rootView = inflater.inflate(R.layout.fragment_home, container, false);
  24. initData();
  25. findView(rootView);
  26. return rootView;
  27. }
  28. private void initData() {
  29. for(int i=0;i<titles.length;i++){
  30. ContentBean cb = new ContentBean();
  31. cb.setTitle(titles[i]);
  32. cb.setContent(titles[i]+"_"+(i+1));
  33. list.add(cb);
  34. }
  35. }
  36. private void findView(View rootView) {
  37. mViewPager = (ViewPager) rootView.findViewById(R.id.mViewPager);
  38. PagerTabStrip mPagerTabStrip = (PagerTabStrip) rootView.findViewById(R.id.mPagerTabStrip);
  39. mPagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.select_text_color));
  40. mAdapter = new ContentFragmentPagerAdapter(getActivity().getSupportFragmentManager(),list);
  41. mViewPager.setAdapter(mAdapter);
  42. }
  43. @Override
  44. public void onStart() {
  45. if(mAdapter!=null){
  46. mAdapter.notifyDataSetChanged();
  47. }
  48. super.onStart();
  49. }
  50. }

HomeFragment 布局文件 fragment_home.xml

[html] view plaincopyAndroid SlidingMenu 仿网易新闻客户端布局Android SlidingMenu 仿网易新闻客户端布局
 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent" >
  5. <android.support.v4.view.ViewPager
  6. android:id="@+id/mViewPager"
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content" >
  9. <android.support.v4.view.PagerTabStrip
  10. android:id="@+id/mPagerTabStrip"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:layout_gravity="top"/>
  14. <!--         <android.support.v4.view.PagerTitleStrip
  15. android:id="@+id/mPagerTitleStrip"
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. android:layout_gravity="top" /> -->
  19. </android.support.v4.view.ViewPager>
  20. </RelativeLayout>

别的就不贴了，自己下载下来看吧

运行效果如下

Android SlidingMenu 仿网易新闻客户端布局

Android SlidingMenu 仿网易新闻客户端布局

Android SlidingMenu 仿网易新闻客户端布局

其它干货下载资源已放入微信公众号【一个码农的日常】

Demo下载地址：http://download.csdn.net/detail/fx_sky/6725171

原文：http://blog.csdn.net/gebitan505/article/details/20390325

上一篇：java如何将一个List传入Oracle存储过程


下一篇：HTML与XML关系分析