Android 滑動導航菜單的快速構建(一)

滑動導航菜單一直都是移動App中比較流行的UI設計，隨著Material Design的盛行Android也越來越多采用這種設計，當然這種滑動菜單樣式也是各種各樣五花八門，這篇文章就來總結下如何利用Android Api去快速構建各種類型的滑動導航菜單效果。

1.先看第一種樣式，這也是QQ客戶端V6版本的滑動菜單樣式

快速實現這個UI效果需要利用V4包的SlidingPaneLayout控件，這是一個幫助開發者實現水平的多層滑動的Layout，繼承自ViewGroup。

下面看下具體的實現代碼

layout

代碼還是很簡單的，最外層是SlidingPaneLayout這個容器控件，裡面放了2個子布局，第一個用來放置導航菜單布局，第二個放置主視圖布局。

Java代碼
SlidingPaneLayout 一些主要方法
- setParallaxDistance(int parallaxBy) 設置滑動視差
- setCoveredFadeColor(int color) 導航菜單視圖的滑動顏色漸變
- setSliderFadeColor(int color) 主視圖的滑動顏色漸變
- setPanelSlideListener(SlidingPaneLayout.PanelSlideListener listener) 滑動監聽
- openPane() 打開導航菜單
- closePane() 關閉導航菜單
- https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html

/**
 * Created by www.lijizhou.com on 2016/7/23.
 * SlidingPaneLayout Sample
 */
public class SlidingPaneLayoutActivity extends AppCompatActivity {


    private SlidingPaneLayout mSlidingPane;
    private LinearLayout ll_menu,ll_main;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_slidingpane);
        mSlidingPane= (SlidingPaneLayout) findViewById(R.id.SlidingPane);
        ll_menu=(LinearLayout)findViewById(R.id.ll_menu);
        ll_main=(LinearLayout)findViewById(R.id.ll_main);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));

        //設置滑動視差 可選
        mSlidingPane.setParallaxDistance(200);
        //菜單滑動的顏色漸變設置 可選
        //mSlidingPane.setCoveredFadeColor(getResources().getColor(R.color.colorAccent));
        //主視圖滑動的顏色漸變設置 可選
        mSlidingPane.setSliderFadeColor(0);
        //滑動監聽 可選
        mSlidingPane.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() {
            @Override
            public void onPanelSlide(View panel, float slideOffset) {
                Log.i("mylog","slide --- "+slideOffset);

                // slideOffset這個參數 是跟隨滑動0-1變化的 通過這個數值變化我們可以做出一些不一樣的滑動效果
//                ll_menu.setScaleY(slideOffset / 2 + 0.5F);
//                ll_menu.setScaleX(slideOffset/ 2 +  0.5F);
//                ll_main.setScaleY(1 - slideOffset / 5);

            }
            @Override
            public void onPanelOpened(View panel) {
                Log.i("mylog","slide --- open");
            }

            @Override
            public void onPanelClosed(View panel) {
                Log.i("mylog","slide --- close");
            }
        });


    }


}

OK，這樣就實現了滑動導航的效果，注意在滑動監聽中的這個方法裡面，跟據slideOffset參數0~1的變化可以去改變視圖大小就會做出更多種類的效果，這裡我們設置滑動過程中改變主視圖的大小，代碼如下

public void onPanelSlide(View panel, float slideOffset) {
                Log.i("mylog","slide --- "+slideOffset);

                // slideOffset這個參數 是跟隨滑動0-1變化的 通過這個數值變化我們可以做出一些不一樣的滑動效果
                ll_menu.setScaleY(slideOffset / 2 + 0.5F);
                ll_menu.setScaleX(slideOffset/ 2 +  0.5F);
                ll_main.setScaleY(1 - slideOffset / 5);

            }

運行效果

2.下面介紹第二種滑動導航菜單的效果，主視圖不動，然後在邊緣劃出菜單。

快速實現這個效果需要利用V4包的DrawerLayout 這個布局容器，可見V4包下面有多少好東西，另外其實SlidingPaneLayout和這個DrawerLayout都是用V4的ViewDragHelper去實現的，這是一個幫助類，這裡就不多做介紹了，對它感興趣的可以深入了解下。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPr+0z8K0+sLryrXP1jwvcD4NCjxibG9ja3F1b3RlPg0KCTxwPkxheW91dDwvcD4NCjwvYmxvY2txdW90ZT4NCjxwcmUgY2xhc3M9"brush:java;">

需要注意的是主視圖的布局代碼要放在側滑菜單布局的前面，側滑菜單布局的代碼中android:layout_gravity=”start” 從左側滑動，反之end右側滑動。

Java代碼
DrawerLayout 的一些主要方法
addDrawerListener(DrawerLayout.DrawerListener listener) 添加滑動監聽
openDrawer(int gravity) 開啟導航菜單 參數：GravityCompat.START GravityCompat.END 要跟XML設置相同
closeDrawer(int gravity) 關閉導航菜單
isDrawerOpen(int drawerGravity) 菜單是否開啟
https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

/**
 * Created by www.lijizhou.com on 2016/7/23.
 * DrawerLayout Sample
 */
public class DrawerLayoutActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private Toolbar toolbar;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawerlayout);
        setSupportActionBar(toolbar=(Toolbar) findViewById(R.id.toolbar));
        drawerLayout=(DrawerLayout)findViewById(R.id.dl_left);
        //ActionBarDrawerToggle是DrawerLayout.DrawerListener的實現，可以方便的將drawlayout和actionbar結合起來
        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);

            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);

            }
        };

        actionBarDrawerToggle.syncState();

        drawerLayout.addDrawerListener(actionBarDrawerToggle);
    }
}

DrawerLayout跟ActionBarDrawerToggle配合快速構建出具有動畫交互的滑動導航菜單效果就實現了，是不是很簡單。

由於篇幅有限先介紹這兩個滑動效果，下一篇（二）將介紹具有material design官方設計標准的滑動菜單設計，先看下運行圖，下篇見，也歡迎朋友在下方留言和點擊坐上角的關注，感謝。

源代碼下載地址：https://github.com/lijizhou/SlidingLayoutSample