Android之SlideMenu实例Demo

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

基础布局

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

activity_main.xml中的布局:

<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中主要是用于右边显示布局，单独写出来一个是为了方便以后的替换:

<?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中的数据，最后通过代码区

<?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会用到:

<?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的类:

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中方法中调用:

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调用的方法:

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:

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;
   }
      
 }