【Android】側滑選單欄功能的實現(類似於QQ)
阿新 • • 發佈:2019-02-03
通過NavigationView+DrawerLayout來實現側滑選單的功能(效果圖如上),可通過點選左上角圖示以及向右滑動實現側滑選單
首先在主頁佈局xml中使用DreawerLayout作為外包裝,將側滑選單包裝起來即可,而功能則使用navigation實現
MainActivity.xml檔案如下:
側滑選單欄 頭像處佈局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/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <include layout="@layout/activity_main"/> <android.support.design.widget.NavigationView android:id="@+id/nav" android:layout_gravity="left" android:layout_width="wrap_content" android:layout_height="match_parent" android:fitsSystemWindows="true" xmlns:app="http://schemas.android.com/apk/res-auto" app:headerLayout="@layout/head" app:menu="@menu/new_menu"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout>
接下來便是側滑選單menu的佈局檔案 ,此處包含了各個選單項可以設定icon和文字的狀態,可百度menu關鍵詞查詢具體用法。此處直接在res資料夾下面直接建立一個名為menu的檔案然後把這個xml檔案放到menu資料夾下即可<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#2196F3"> <ImageView android:id="@+id/person" android:layout_width="72dp" android:layout_height="72dp" android:layout_marginTop="42dp" android:src="@mipmap/icon_camera"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:layout_marginTop="24dp" android:textColor="#ffffff" android:text="戶外植物識別系統v1版"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:layout_marginTop="12dp" android:textColor="#ffffff" android:layout_marginBottom="18dp" android:text="讓你快速知道植物資訊"/> </LinearLayout>
其實佈局完畢後,功能程式碼還是相對來說很簡單了,接下看看相關程式碼<?xml version="1.0" encoding="UTF-8" ?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/menu_History" android:title=" 識別歷史"/> <item android:id="@+id/menu_Setting" android:title=" 相關設定"/> <item android:id="@+id/menu_Feedback" android:title=" 反饋建議"/> <item android:id="@+id/menu_AboutUs" android:actionLayout="@layout/head" android:title=" 關於我們"/> </menu>
public class MainActivity extends AppCompatActivity {
// 圖片輪播--資料來源
private List<BannerviewModel> mData;
/** DrawerLayout */
private DrawerLayout drawerLayout;
//側滑選單欄
private NavigationView navigationView;
//沉浸式狀態列
private SystemBarTintManager tintManager;
//標題欄-側滑-按鈕
ImageView menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.drawer_main);
//自定義頂部導航欄方法
initView();
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
navigationView = (NavigationView) findViewById(R.id.nav);
View headerView = navigationView.getHeaderView(0);
//開啟手勢滑動開啟側滑選單欄,如果要關閉手勢滑動,將後面的UNLOCKED替換成LOCKED_CLOSED 即可
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
/**
* 側滑選單item點選事件
*/
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected( MenuItem item) {
switch (item.getItemId()){
case R.id.menu_History:
Intent intent1 = new Intent();
intent1.setClass(MainActivity.this, activity_AboutUs.class);
startActivity(intent1);
//此處不能加Finsh殺死介面否則點選返回會退出程式而不是回到主介面
break;
case R.id.menu_Setting:
Intent intent2 = new Intent();
intent2.setClass(MainActivity.this, activity_AboutUs.class);
startActivity(intent2);
break;
case R.id.menu_Feedback:
Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
break;
case R.id.menu_AboutUs:
Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
break;
}
drawerLayout.closeDrawer(navigationView);
return true;
}
});
這樣就完成了側滑選單了~~;
大家看效果圖時有沒有發現,我的狀態列和我的titlebar顏色是一樣的,這就是沉浸式狀態列的效果~~~沉浸式效果非常容易設定,詳情見這篇,連結在下面