上一篇文章對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項目,使用方法請參照上一篇文章)。滑動菜單欄的實現步驟就是這樣了,結合兩篇文章,相信很容易看懂這個原理。好了,滑動菜單欄到此就算結束了,接下來會繼續給大家分享其他的有關技術,感謝大家的關注,請多支持!