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

本人只是設置左滑動，其實還是設置右滑動，設置左右滑動通過setSecondaryMenu設置；

　最后看下火烈鳥吧，老外還是比較愛護動物的，以上都是開源項目SlideMenu中的圖片: