【Android UI設計與開發】9：滑動功能表列（一）開源項目SlidingMenu的使用和樣本

標籤：

一、SlidingMenu簡介

     相信大家對SlidingMenu都不陌生了，它是一種比較新的設定介面或配置介面的效果，在主介面左滑或者右滑出現設定介面效果，能方便的進行各種操作。很多優秀的應用都採用了這種介面方案，像facebook、人人網、everynote、Google+等等。如所示：

 因為效果確實比較新穎，所以在很多的應用開發中去實現此效果，解決的辦法也是不盡相同。諸多比較以後發

現，還是GitHub上的開源項目SlidingMenu提供了最佳的實現：定製靈活、各種陰影和漸層以及動畫的滑動效果都很不錯。不過這是一個開源庫，而不是一個完整的項目，要把它作為libary引入到你自己的工程裡，簡單配置一下就可以實現SlidingMenu的效果。

二、SlidingMenu使用

 slidingmenu_library：https://github.com/YeXiaoChao/slidingmenu_library

要想能夠實現SlidingMenu的效果，首先必須要將它作為libary匯入到你的工程

1、下載完畢之後，將此項目匯入Eclipse開發環境中

 

2、匯入項目之後，然後在建立一個Android項目，將slidingmenu_library匯入建立的Android項目中，步驟如下：

<1> 右鍵點擊建立的Android項目，然後點擊最下方的“Properties”選項；

<2> 點擊彈出對話方塊之後，在最左側選擇“Android”選項，然後再點擊右下方的“Add”按鈕；

<3> 點擊後彈出對話方塊，選中之前置入的slidingmenu_library項目

<4> 選中之後；

<5> 這就說明了匯入庫已經成功了，匯入成功之後會在Android的引用包中出現一個slidingmenu_library.jar包；

 

注意：這裡有個地方需要大家特別注意一下，在建立完Android項目之後，較新的Eclipse版本都會在Android目錄下產生一個libs的檔案夾，裡面會有一個android-support-v4.jar的jar包，這個jar一定要記得刪掉，否則運行程式的時候會出現異常，提示是找不到類的異常。出現異常的原因是因為在匯入slidingmenu_library類庫的時候，這個類庫裡面本身就包含了android-support-v4.jar的jar包，所以啟動並執行時候就會出現異常，系統不知道去調用哪個路徑的下的包，所以程式崩潰，提示找不到類。

 

三、SlidingMenu樣本

1.片（GIF圖片比較大，有3.6M）

 

2.代碼講解

1、項目結構圖

 

 

2、content_frame.xml布局

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/menu_frame"    android:layout_width="match_parent"    android:layout_height="match_parent" /><!-- 定義一個虛擬視圖，方便Fragment能夠替換該視圖，以達到Fragment的視圖內容能夠顯示在螢幕上的效果。 -->

 

3、menu_frame.xml布局

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/menu_frame"    android:layout_width="match_parent"    android:layout_height="match_parent" /><!-- 用來存放滑動菜單開啟後的視圖介面的。 -->

 

4、list.xml

<?xml version="1.0" encoding="utf-8"?><ListView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/list"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingLeft="@dimen/list_padding"    android:paddingRight="@dimen/list_padding" /><!-- 這個list布局檔案會在ListFragment中用到。 -->

 

5、row.xml

<?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="50dp"    android:orientation="horizontal" >    <ImageView        android:id="@+id/row_icon"        android:layout_width="50dp"        android:layout_height="50dp"        android:padding="10dp"        android:src="@drawable/ic_launcher" />    <TextView        android:id="@+id/row_title"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center_vertical"        android:padding="10dp"        android:text="Medium Text"        android:textAppearance="@android:style/TextAppearance.Medium" /></LinearLayout><!-- 用於存放列表中的圖片和文本。 -->

 

6、shadow.xml資源

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient        android:centerColor="#11000000"        android:endColor="#33000000"        android:startColor="#00000000" /></shape><!-- 用來實現陰影製作效果的圖形，使用了漸層的繪圖效果。 -->

 

7、SampleListFragment類

package com.yanis.slidingmenu;import android.content.Context;import android.os.Bundle;import android.support.v4.app.ListFragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ArrayAdapter;import android.widget.ImageView;import android.widget.TextView;/** * 划出的功能表列 - 用來顯示介面中的列表的。 */public class SampleListFragment extends ListFragment {    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        return inflater.inflate(R.layout.list, null);    }    public void onActivityCreated(Bundle savedInstanceState) {        super.onActivityCreated(savedInstanceState);                SampleAdapter adapter = new SampleAdapter(getActivity());                for (int i = 0; i < 20; i++) {            adapter.add(new SampleItem("Sample List", android.R.drawable.ic_menu_search));        }        setListAdapter(adapter);    }        public class SampleAdapter extends ArrayAdapter<SampleItem> {        public SampleAdapter(Context context) {            super(context, 0);        }        public View getView(int position, View convertView, ViewGroup parent) {            if (convertView == null) {                convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null);            }            ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);            icon.setImageResource(getItem(position).iconRes);            TextView title = (TextView) convertView.findViewById(R.id.row_title);            title.setText(getItem(position).tag);            return convertView;        }    }        private class SampleItem {        public String tag;        public int iconRes;        public SampleItem(String tag, int iconRes) {            this.tag = tag;             this.iconRes = iconRes;        }    }}

 

8、SlidingMenuActivity_1、SlidingMenuActivity_2等類

這些類是對SlidingMenu的屬性進行設定,下面放個簡單的，具體可以查看原始碼。

package com.yanis.slidingmenu;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;/** *  * @author yechao * @說明 一個簡單的放置在左邊滑動功能表列的效果 */public class SlidingMenuActivity_2 extends FragmentActivity {    private SlidingMenu menu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        // 設定標題        setTitle("Attach");        // 初始化滑動菜單        initSlidingMenu();    }    /**     * 初始化滑動菜單     */    private void initSlidingMenu() {        // 設定主介面視圖        setContentView(R.layout.content_frame);        getSupportFragmentManager().beginTransaction()                .replace(R.id.content_frame, new SampleListFragment()).commit();        // 設定滑動菜單的屬性值        menu = new SlidingMenu(this);        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);        menu.setShadowWidthRes(R.dimen.shadow_width);        menu.setShadowDrawable(R.drawable.shadow);        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);        menu.setFadeDegree(0.35f);        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);        // 設定滑動菜單的視圖介面        menu.setMenu(R.layout.menu_frame);        getSupportFragmentManager().beginTransaction()                .replace(R.id.menu_frame, new SampleListFragment()).commit();    }    @Override    public void onBackPressed() {        // 點擊返回鍵關閉滑動菜單        if (menu.isMenuShowing()) {            menu.showContent();        } else {            super.onBackPressed();        }    }}

 

原始碼地址：https://github.com/YeXiaoChao/Yc_ui_slidingmenu

本文地址：http://www.cnblogs.com/yc-755909659/p/4306938.html

來源文章：

http://blog.csdn.net/yangyu20121224/article/details/9255829

http://blog.csdn.net/yangyu20121224/article/details/9258275

【Android UI設計與開發】9：滑動功能表列（一）開源項目SlidingMenu的使用和樣本