【android開發】滑動菜單欄(開源項目SlidingMenu的示例)( 下)

上一篇文章對SlidingMenu庫詳細介紹了一下,這一一篇我就用一個實例,具體來看看如何去實現一個滑動效果的菜單欄。這個實例之前也是從網上看到,一位同事對這個實例精簡了一下,感覺不錯給我,我又對這個實例進行了一下自己的修改,應該是一個比較好的框架了,以後用到了,就可以直接填寫代碼就行了。在文章的最後,我也會把這個實例的代碼下載鏈接告訴大家,以便給需要的朋友。那就先來看看效果圖吧:

                          主界面菜單                                                                                   右菜單                                                                           

                                    

                        左菜單

 

這個界面是不是很漂亮?我是這麼感覺,不知道朋友們怎麼認爲,那麼我們現在就看看如何去一步一步的實現這個效果吧!

上一篇我們已經告訴大家了,新建一個項目,首先要把SlidingMenu庫添加eclipse中,再導進項目中,具體操作可以參看上一篇文章。

先看一下項目的目錄結構:

        


一、我們先看一下佈局文件:

和以往不同的是,我們需要建幾個FrameLayout佈局文件,主要是爲了定義虛擬的視圖,方便Fragment能夠替換該視圖,以達到Fragment的視圖內容能夠顯示在屏幕上的效果。

主界面虛擬視圖slidingmenu_content.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingmenu_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
左菜單虛擬視圖slidingmenu_menu.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingmenu_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
右菜單虛擬視圖slidingmenu_menu_2.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingmenu_menu_2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
主界面初始化視圖文件slidingmenu_main.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slidingmenu_main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
</LinearLayout>
主界面視圖文件my_main.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/my_bg">
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="12dp"
        android:paddingRight="12dp"
        android:paddingTop="15dp"
        android:gravity="center_vertical"
        android:visibility="gone">
        <LinearLayout
            android:id="@+id/layout_search_type"
	        android:layout_width="wrap_content"
	        android:layout_height="match_parent"
        	android:gravity="center_vertical"
        	android:padding="5dp"
        	android:background="@drawable/ic_bg_for_dropdown">
            <TextView 
                android:id="@+id/tv_search_type"
	            android:layout_width="wrap_content"
	            android:layout_height="wrap_content"
	            android:text="出  售"/>
            <ImageView 
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
	            android:layout_marginLeft="2dp"
				android:src="@drawable/ic_expansion"/>
        </LinearLayout>
        <EditText 
            android:id="@+id/edt_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:singleLine="true"
            android:background="@drawable/ic_bg_for_edit"/>
        <Button 
            android:id="@+id/btn_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="48dp"
            android:text="搜索"
            android:background="@drawable/ic_bg_for_btn"/>
    </LinearLayout>

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
	    android:gravity="center">
	    <ScrollView  
	        android:id="@+id/scrollview"
	        android:layout_width="match_parent"
	        android:layout_height="wrap_content"
	        android:layout_weight="1">
		    <LinearLayout 
		        android:id="@+id/layout_classify"
		        android:layout_width="match_parent"
		        android:layout_height="wrap_content"
		        android:orientation="vertical"
			    android:gravity="center">
			</LinearLayout>
		</ScrollView>
	</LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="15dp"
        android:paddingLeft="15dp"
        android:paddingRight="15dp">

        <ImageView
            android:id="@+id/btn_more"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_alignParentLeft="true"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_btn_more" 
	        android:background="@drawable/my_bg_for_imgbtn"/>

        <ImageView
            android:id="@+id/btn_select_city"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_alignParentRight="true"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_btn_select_city" 
	        android:background="@drawable/my_bg_for_imgbtn"/>
    </RelativeLayout>

</LinearLayout>
存放主界面資源視圖文件my_main_inner_grid.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_pic__box" >
    <ImageView
        android:id="@+id/inner_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/my_bg_focus_for_classify" />

    <TextView
        android:id="@+id/txt_tile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/inner_img"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="4dp"
        android:textColor="#ffffff" />

</RelativeLayout>
左菜單視圖文件my_main_left.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/my_bg_for_more"
    android:orientation="vertical" >

    <LinearLayout
        style="@style/title_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:minHeight="50dp" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="系統菜單"
            android:textColor="#ffffff"
            android:textSize="25dp" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/layout_mortgage_calculator"
        style="@style/list_item_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="登錄" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_right_to" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:background="@drawable/ic_line" />

    <!-- 意見反饋 -->

    <LinearLayout
        android:id="@+id/layout_feedback"
        style="@style/list_item_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="下載離線盤點數據" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_right_to" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:background="@drawable/ic_line" />
    <!-- 關於我們 -->

    <LinearLayout
        android:id="@+id/layout_about_us"
        style="@style/list_item_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="系統設置" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_right_to" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:background="@drawable/ic_line" />
    <!-- 檢查更新 -->

    <LinearLayout
        android:id="@+id/layout_check_for_updates"
        style="@style/list_item_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="修改用戶密碼" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_right_to" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:background="@drawable/ic_line" />

    <LinearLayout
        android:id="@+id/layout_out"
        style="@style/list_item_01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3dp"
            android:layout_weight="1"
            android:text="退出" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_right_to" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:background="@drawable/ic_line" />

</LinearLayout>
右菜單視圖文件my_main_right.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:orientation="vertical"
    android:background="@drawable/my_bg_for_more">

	<LinearLayout
	    style="@style/title_bar"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:gravity="center">
	    <TextView 
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="@string/txt_city_switch"
	        android:textSize="24sp"
	        android:textStyle="bold"
	        android:textColor="@android:color/white"/>
	</LinearLayout>
	
	<ListView 
	    android:id="@+id/list"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:padding="3dp"
	    android:fadingEdge="none" 
	    android:transcriptMode="disabled" 
	    android:cacheColorHint="@null" 
	    android:divider="@drawable/ic_line"/>
	
</LinearLayout>
右菜單存放資源視圖文件my_main_inner_list_for_cities.xml,代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/list_item_for_city"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical">
    <TextView 
        android:id="@+id/inner_title"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_weight="1"
	    android:layout_marginLeft="8dp"/>
	<ImageView 
	    android:id="@+id/inner_img"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_marginRight="8dp"/>    
</LinearLayout>

爲了使界面效果更加漂亮,我們再添加一個用於顯示陰影效果的文件slidingmenu_shadow.xml和slidingmenu_shadow2.xml:代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:endColor="#33000000"
        android:centerColor="#11000000"
        android:startColor="#00000000" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient
        android:endColor="#00000000"
        android:centerColor="#11000000"
        android:startColor="#33000000" />

</shape>

所有的視圖文件就佈置好了,對於一些比如像點擊出現不同狀態效果的文件,就不說,大家可以下載看看代碼,這個比較簡單,就不說了。接下來我們就看是寫java文件。

二、java文件

先建一個基類BaseFragment類:

package com.gtf.test.buildin;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.View;
import android.widget.TextView;

import com.gtf.test.utils.ActivityUtils;
/* 
 *Fragment作爲Activity界面的一部分組成出現
 *可以在一個Activity中同時出現多個Fragment,並且,一個Fragment亦可在多個Activity中使用。
 *在Activity運行過程中,可以添加、移除或者替換Fragment(add()、remove()、replace())
 *Fragment可以響應自己的輸入事件,並且有自己的生命週期,當然,它們的生命週期直接被其所屬的
 *宿主activity的生命週期影響。
 * 可以
 * */
public class BaseFragment extends Fragment implements View.OnClickListener{

	public Context context;
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		this.context = this.getActivity();
	}
	
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		
	}

	public void exit(){
		this.getActivity().finish();
	}
	public void exitToHome(){
		ActivityUtils.finishAll();
	}
	
	public static final void setTextStyle(TextView view, boolean bold){
		view.getPaint().setFakeBoldText(bold);
	}
}
建一個所有界面之間的操作的ActivityUtils,代碼如下:

package com.gtf.test.utils;

import java.text.DecimalFormat;
import java.text.ParseException;
import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Parcelable;

import com.gtf.test.act.MainAct;

/**
 * 所有界面之間的操作,都放這裏
 * @author liudongqiu
 *
 */
public class ActivityUtils {

	private static ArrayList<Activity> actList = new ArrayList<Activity>();
	public static final void addAct(Activity act){
		actList.add(act);
	}
	public static final void finishAll(){
		for(int i=actList.size()-1; i>=0; i--){
			actList.get(i).finish();
		}
		actList.clear();
	}
	public static final void clearAll(){
		actList.clear();
	}
	
	public static final void toHomeAct(Context context){
		to(context, MainAct.class);
	}
	
	public static final void to(Context context, Class<?> cls){
		to(context, cls, null);
	}
	public static final void to(Context context, Class<?> cls, Bundle data){
		Intent intent = new Intent(context, cls);
		if(data != null){
			intent.putExtras(data);
		}
		context.startActivity(intent);
	}
	public static final void gotoHome(Context context){
		Intent intent = new Intent(Intent.ACTION_MAIN);
		intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
		intent.addCategory(Intent.CATEGORY_HOME);
		context.startActivity(intent);
	}
	
	/**
	 * 添加桌面快捷圖標
	 * 需要權限:
	 * 	<uses-permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT" />
	 * @param context
	 * @param cls
	 */
	/*public static void createShorcut(Context context, int logo, String name, Class<?> cls) {
	    Intent thisIntent = new Intent();
	    thisIntent.setClass(context, cls);
	    String ACTION_ADD_SHORTCUT = "com.android.launcher.action.INSTALL_SHORTCUT";
	    Intent addShortcut = new Intent(ACTION_ADD_SHORTCUT);

	    Parcelable icon = Intent.ShortcutIconResource.fromContext(context, logo);

	    addShortcut.putExtra(Intent.EXTRA_SHORTCUT_ICON_RESOURCE, icon);
	    addShortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, name);
	    addShortcut.putExtra(Intent.EXTRA_SHORTCUT_INTENT, thisIntent);
	    context.sendBroadcast(addShortcut);
	}*/
	
	
	
	public static final DecimalFormat format = new DecimalFormat("0.00");
	/**
	 * 保留兩位小數
	 * @param decimal
	 * @return
	 */
	public static final String formatToTwoDecimalPlaces(String decimal){
		try {
			return format.format(format.parse(decimal));
		} catch (ParseException e) {
			return decimal;
		}
	}
	
	public static final String formatToDate(String date){
		if(date == null){
			return "";
		}else{
			int index = date.indexOf(" ");
			return (index > 0 ? date.substring(0, index) : date).replaceAll("/", "-");
		}
	}
}
建一個操作所有提示功能的WarnUtils類,代碼如下:

package com.gtf.test.utils;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.widget.Toast;

/**
 * 所有提示都放到這裏
 * @author liudongqiu
 *
 */
public class WarnUtils {
	
	
	
	public static final void showDialog(Context context, String text){
		new AlertDialog.Builder(context).setMessage(text).setNegativeButton("關閉", null).create().show();
	}
	public interface OnClickListener extends DialogInterface.OnClickListener {

	}

	public static final void toast(Context context, int textId){
		toast(context, context.getResources().getString(textId));
	}
	public static final void toast(Context context, String text){
		Toast.makeText(context, text, Toast.LENGTH_SHORT).show();
	}
}
建一個用於處理主界面事件的MainFragment類,這個繼承基類BaseFragment,代碼如下:

package com.gtf.test.act;

import java.util.ArrayList;

import android.content.Context;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.gtf.test.R;
import com.gtf.test.buildin.BaseFragment;
import com.gtf.test.utils.ActivityUtils;
import com.lxh.slidingmenu.lib.SlidingMenu;

public class MainFragment extends BaseFragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.my_main, null);
	}

	private SlidingMenu menu;

	private LinearLayout layoutSearchType;
	private Button btnSearch;
	private ImageView ivMore;
	private ImageView ivSelectCity;

	public MainFragment(SlidingMenu menu) {
		this.menu = menu;
	}

	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

		this.initViews();
	}

	private void initViews() {
		View parent = this.getView();

		this.layoutSearchType = (LinearLayout) parent.findViewById(R.id.layout_search_type);
		this.btnSearch = (Button) parent.findViewById(R.id.btn_search);
		this.ivMore = (ImageView) parent.findViewById(R.id.btn_more);
		this.ivSelectCity = (ImageView) parent.findViewById(R.id.btn_select_city);

		this.layoutSearchType.setOnClickListener(this);
		this.btnSearch.setOnClickListener(this);
		this.ivMore.setOnClickListener(this);
		this.ivSelectCity.setOnClickListener(this);

		DisplayMetrics dm = new DisplayMetrics();
		this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenWidth = dm.widthPixels;
		int offsetX = (int) (12 * dm.density);
		int spacing = (int) (8 * dm.density);
		int itemWidth = (screenWidth - 3 * offsetX) / 2;
		int itemHeight = (int) (112.5f * itemWidth / 142.5f);
		MyAdapter adapter = new MyAdapter(context, getDataList());

		LinearLayout classifyLayout = (LinearLayout) parent.findViewById(R.id.layout_classify);
		classifyLayout.setPadding(offsetX, offsetX - spacing, offsetX, offsetX);

		LinearLayout row = null;
		View view;
		LinearLayout.LayoutParams layoutParams;
		for (int i = 0; i < adapter.getCount(); i++) {
			layoutParams = new LinearLayout.LayoutParams(itemWidth, itemHeight);
			if (i % 2 == 0) {
				row = new LinearLayout(context);
				row.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1));
				classifyLayout.addView(row);
			} else {
				layoutParams.leftMargin = spacing;
			}
			view = adapter.getView(i, null, null);
			layoutParams.topMargin = spacing;
			row.addView(view, layoutParams);
		}

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btn_more: {
			this.menu.showMenu();
			break;
		}
		case R.id.btn_select_city: {
			this.menu.showSecondaryMenu();
			break;
		}
		}
	}

	private class MyAdapter extends BaseAdapter {
		private Context context;
		private ArrayList<MyData> datas;
		private LayoutInflater inflater;

		public MyAdapter(Context context, ArrayList<MyData> datas) {
			this.context = context;
			this.datas = datas;
			if (this.datas == null) {
				this.datas = new ArrayList<MyData>();
			}
			this.inflater = LayoutInflater.from(this.context);
		}

		@Override
		public int getCount() {
			return this.datas.size();
		}

		@Override
		public Object getItem(int position) {
			return position;
		}

		@Override
		public long getItemId(int position) {
			return position;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			MyHolder holder;
			if (convertView == null) {
				convertView = inflater.inflate(R.layout.my_main_inner_grid, null);
				holder = new MyHolder();
				holder.img = (ImageView) convertView.findViewById(R.id.inner_img);
				holder.txt = (TextView) convertView.findViewById(R.id.txt_tile);
				holder.img.setOnClickListener(this.clickListener);
				// holder.img.setOnTouchListener(this.touchListener);
				convertView.setTag(holder);
			} else {
				holder = (MyHolder) convertView.getTag();
			}

			MyData data = this.datas.get(position);
			holder.data = data;
			holder.img.setBackgroundResource(data.rid);
			holder.txt.setText(data.name);
			holder.img.setTag(holder);
			return convertView;
		}

		private View.OnClickListener clickListener = new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				((MyHolder) v.getTag()).data.type.toAct(context);
			}
		};
		private View.OnTouchListener touchListener = new View.OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				return false;
			}
		};
	}

	private class MyHolder {
		ImageView img;
		TextView txt;
		MyData data;
	}

	private static enum MyClassify {
		Recommend, MyCenter, Sell, Rent, SchoolDistrictRoom, ResidentialHousing;

		public void toAct(Context context) {
			switch (this) {
			case Recommend:
				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			case MyCenter:
				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			case Sell:
				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			case Rent:
				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			case SchoolDistrictRoom:

				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			case ResidentialHousing:
				Toast.makeText(context, "代開發中.......", Toast.LENGTH_LONG).show();
				break;
			}
		}
	}

	private static class MyData {
		private int rid;
		private int name;
		private MyClassify type;

		public MyData(int rid, int name, MyClassify type) {
			this.rid = rid;
			this.name = name;
			this.type = type;
		}
	}

	private static final ArrayList<MyData> getDataList() {
		ArrayList<MyData> list = new ArrayList<MyData>();
		list.add(new MyData(R.drawable.ic_pic_recommend, R.string.txt_recommend, MyClassify.Recommend));
		list.add(new MyData(R.drawable.ic_pic_my_center, R.string.txt_my_center, MyClassify.MyCenter));
		list.add(new MyData(R.drawable.ic_pic_sell, R.string.txt_sell, MyClassify.Sell));
		list.add(new MyData(R.drawable.ic_pic_rent, R.string.txt_rent, MyClassify.Rent));
		list.add(new MyData(R.drawable.ic_pic_school_district_room, R.string.txt_school_district_room, MyClassify.SchoolDistrictRoom));
		list.add(new MyData(R.drawable.ic_pic_residential_housing, R.string.txt_residential_housing, MyClassify.ResidentialHousing));
		return list;
	}

}
同樣建議兩個類分別處理左右菜單事件,MainLeftFragment類和MainRightFragment類,同樣繼承基類BaseFragment,代碼如下:

package com.gtf.test.act;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.gtf.test.R;
import com.gtf.test.buildin.BaseFragment;
import com.gtf.test.utils.WarnUtils;

public class MainLeftFragment extends BaseFragment {
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.my_main_left, null);
	}

	private LinearLayout layoutMortgageCalculator;
	private LinearLayout layoutFeedback;
	private LinearLayout layoutAboutUs;
	private LinearLayout layoutCheckForUpdates;
	private LinearLayout layout_out;

	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

		this.initViews();
	}

	private void initViews() {
		View parent = this.getView();

		this.layoutMortgageCalculator = (LinearLayout) parent.findViewById(R.id.layout_mortgage_calculator);
		this.layoutFeedback = (LinearLayout) parent.findViewById(R.id.layout_feedback);
		this.layoutAboutUs = (LinearLayout) parent.findViewById(R.id.layout_about_us);
		this.layoutCheckForUpdates = (LinearLayout) parent.findViewById(R.id.layout_check_for_updates);

		this.layout_out = (LinearLayout) parent.findViewById(R.id.layout_out);

		this.layoutMortgageCalculator.setOnClickListener(this);
		this.layoutFeedback.setOnClickListener(this);
		this.layoutAboutUs.setOnClickListener(this);
		this.layoutCheckForUpdates.setOnClickListener(this);
		this.layout_out.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.layout_mortgage_calculator: {
			WarnUtils.toast(this.context, "登錄");
			break;
		}
		case R.id.layout_feedback: {
			WarnUtils.toast(this.context, "下載離線盤點數據");
			break;
		}
		case R.id.layout_about_us: {
			WarnUtils.toast(this.context, "系統設置");
			break;
		}
		case R.id.layout_check_for_updates: {
			WarnUtils.toast(this.context, "修改用戶密碼");
			break;
		}
		case R.id.layout_out: {
			WarnUtils.toast(this.context, "退出");
			break;
		}
		}
	}
}
package com.gtf.test.act;

import java.util.ArrayList;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.gtf.test.R;
import com.gtf.test.buildin.BaseFragment;
import com.lxh.slidingmenu.lib.SlidingMenu;

public class MainRightFragment extends BaseFragment implements AdapterView.OnItemClickListener{
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		return inflater.inflate(R.layout.my_main_right, null);
	}

	private SlidingMenu menu;
	private ListView listView;
	private MyAdapter adapter;
	
	public MainRightFragment(SlidingMenu menu){
		this.menu = menu;
	}
	
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);

		this.initViews();
	}
	private void initViews(){
		View parent = this.getView();
		this.adapter = new MyAdapter(context, this.getCities());
		
		this.listView = (ListView)parent.findViewById(R.id.list);
		this.listView.setAdapter(this.adapter);
//		this.listView.setOnItemClickListener(this);
	}
	

	@Override
	public void onItemClick(AdapterView<?> parent, View convertView, int position, long id) {
		MyHolder holder = (MyHolder)convertView.getTag();
		holder.city.selected = true;
//		holder.img.setImageResource(R.drawable.ic_select_normal);
		MyHolder oldHolder = this.adapter.getSelectedHolder();
		if(oldHolder != null){
			if(oldHolder.city.selected){
//				oldHolder.img.setImageResource(R.drawable.ic_select_empty);
				oldHolder.city.selected = false;
			}
		}
		this.adapter.setSelectedHolder(holder);
		this.adapter.notifyDataSetChanged();
		// TODO 這裏還要做其它的事情
		this.menu.toggle();
	}
	
	private class City{
		private String cityName;
		private String webUrl;
		private boolean selected;
		private City(String cityName, String webUrl){
			this.cityName = cityName;
			this.webUrl = webUrl;
		}
		private City(String cityName, String webUrl, boolean selected){
			this.cityName = cityName;
			this.webUrl = webUrl;
			this.selected = selected;
		}
	}
	private class MyHolder{
		private TextView title;
		private ImageView img;
		private City city;
	}
	private class MyAdapter extends BaseAdapter{
		private MyHolder selectedHolder;
		private Context context;
		private ArrayList<City> cities;
		private LayoutInflater inflater;
		private MyAdapter(Context context, ArrayList<City> cities){
			this.context = context;
			this.cities = cities;
			if(this.cities == null){
				this.cities = new ArrayList<City>();
			}
			this.inflater = LayoutInflater.from(this.context);
		}
		@Override
		public int getCount() {
			return this.cities.size();
		}
		@Override
		public Object getItem(int position) {
			return position;
		}
		@Override
		public long getItemId(int position) {
			return position;
		}
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			MyHolder holder;
			if(convertView == null){
				convertView = this.inflater.inflate(R.layout.my_main_inner_list_for_cities, null);
				holder = new MyHolder();
				holder.title = (TextView)convertView.findViewById(R.id.inner_title);
				holder.img = (ImageView)convertView.findViewById(R.id.inner_img);
				convertView.setTag(holder);
				convertView.setOnTouchListener(onTouchListener);
				convertView.setOnClickListener(onClickListener);
			}else{
				holder = (MyHolder)convertView.getTag();
			}
			
			City city = this.cities.get(position);
			holder.title.setText(city.cityName);
			if(city.selected){
				holder.img.setImageResource(R.drawable.ic_select_normal);
				selectedHolder = holder;
			}else{
				holder.img.setImageResource(R.drawable.ic_select_empty);
			}
			holder.city = city;
			return convertView;
		}
		private void setSelectedHolder(MyHolder selectedHolder){
			this.selectedHolder = selectedHolder;
		}
		private MyHolder getSelectedHolder(){
			return this.selectedHolder;
		}
		private View.OnClickListener onClickListener = new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				MyHolder holder = (MyHolder)v.getTag();
				holder.city.selected = true;
				holder.img.setImageResource(R.drawable.ic_select_normal);
				MyHolder oldHolder = getSelectedHolder();
				if(oldHolder != null && holder != oldHolder){
					if(oldHolder.city.selected){
						oldHolder.img.setImageResource(R.drawable.ic_select_empty);
						oldHolder.city.selected = false;
					}
				}
				setSelectedHolder(holder);
//				this.notifyDataSetChanged();
				// TODO 這裏還要做其它的事情
				menu.toggle();
			}};
		private View.OnTouchListener onTouchListener = new View.OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				switch (event.getAction()) {
					case MotionEvent.ACTION_DOWN:
						if(event.getPointerCount() == 1){
							((MyHolder)v.getTag()).img.setImageResource(R.drawable.ic_select_pressed);
						}
						break;
					case MotionEvent.ACTION_CANCEL:
					case MotionEvent.ACTION_UP:
					case MotionEvent.ACTION_MASK:
						if(event.getPointerCount() == 1){
							MyHolder holder = (MyHolder)v.getTag();
							if(holder.city.selected){
								holder.img.setImageResource(R.drawable.ic_select_normal);
							}else{
								holder.img.setImageResource(R.drawable.ic_select_empty);
							}
						}
					}
				return false;
			}};
	}
	
	public ArrayList<City> getCities(){
		ArrayList<City> list = new ArrayList<City>();
		list.add(new City("莞城區", "", true));
		list.add(new City("東城區", ""));
		list.add(new City("南城區", ""));
		list.add(new City("萬江區", ""));
		list.add(new City("石碣區", ""));
		list.add(new City("石龍鎮", ""));
		list.add(new City("茶山鎮", ""));
		list.add(new City("石排鎮", ""));
		list.add(new City("企石鎮", ""));
		list.add(new City("橫瀝鎮", ""));
		return list;
	}
}
到這裏對處理每一個菜單的類都已經建好了,下面就是在主activity類中去實現滑動菜單和對左右菜單調用了,主類MainAct,代碼如下:

package com.gtf.test.act;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.util.DisplayMetrics;
import android.view.KeyEvent;

import com.gtf.test.R;
import com.gtf.test.utils.ActivityUtils;
import com.gtf.test.utils.WarnUtils;
import com.lxh.slidingmenu.lib.SlidingMenu;
public class MainAct extends FragmentActivity {
	private SlidingMenu menu;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.slidingmenu_main);
        
        menu = new SlidingMenu(this);
		menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		menu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
		menu.setShadowDrawable(R.drawable.slidingmenu_shadow);
		menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		menu.setFadeDegree(0.35f);
		menu.setBehindOffset(dm.widthPixels*50/100);
		menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
		
		
		menu.setMode(SlidingMenu.LEFT_RIGHT);//這裏模式設置爲左右都有菜單,RIGHT顯示右菜單,LEFT顯示左菜單,LEFT_RIGH顯示左右菜單
		menu.setContent(R.layout.slidingmenu_content);
		menu.setMenu(R.layout.slidingmenu_menu);
		
		menu.setSecondaryMenu(R.layout.slidingmenu_menu_2);
		menu.setSecondaryShadowDrawable(R.drawable.slidingmenu_shadow_2);
		
		getSupportFragmentManager()
			.beginTransaction()
			.replace(R.id.slidingmenu_content, new MainFragment(menu))
			.commit();//設置主頁面內容
		
		getSupportFragmentManager()
			.beginTransaction()
			.replace(R.id.slidingmenu_menu, new MainLeftFragment())
			.commit();//設置左菜單內容
		
		getSupportFragmentManager()
			.beginTransaction()
			.replace(R.id.slidingmenu_menu_2, new MainRightFragment(menu))
			.commit();//設置右菜單內容
       
    }

    @Override
    protected void onResume() {
    	super.onResume();
    	ActivityUtils.clearAll();
    }
    
    private long currentTime;
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if (keyCode == KeyEvent.KEYCODE_BACK) {
			if(System.currentTimeMillis() - currentTime < 2000){
				this.finish();
			}else{
				WarnUtils.toast(this, R.string.warn_wether_to_exit);
			}
			currentTime = System.currentTimeMillis();
			return true;
		}
		return false;
	}

}
大功告成了,主要的核心代碼已經建好了,框架的搭建就是這樣,漂亮的滑動效果就會出現了,當然了,只寫上面的代碼你的項目還是不會跑起來的,需要的資源圖片和一些自定義的效果文件,還需要我們自己完成(特別注意:大家運行項目的時候千萬別忘了導入slidingmenu_library項目,使用方法請參照上一篇文章)。滑動菜單欄的實現步驟就是這樣了,結合兩篇文章,相信很容易看懂這個原理。好了,滑動菜單欄到此就算結束了,接下來會繼續給大家分享其他的有關技術,感謝大家的關注,請多支持!


滑動菜單欄(開源項目SlidingMenu的示例)


發佈了38 篇原創文章 · 獲贊 7 · 訪問量 22萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章