Android之SlideMenu实例Demo

年末加班基本上一周都没什么时候回家写代码，回到家就想睡觉，周末难得有时间写个博客，上次写了一篇关于SlideMenu开源项目的导入问题，这次主要讲讲使用的问题，SlideMenu应用的广泛程度就不用说了，基本上是App的标配，关于SlideMenu的各种使用方法有很多，网上各种Demo也很多，想来想去还是按照自己本身的实战方式去写写吧，走过的坑希望大家基本上不会遇到，开始正题:

基础布局

写布局文件之前先看下最终的效果图，昨天红色就是滑动出现的区域，右边的图片由左边的事件触发:

activity_main.xml中的布局:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android"      xmlns:tools= "http://schemas.android.com/tools"      android:id= "@+id/main_frame"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      android:paddingBottom= "@dimen/activity_vertical_margin"      android:paddingLeft= "@dimen/activity_horizontal_margin"      android:paddingRight= "@dimen/activity_horizontal_margin"      android:paddingTop= "@dimen/activity_vertical_margin"      tools:context= "com.example.slidemenu.MainActivity"  >        <ListView          android:id= "@+id/list_base"          android:layout_width= "match_parent"          android:layout_height= "match_parent"  >      </ListView>   </FrameLayout>

　menu_frame.xml中主要是用于右边显示布局，单独写出来一个是为了方便以后的替换:

1 2 3 4 5 6 7 8

<?xml version= "1.0"  encoding= "utf-8" ?> <FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      android:id= "@+id/menu_frame" >         </FrameLayout>

　　slide_menu.xml中主要用来显示SlideMenu中的数据，最后通过代码区

1 2 3 4 5 6 7

<?xml version= "1.0"  encoding= "utf-8" ?> <ListView xmlns:android= "http://schemas.android.com/apk/res/android"      android:id= "@+id/list_slide"      android:layout_width= "match_parent"      android:layout_height= "match_parent" >   </ListView>

　　list_item中的布局文件，之后自定义的Adapter会用到:

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version= "1.0"  encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      android:orientation= "horizontal"  >            <ImageView          android:id= "@+id/list_image"         android:layout_width= "wrap_content"         android:layout_height= "wrap_content" />        </LinearLayout>

实例Demo

首先MainActivity导入开源项目包(如果导入有问题可以参考本人的上一篇文章)之后继承SlidingFragmentActivity;

自定义 实例化Slide_Menu.xml的类:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

public  class  MyMenuFragment  extends  Fragment  implements  OnItemClickListener {        private  View view;      private  String[] listArrStrings= new  String[]{ "鹰" , " 鹭" , "火烈鸟" };      @Override      public  void  onCreate(Bundle savedInstanceState) {          // TODO Auto-generated method stub          super .onCreate(savedInstanceState);      }        @Override      public  View onCreateView(LayoutInflater inflater, ViewGroup container,              Bundle savedInstanceState) {          // TODO Auto-generated method stub          view=LayoutInflater.from(getActivity()).inflate(R.layout.slide_menu,  null );          return  view;      }        @Override      public  void  onActivityCreated(Bundle savedInstanceState) {          // TODO Auto-generated method stub          super .onActivityCreated(savedInstanceState);          ListView  listView=(ListView) view.findViewById(R.id.list_slide);          listView.setAdapter( new  ArrayAdapter<String>(getActivity(),android.R.layout.simple_list_item_1, listArrStrings));          listView.setOnItemClickListener( this );      }              @Override      public  void  onItemClick(AdapterView<?> parent, View view,  int  position,              long  id) {          // TODO Auto-generated method stub            if (getActivity()  instanceof  MainActivity){              ((MainActivity)getActivity()).changeImage(position);          }      }   }

　　onCreate中方法中调用:

1 2 3 4 5 6 7 8 9 10 11 12

super .onCreate(savedInstanceState);      setBehindContentView(R.layout.menu_frame);      setContentView(R.layout.activity_main);      slidingMenu = getSlidingMenu();      slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);      slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);      slidingMenu.setBehindWidth( 80 );               MyMenuFragment menuFragment =  new  MyMenuFragment();      getSupportFragmentManager().beginTransaction()              .replace(R.id.menu_frame, menuFragment,  "MyMenu" ).commit();

　　MyMenuFragment中如果回调MainActivity调用的方法:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

public   void   changeImage( int  index){      ListView view=(ListView) findViewById(R.id.list_base);      switch  (index) {      case  0 :          view.setAdapter( new  MyListAdapter( this , R.drawable.eagle));          break ;      case  1 :          view.setAdapter( new  MyListAdapter( this , R.drawable.heron));          break ;      case  2 :          view.setAdapter( new  MyListAdapter( this , R.drawable.flamingo));          break ;      default :          break ;      } }

　　最后是自定义的MyListAdapter:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

public  class  MyListAdapter  extends  BaseAdapter{        private  int  resourceID;      private  LayoutInflater inflater;     public  MyListAdapter(Context context, int  resId){         inflater=LayoutInflater.from(context);         resourceID=resId;     }     @Override     public  int  getCount() {         // TODO Auto-generated method stub         return  3 ;     }       @Override     public  Object getItem( int  position) {         // TODO Auto-generated method stub         return  null ;     }       @Override     public  long  getItemId( int  position) {         // TODO Auto-generated method stub         return  0 ;     }       @Override     public  View getView( int  position, View convertView, ViewGroup parent) {         // TODO Auto-generated method stub         View view= null ;         if  (convertView== null ) {           view=inflater.inflate(R.layout.list_item, null );         } else {             view=convertView;         }         ImageView imageView=(ImageView) view.findViewById(R.id.list_image);         imageView.setImageResource(resourceID);         return  view;     }          }

本人只是设置左滑动，其实还是设置右滑动，设置左右滑动通过setSecondaryMenu设置；

　最后看下火烈鸟吧，老外还是比较爱护动物的，以上都是开源项目SlideMenu中的图片:

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4148837.html，如需转载请自行联系原作者