【Android UI設計與開發】第17期：滑動功能表列（二）開源項目SlidingMenu的樣本

標籤：android   style   blog   http   io   color   ar   os   使用   

通過上一篇文章的講解，相信大家對於開源項目SlidingMenu都有了一個比較初步的瞭解（不瞭解的可以參考上

一篇文章），那麼從這一章開始，博主將會以SlidingMenu為重心，給大家帶來非常豐富的樣本示範，讓大家對

SlidingMenu有一個更加深入的瞭解以及如何去實現一些比較炫的滑動效果。

              這篇文章會給大家帶來7個不同效果的樣本，每個樣本都包含了最基本的使用方法，從易到難，循序漸進。能夠

讓初學者可以快速的掌握SlidingMenu的使用方法。下一篇文章會給大家帶來三種不同的動畫效果來實現滑動功能表列

的滑動。

         關於這些樣本，都是SlidingMenu開源項目中內建的一些樣本，但是對於初學者來說，要想運行這些樣本查看效

果，就必須要匯入很多的庫，使用起來也是非常的麻煩。博主這裡為了能夠方便大家更好的學習，就把每個樣本都單

獨拿了出來，並且添加了一些非常詳細的注釋，讓初學者能夠一看就懂，那麼博主的目的就達到了。

         好的，話不多說，希望大家能夠繼續支援！

 

一、樣本

 

        先上是博主一貫的作風，這樣做可以讓大家對於效果的實現有一個大概的瞭解，可以從中得到自己想要去

實現的效果。

 

1、樣本一

 

該樣本主要是示範通過改變不同的值來改變滑動菜單不同的效果，可以設定的值有：

<1> 設定滑動菜單顯示的位置（左邊、右邊或者左右兩邊都有）；

<2> 設定觸控螢幕幕的模式（全屏觸摸開啟滑動菜單、邊緣觸摸開啟滑動菜單或者觸摸不能開啟滑動菜單）；

<3> 設定滑動菜單滑動時縮放的效果以及關閉此效果（值越大效果越明顯）；

<4> 設定滑動菜單滑動時的陰影製作效果以及關閉此效果（值越大效果越明顯）；

<5> 設定滑動菜單滑動時漸入漸出的效果（值越大效果越明顯）。

                             一                                                                                                      二

                                  

 

2、樣本二

 

該樣本主要就是教大家實現一個簡單的放置在左邊滑動功能表列的效果。

                                    一

 

3、樣本三

 

該樣本實現了在左右兩邊存放兩個視圖，並且都可以通滑動螢幕來開啟。

                

 

4、樣本四

 

該樣本主要示範了通過Fragment來改變主視圖的介面內容。

                

 

5、樣本五

 

      該樣本也是通過Fragment來改變主視圖的介面內容，但不同的是列表中存放的是圖片，並且點擊列表圖片之後會

經過壓縮顯示出來。                                      

                        

 

                                                                         

 

6、樣本六

 

在該樣本中使用ViewPager這個類，將多個Fragment存放在viewpager中，並在主介面視圖內容中顯示出來。

                                                           一                                                                                                                                               二

             

 

7、樣本七

 

          該樣本主要示範了當觸控螢幕幕滑動時，上面的標題列TitleBar並不會跟隨著一起滑動，滑動的只是中間的內容視圖。（印象筆記實現了此效果）

 

二、代碼講解

 

        由於樣本比較多，所以博主我就不對每個樣本的代碼一一進行講解了，這裡就挑一個最基礎的樣本給大家講解一

下。在文章的末尾，我會把所有的樣本打包供大家下載學習，裡面有一些詳細的注釋，相信大家能一看就懂。

 

1、項目結構圖

 

 

2、content_frame.xml布局

         我們先從布局檔案開始講起，這裡為什麼要定義一個content_frame.xml呢？主要是為了定義一個虛擬視圖，方便Fragment能夠替換該視圖，以達到Fragment的視圖內容能夠顯示在螢幕上的效果。

<?xml version="1.0" encoding="utf-8"?>  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/content_frame"      android:layout_width="match_parent"      android:layout_height="match_parent" />  

大家可以看到這裡就定義了一個FrameLayout布局，在給它附上一個id，以至於在系統中可以找到該布局對象。
       

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

這個list布局檔案會在ListFragment中用到。

<?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" />  

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:endColor="#33000000"          android:centerColor="#11000000"          android:startColor="#00000000" />    </shape>  

7、SampleListFragment類

講完了布局檔案，再讓我們來看看Java檔案。這個類是用來顯示介面中的列表的。

package com.yangyu.myslidingmenudemo02;    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;    /**  * @author yangyu  *  功能描述：列表Fragment，用來顯示列表視圖  */  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);      }        private class SampleItem {          public String tag;          public int iconRes;          public SampleItem(String tag, int iconRes) {              this.tag = tag;               this.iconRes = iconRes;          }      }        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;          }        }  }  

8、MainActivity類

這是整個程式的入口類，也是在這個類中，對SlidingMenu的屬性進行設定。

package com.yangyu.myslidingmenudemo02;    import android.os.Bundle;  import android.support.v4.app.FragmentActivity;    import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;    public class MainActivity 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();          }      }    }  

講到這裡差不多就要結束了，下一篇會給大家帶來開啟滑動菜單時實現的動畫效果，希望大家能夠繼續關注！

 

樣本源碼

 

壓縮包中包含所有的項目樣本：

 

每個項目中包含了源碼、實現的以及可直接安裝啟動並執行APK：

 

特別注意：大家運行項目的時候千萬別忘了匯入slidingmenu_library項目，使用方法請參照上一篇文章。

【Android UI設計與開發】第17期：滑動功能表列（二）開源項目SlidingMenu的樣本