忍者ブログ

アンドロイドのあれこれ

[PR]
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Navigation DrawerでActionBarの上に、StatusBarの下にDrawerを置く
Navigation Drawer 基本実装 の続き

Navigation Drawer

Drawerの部分をActionBar(ToolBar)の上に表示させてかつ透明なステータスバーの下に表示させてみます。
アプリケーション側には変更せずにレイアウトとテーマだけ手を加えます。

テーマの修正

res/values-v21/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="DrawerActivityTheme" parent="ThemeTranslucentsStatus">
<item name="colorPrimary">@color/ms_primary</item>
</style>

<style name="ThemeTranslucentsStatus" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionModeOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>

レイアウトの修正

res/layout//activity_main.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:paddingTop="@dimen/status_bar_height"
android:elevation="3dp"/>
<!-- main content -->
<FrameLayout
android:id="@+id/main_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="?android:windowContentOverlay"
/>
</LinearLayout>

<!-- drawer content -->
<LinearLayout
android:id="@+id/drawer_menu_item_layout"
android:orientation="vertical"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="@android:color/white">

<!-- drawer item menu -->

</LinearLayout>

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


ステータスバーの高さ
res/values/dimens.xml
<resources>
<dimen name="status_bar_height">0dp</dimen>
</resources>


res/values-v21/dimens.xml
<resources>
<dimen name="status_bar_height">25dp</dimen>
</resources>



何をやっているかというと、テーマはオーバレイのステータス半透明にして
レイアウトではToolbarをDrawerLayoutで囲むようにします。
そして、Toolbarの高さとステータスバーの高さをAPIバージョンの違いにより調整します。
android:windowTranslucentStatusなどについてはこの以下のやんざむさんの記事を参考した方がいいと思います。
http://y-anz-m.blogspot.jp/2013/11/kitkat-android-44-ui.html

サンプルコードとアプリ

ソースコード: ng-b0ne/MaterialSample - Github
Playストアからアプリダウンロードして動作もできます。
MaterialSmaple - Google Play

以上。
COMMENT
NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 
PR
© Android Advent
powered by 忍者ツールズ / 忍者ブログ / [PR]