1. 程式人生 > >【Android】側滑選單欄功能的實現(類似於QQ)

【Android】側滑選單欄功能的實現(類似於QQ)

    通過NavigationView+DrawerLayout來實現側滑選單的功能(效果圖如上),可通過點選左上角圖示以及向右滑動實現側滑選單

    首先在主頁佈局xml中使用DreawerLayout作為外包裝,將側滑選單包裝起來即可,而功能則使用navigation實現

MainActivity.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>
側滑選單欄  頭像處佈局xml檔案如下所示:
<?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>
接下來便是側滑選單menu的佈局檔案 ,此處包含了各個選單項可以設定icon和文字的狀態,可百度menu關鍵詞查詢具體用法。此處直接在res資料夾下面直接建立一個名為menu的檔案然後把這個xml檔案放到menu資料夾下即可
<?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顏色是一樣的,這就是沉浸式狀態列的效果~~~沉浸式效果非常容易設定,詳情見這篇,連結在下面