Android官方的側(cè)滑控件DrawerLayout

導(dǎo)語(yǔ)

側(cè)滑控件，以前大家用的可能是三方的SlidingMenu控件，最近在看谷歌源碼項(xiàng)目，意外的看到一個(gè) DrawerLayout 控件。上網(wǎng)一查，原來(lái)這個(gè)控件是官方給我們提供的一個(gè)側(cè)滑菜單控件。既然谷歌已經(jīng)提供了一個(gè)側(cè)滑控件，我們又何必去用一個(gè)三方的SlidingMenu控件來(lái)實(shí)現(xiàn)相同的效果。于是，我決定自己手敲一個(gè)Demo來(lái)實(shí)現(xiàn)看看。

1、DrawerLayout效果圖

2、DrawerLayout 的介紹

DrawerLayout的官方文檔介紹鏈接：http://androiddoc.qiniudn.com/reference/android/support/v4/widget/DrawerLayout.html
DrawerLayout 類(lèi)的結(jié)構(gòu)圖如下：


官方中文簡(jiǎn)介大概如下：
DrawerLayout作為窗口內(nèi)容的頂層容器，允許從窗口的一個(gè)或兩個(gè)垂直邊緣拉出交互式“抽屜”視圖。
抽屜定位和布局使用android:layout_gravity 子視圖對(duì)應(yīng)的屬性進(jìn)行控制，對(duì)應(yīng)于您希望抽屜從哪個(gè)側(cè)面出現(xiàn)：左側(cè)或右側(cè)（或支持布局方向的平臺(tái)版本上的開(kāi)始/結(jié)束）。請(qǐng)注意，您只能窗口的每個(gè)垂直邊緣的一個(gè)抽屜視圖。如果您的布局在窗口的每個(gè)垂直邊緣配置多個(gè)抽屜視圖，則會(huì)在運(yùn)行時(shí)拋出異常。
。。。

3、DrawerLayout 的使用

一般使用 DrawerLayout 側(cè)滑菜單，可以通過(guò) Toolbar + DrawerLayout來(lái)實(shí)現(xiàn)。
在res/layout 中，新建一個(gè)toolbar.xml文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/tl_custom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>

在新建一個(gè)drawerlayout.xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--主布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </LinearLayout>
    <!--側(cè)滑菜單-->
    <RelativeLayout
        android:layout_width="180dp"
        android:clickable="true"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#fff"
        >

        <LinearLayout
            android:id="@+id/ll_home_navigation_top"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_alignParentTop="true"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>

        <ListView
            android:id="@+id/lv_left_menu"
            android:layout_below="@id/ll_home_navigation_top"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:divider="@null"
            android:text="DrawerLayout" />
    </RelativeLayout>
</android.support.v4.widget.DrawerLayout>

主布局activity_main.xml：

<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"
    tools:context=".MainActivity">
    <!--Toolbar-->
    <include layout="@layout/custom_toolbar" />
    <!--DrawerLayout-->
    <include layout="@layout/custom_drawerlayout" />
</LinearLayout>

MainActivity.java：

public class MainActivity extends AppCompatActivity {

    protected boolean statusBarCompat = true;
    private static long DOUBLE_CLICK_TIME = 0L;

    //聲明相關(guān)變量
    private Toolbar toolbar;
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private ListView lvLeftMenu;
    private String[] lvs = {"Android", "iOS", "Python", "Html5", "Java"};
    private ArrayAdapter arrayAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if (statusBarCompat) {
            StatusBarCompat.compat(this, ContextCompat.getColor(this, R.color.colorPrimary));
            transparent19and20();
        }

        findViews(); //獲取控件

        toolbar.setTitle("Drawerlayout");//設(shè)置Toolbar標(biāo)題
        toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //設(shè)置標(biāo)題顏色
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true); //設(shè)置返回鍵可用
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //創(chuàng)建返回鍵，并實(shí)現(xiàn)打開(kāi)關(guān)/閉監(jiān)聽(tīng)
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 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);
            }
        };
        mDrawerToggle.syncState();
        mDrawerLayout.addDrawerListener(mDrawerToggle);
        //設(shè)置菜單列表
        arrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvs);
        lvLeftMenu.setAdapter(arrayAdapter);

        lvLeftMenu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this, "點(diǎn)擊"+position , Toast.LENGTH_SHORT).show();
            }
        });

    }
    //返回鍵監(jiān)聽(tīng)
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (event.getKeyCode() == KeyEvent.KEYCODE_MENU && mDrawerLayout != null) {
            if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            } else {
                mDrawerLayout.openDrawer(Gravity.LEFT);
            }
            return true;
        }  else if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {
            if (mDrawerLayout.isDrawerOpen(Gravity.LEFT)) {
                mDrawerLayout.closeDrawer(Gravity.LEFT);
            } else {
                if ((System.currentTimeMillis() - DOUBLE_CLICK_TIME) > 2000) {
                    Toast.makeText(MainActivity.this, "再按一次退出", Toast.LENGTH_SHORT).show();
                    DOUBLE_CLICK_TIME = System.currentTimeMillis();
                } else {
                    finish();
                }
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    protected void transparent19and20() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT
                && Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }

    private void findViews() {
        toolbar = (Toolbar) findViewById(R.id.tl_custom);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
        lvLeftMenu = (ListView) findViewById(R.id.lv_left_menu);
    }
}

本文的源碼，如果誰(shuí)有興趣要的，直接關(guān)注微信公眾號(hào)后臺(tái)回復(fù)：側(cè)滑 或者DrawerLayout 。

4、總結(jié)

本文創(chuàng)作時(shí)間為4個(gè)小時(shí)，原創(chuàng)不易，如果哪里有錯(cuò)誤或者寫(xiě)作意見(jiàn)，請(qǐng)幫忙指正和提醒，謝謝，大家共同進(jìn)步！

本文屬于原創(chuàng)，如有轉(zhuǎn)載，請(qǐng)標(biāo)注原作者，版權(quán)歸本公眾號(hào)所有。如果你喜歡我寫(xiě)的文章請(qǐng)關(guān)注 程序IT圈 ，歡迎大家繼續(xù)關(guān)注本公眾號(hào)的技術(shù)博文。如果您覺(jué)得這篇文章對(duì)你有所幫助的話，不妨點(diǎn)個(gè)贊或給個(gè)贊賞哈，您的支持就是我堅(jiān)持原創(chuàng)的動(dòng)力~~

最后，如果你想寫(xiě)公眾號(hào)和熱愛(ài)編程的朋友們，我建立了個(gè)技術(shù)微信群，可以公眾號(hào)回復(fù) "加群" ，歡迎您進(jìn)群學(xué)習(xí)哈~

推薦閱讀
福利篇：學(xué)習(xí)編程視頻免費(fèi)領(lǐng)取

Retrofit常見(jiàn)注解全解析

五大步驟快速搭建個(gè)人網(wǎng)站

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容