使用 DrawerLayout 實現 Material Design風格的側滑

阿新 • • 發佈：2017-06-25

mpat 內容 white eas str out top ica findview

先看效果吧!

效果一:

Android 2.3 效果

Android 5.0 效果

效果二:

Android 2.3 效果

Android 5.0 效果

分析:

1.0 效果一和效果二的區別 drawerLayout 跟 ActionBar 的位置區別,
效果一會覆蓋 ActionBar,
效果二顯示在ActionBar 下方.

Android 2.3 和5.0的區別是5.0的狀態欄和 app 連在一塊了.更統一了.

下面是2種方式的實現(本工程是以 android studio 實現):
1.0 首先在項目的工程底下的 Build,gradle

dependencies {
    compile fileTree(dir: ‘libs‘, include: [‘*.jar‘])
    compile ‘com.android.support:appcompat-v7:21.0.3‘
}

studio 在新建的時間默認是有的,檢查一下 appcompat 的版本,在這之上版本都可以.

value 下的dimens.xml

    <dimen name="tool_bar_top_padding">0dp</dimen>

value 下的style.xml

  <!-- Base application theme. -->
    <style name="NoActionBarAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>

在 value-v21(沒有就新建) dimens.xml

    <dimen name="tool_bar_top_padding">24dp</dimen>

在 value-v21(沒有就新建) 下的style.xml

 <style name="NoActionBarAppTheme" parent="Theme.AppCompat.Light.NoActionBar">


        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>

        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>


    </style>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>



    </style>

NoActionBarAppTheme: 適用使用 ToolBar 來代替 ActionBar 的Activity

AppTheme :適用在使用 ActionBar上的 Activity.

效果一:
布局文件:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mingle.service.ui.MainActivity">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
                   android:paddingTop="@dimen/tool_bar_top_padding">

        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/contentFL"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/toolBar" >
            </FrameLayout>

    </RelativeLayout>


    <LinearLayout
        android:id="@+id/menuLL"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:clickable="true"
        android:background="@android:color/white"
        android:orientation="vertical">
<............這裏寫你自己 的布局...../>
    </LinearLayout>


</android.support.v4.widget.DrawerLayout>

以android.support.v4.widget.DrawerLayout 為根控件.
DrawerLayout下包裹兩個控件.第一個控件是內容控件,第二個是側滑控件
使用android:layout_gravity 來指定它的滑動位置, start 表示從左滑出, end 表示從右滑出.

Toolbar 裏面有兩個屬性很關鍵:
android:minHeight="?attr/actionBarSize",這個表示引用系統 ActionBar 的高度.
android:paddingTop="@dimen/tool_bar_top_padding"這個是來引用資源文件裏面的tool_bar_top_padding的高度,這個高度主要是為了對5.0做適配,在5.0 上為24dp,其他版本為0dp

效果1的 androidmanifest.xml 是這樣定義的

      <activity
            android:name=".activity.Drawerlayout1Activity"
            android:theme="@style/NoActionBarAppTheme"
            android:label="@string/title_activity_dralayout1" >
        </activity>

效果1的在 activity onCreate()中這樣寫道:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
 toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
        setSupportActionBar(toolbar);

        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_string,R.string.close_string);
        actionBarDrawerToggle.syncState();

     drawerLayout.setDrawerListener(actionBarDrawerToggle);

效果二:
布局文件

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.mingle.service.ui.MainActivity">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <FrameLayout
            android:id="@+id/contentFL"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_below="@+id/toolBar" >
            </FrameLayout>

    </RelativeLayout>


    <LinearLayout
        android:id="@+id/menuLL"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="start"
        android:clickable="true"
        android:background="@android:color/white"
        android:orientation="vertical">
<............這裏寫你自己 的布局...../>
    </LinearLayout>


</android.support.v4.widget.DrawerLayout>

相較於效果一,他並沒有使用 toolBar 來代替 ActionBar 所以它的主題是AppTheme

在 androidmanifest.xml中:

 <activity
            android:name=".activity.DrawerLayout2Activity"
            android:theme="@style/AppTheme"
            android:label="@string/title_activity_drawer_layout2" >
        </activity>

在 Activity onCreate 中這樣寫道:

        drawerLayout= (DrawerLayout) findViewById(R.id.drawer);

        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,R.string.open_string,R.string.close_string);
        actionBarDrawerToggle.syncState();       drawerLayout.setDrawerListener(actionBarDrawerToggle);

在 Activity onOptionsItemSelected 方法

 int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == android.R.id.home) {
            if(  drawerLayout.isDrawerOpen(GravityCompat.START)
                    ){
                drawerLayout.closeDrawers();
            }else{
                drawerLayout.openDrawer(GravityCompat.START);
            }
            return true;
        }

        return super.onOptionsItemSelected(item);

使用 DrawerLayout 實現 Material Design風格的側滑

mpat 內容 white eas str out top ica findview 先看效果吧! 效果一: Android 2.3 效果 Android 5.0 效果效果二: Android 2.3 效果 Android 5.

使用 DrawerLayout 實現 Material Design風格的側滑

先看效果吧!

分析:

使用 DrawerLayout 實現 Material Design風格的側滑

實現Material Design風格的Actionbar和Drawer側邊導航欄

實現Material Design風格的點選水波盪漾效果

使用Toolbar + DrawerLayout快速實現高大上選單側滑

Android Material Design風格基本使用（實現簡易新聞APP）

打造Material Design風格的TabBar

開發Google Material Design風格的WPF程式

SwipeMenuListView實現類似於QQ側滑刪除效果

android：自定義Material Design風格ProgressDialog的進度框

教你寫一個炫酷的Material Design 風格的登入和註冊頁面

Android CardView 和Material Design風格設計學習

Android使用DrawerLayout仿qq6.6版本側滑效果

解決DatePicker在高版本上顯示成material design風格的問題

Go專案（一）、伺服器資料拉取和Material Design風格

Material Design風格文字輸入樣式TextInputLayout的使用

Android自定義ListView實現仿微信側滑刪除

Flutter：手把手教你實現一個仿QQ側滑選單的功能

Go專案（二）、toolbar和Material Design風格的選擇

純CSS Material Design風格按鈕

android 開發 -- NavigationView和DrawerLayout實現側滑欄（Material Design）

使用 DrawerLayout 實現 Material Design風格的側滑

先看效果吧!

分析:

相關推薦