Material DesignのMaterial Menuサイドスライドメニュー
転載は出典を明記してください.http://blog.csdn.net/wu_wxc/article/details/47210777本文は【呉孝城のCSDNブログ】から
ToolBarにMaterial Menuの編集が必要なファイルを次の図に書きます.
まず最初に書きますxmlとvalues-v 21styles.xmlファイルとcolorファイル
values\styles.xml
values-v21\styles.xml
color.xml
コードの再利用性のためにtoolbarと左のメニューをそれぞれ2つの異なるレイアウトにダウンロードし、メインレイアウトにincludeを入れます.
toolbar.xml
左のメニューレイアウトに書くことに注意
書き終わったらJavaプログラム
MainActivity.java
実行効果は下図のようです
ソースコード
ToolBarにMaterial Menuの編集が必要なファイルを次の図に書きます.
まず最初に書きますxmlとvalues-v 21styles.xmlファイルとcolorファイル
values\styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- -->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!-- toolbar -->
<item name="colorPrimary">@color/colorPrimary</item>
<!-- -->
<item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>
<!-- -->
<style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
<item name="color">@android:color/white</item>
</style>
</resources>
values-v21\styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:navigationBarColor">@color/colorPrimary</item>
</style>
</resources>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimaryDark">#8ED6E9</color>
<color name="colorPrimary">#ff12c6f2</color>
<color name="overflowTextColor">#9e9e9e</color>
<color name="menu_background">#33CC52</color>
</resources>
次にレイアウトコードの再利用性のためにtoolbarと左のメニューをそれぞれ2つの異なるレイアウトにダウンロードし、メインレイアウトにincludeを入れます.
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/id_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
左のメニューレイアウトに書くことに注意
android:layout_gravity="start"
drawer_layout.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/id_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- -->
<LinearLayout
android:id="@+id/id_main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="www.wuxiaocheng.cn"
android:textSize="30sp" />
</LinearLayout>
<!-- -->
<LinearLayout
android:id="@+id/id_left_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/menu_background"
android:orientation="vertical"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textSize="30sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="www.wuxiaocheng.cn"
android:textSize="30sp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar"/>
<include layout="@layout/drawer_layout"/>
</LinearLayout>
書き終わったらJavaプログラム
MainActivity.java
package cn.wuxiaocheng.drawerlayout;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.Toolbar;
import android.view.View;
public class MainActivity extends ActionBarActivity {
private Toolbar toolbar;
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mdrawerlayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
toolbar = (Toolbar) findViewById(R.id.id_toolbar);
mdrawerlayout = (DrawerLayout) findViewById(R.id.id_drawer);
toolbar.setTitle("DrawerLayout"); //
toolbar.setTitleTextColor(Color.parseColor("#ffffff")); //
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true); //
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// ,
mDrawerToggle = new ActionBarDrawerToggle(this, mdrawerlayout, toolbar, R.string.tv_open, R.string.tv_close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
}
};
mDrawerToggle.syncState();
mdrawerlayout.setDrawerListener(mDrawerToggle);
}
}
実行効果は下図のようです
ソースコード