介面無小事(六):來做個好看得側拉選單!

Sorrower發表於2018-08-02

介面無小事(一): RecyclerView+CardView瞭解一下

介面無小事(二): 讓RecyclerView展示更多不同檢視

介面無小事(三):用RecyclerView + Toolbar做個檔案選擇器

介面無小事(四):來寫個滾動選擇器吧!

介面無小事(五):自定義TextView

介面無小事(六):來做個好看得側拉選單!

github傳送門

目錄

  • 效果圖
  • 前言
  • DrawerLayout
  • Toolbar
  • fragment
  • NavigationView
  • CircleImageView
  • 最後

效果圖

不多廢話, 來看效果圖, 喜歡再看原始碼:

效果圖

前言

這次來說說側拉選單. 雖然現在手機越來越大, 但也不至於說直接把側拉選單全部展示出來, 因為很多時候, 它沒有展示的必要. 這次會涉及的內容是DrawerLayout, Toolbar, NavigationView, 都是與material design相關的.

DrawerLayout

看下主檢視佈局程式碼:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/dl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.so.knowledge.ui.activity.DrawerLayout.DrawerActivity">

    <RelativeLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <TextView
            android:id="@+id/tv_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/username"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="@dimen/thirty_sp" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_fun_list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical" />
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_user_info"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="end"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />
</android.support.v4.widget.DrawerLayout>
複製程式碼

這裡在DrawerLayout中塞進了三個佈局, android:layout_gravity="end"代表右側拉布局, android:layout_gravity="start"代表左側拉布局, 沒寫代表主介面佈局. 具體細節後面再說, 記得導包:

compile 'com.android.support:design:25.3.1'
複製程式碼

Toolbar

Toolbar我是很喜歡用的, 可以放置很多按鈕, 通過設定隱藏等, 看起來也依然簡潔.我在第三篇就寫過Toolbar的使用. 然後在效果圖中, 點選Toolbar的左側按鈕, 會展開左側的選單. 選單內容就是我在第一篇中寫的, 具體程式碼就是mDlMain.openDrawer(GravityCompat.START);. 點選右側按鈕, 會展開右側選單, 程式碼是mDlMain.openDrawer(GravityCompat.END);, 右側選單我們後面再說.

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            mDlMain.openDrawer(GravityCompat.START);
            break;

        case R.id.username:
            mDlMain.openDrawer(GravityCompat.END);
            break;
    }
    return true;
}
複製程式碼

fragment

仔細觀察的同學會發現點選左側選單的第一個和第二個按鈕會切換主介面字串的顏色, 其實不單單是切換顏色, 我重新放置了fragment. 當然了, 切換fragment不是什麼難事.

myRVAdapter.setOnItemClickListener(new MyRVAdapter.OnItemClickListener() {
    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "click: " + position, Toast.LENGTH_SHORT).show();
        FragmentTransaction ft = fm.beginTransaction();
        switch (position) {
            case 0:
                ft.replace(R.id.ll_content, new Fragment1());
                break;
            case 1:
                ft.replace(R.id.ll_content, new Fragment2());
                break;
            default:
                break;
        }
        ft.commit();
        mDlMain.closeDrawer(GravityCompat.START);
    }

    @Override
    public void onItemLongClick(View view, int position) {
        Toast.makeText(getApplicationContext(),
                "long click: " + position, Toast.LENGTH_SHORT).show();
    }
});
複製程式碼

我最想說的一點就是, 即使切換了fragment, 但是Toolbar依舊是存在的, 這點要注意.

NavigationView

官方文件 這是用來實現右側選單的. 主要要實現兩個部分, 就是佈局檔案中寫的header和menu部分. header部分是佈局程式碼, 而menu部分是menu程式碼. 關於CircleImageView部分, 後面有說. 這裡要說的是選單部分, 將兩個按鈕設定成單選條目組, 就和單選按鈕組是一樣的了.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_user_info"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu" />
複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/hundred_eighty_dp"
    android:background="@color/colorPrimary"
    android:padding="@dimen/sixteen_dp">

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/civ_avatar"
        android:layout_width="@dimen/sixty_four_dp"
        android:layout_height="@dimen/sixty_four_dp"
        android:layout_centerInParent="true"
        android:src="@drawable/avatar"
        app:civ_border_color="@android:color/white"
        app:civ_border_width="@dimen/two_dp" />

    <TextView
        android:id="@+id/tv_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="@string/email"
        android:textColor="@android:color/white" />

    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_email"
        android:text="@string/username"
        android:textColor="@android:color/white" />
</RelativeLayout>
複製程式碼
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_share"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/share" />
        <item
            android:id="@+id/nav_loc"
            android:icon="@mipmap/ic_launcher"
            android:title="@string/loc" />
    </group>
</menu>
複製程式碼

CircleImageView

這是個異常實用的開源專案, 使用起來也很簡單, 目的就是把普通圖片變成圓形圖片, 還可以加個白框或者黑框. 從效果圖來看, 還是很不錯的.

圓形圖片

最後

這次的很簡單, 就是融合了之前的內容, 並把google提供的側拉皮膚和選單皮膚的使用學會, 感謝google, 自己實現就可麻煩了. 喜歡記得點贊, 有意見或者建議評論區見, 暗中關注我也是可以的~

相關文章