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

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

官方中文簡介大概如下:
DrawerLayout作為窗口內(nèi)容的頂層容器,允許從窗口的一個或兩個垂直邊緣拉出交互式“抽屜”視圖。
抽屜定位和布局使用android:layout_gravity 子視圖對應(yīng)的屬性進行控制,對應(yīng)于您希望抽屜從哪個側(cè)面出現(xiàn):左側(cè)或右側(cè)(或支持布局方向的平臺版本上的開始/結(jié)束)。請注意,您只能窗口的每個垂直邊緣的一個抽屜視圖。如果您的布局在窗口的每個垂直邊緣配置多個抽屜視圖,則會在運行時拋出異常。
3、DrawerLayout 的使用
一般使用 DrawerLayout 側(cè)滑菜單,可以通過 Toolbar + DrawerLayout來實現(xiàn)。
在res/layout 中,新建一個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>
在新建一個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)建返回鍵,并實現(xiàn)打開關(guān)/閉監(jiān)聽
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, "點擊"+position , Toast.LENGTH_SHORT).show();
}
});
}
//返回鍵監(jiān)聽
@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);
}
}
本文的源碼,如果誰有興趣要的,直接關(guān)注微信公眾號后臺回復(fù):側(cè)滑 或者DrawerLayout 。
4、總結(jié)
本文創(chuàng)作時間為4個小時,原創(chuàng)不易,如果哪里有錯誤或者寫作意見,請幫忙指正和提醒,謝謝,大家共同進步!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android側(cè)滑菜單之DrawerLayout用法詳解
- Android布局控件DrawerLayout實現(xiàn)完美側(cè)滑效果
- Android使用DrawerLayout仿QQ6.0雙側(cè)滑菜單
- Android側(cè)滑菜單控件DrawerLayout使用詳解
- Android原生側(cè)滑控件DrawerLayout使用方法詳解
- Android中DrawerLayout實現(xiàn)側(cè)滑菜單效果
- Android中DrawerLayout+ViewPager滑動沖突的解決方法
- Android DrawerLayout實現(xiàn)側(cè)拉菜單功能
- Android DrawLayout結(jié)合ListView用法實例
相關(guān)文章
Android EditText隨輸入法一起移動并懸浮在輸入法之上的示例代碼
這篇文章主要介紹了Android EditText隨輸入法一起移動并懸浮在輸入法之上,本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Android 實現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示)
下面小編就為大家分享一篇Android 實現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Android系統(tǒng)自帶樣式 (android:theme)
Android系統(tǒng)中自帶樣式分享,需要的朋友可以參考下2013-01-01
Android學(xué)習(xí)教程之高仿安卓微信6.0(2)
這篇文章主要為大家詳細介紹了Android學(xué)習(xí)教程之高仿安卓微信6.0的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11
Android實現(xiàn)千變?nèi)f化的ViewPager切換動畫
這篇文章主要為大家詳細介紹了Android實現(xiàn)千變?nèi)f化的ViewPager切換動畫,自定義PageTransformer實現(xiàn)個性的切換動畫,感興趣的小伙伴們可以參考一下2016-05-05
Android網(wǎng)絡(luò)請求框架Retrofit詳解
這篇文章主要為大家詳細介紹了Android網(wǎng)絡(luò)請求框架Retrofit,使用Retrofit2.0.0版本進行實例演示,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08

