看到現在很多的手機應用程式都遵循最新的Material Design设计规范，但是為什麼很多美工要模仿蘋果的UI呢？搞得我們Android程序猿每天都是在自定義view上花費時間，性能也下降了，覺得應該要讓他們學習Material Design设计规范。Material Design中文翻譯
** Toolbar和DrawerLaoyout都是官方的控件 **，最好的學習方法還是去看官方API文檔，突然間再次覺得學好英語是有多重要啊！
1.** ToolBar **的使用
- 首先我們怎麼引入到app中？隱藏ActionBar，有兩種方法，比較常用的是第二種，修改styles.xml文件
第一種方法
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
第二種方法
<!-- 繼承Theme.AppCompat.Light.NoActionBar-->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--ToolBar顏色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--状态栏颜色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item></style>
- 添加** ToolBar **,為了提高複用率，所以專門寫一個佈局custom_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<!--自定义命名空间：xmlns:app="http://schemas.android.com/apk/res-auto"-->
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolBar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
2.** DrawerLayout **的使用
- 添加** DrawerLayout **，也是在layout文件夾下新建一個custom_drawerlayout.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/dl_left"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text"
android:layout_width="200dp"
android:layout_height="wrap_content" />
</LinearLayout>
<!--侧滑菜单-->
<LinearLayout
android:id="@+id/dl_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff"
android:orientation="vertical">
<ListView
android:id="@+id/lv_left_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null"
android:text="DrawerLayout"></ListView>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
** Drawerlayout标签中有两个子节点，一个是左边菜单，一个是主布局，另外需要在左边菜单起始位置设置为android:layout_gravity="start" **
完整的Java代码
package com.example.kevin.drawlayouttest;
import android.graphics.Color;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
private Toolbar mToolbar;
private ListView lvleftMenu;
private TextView content;
private ArrayAdapter<String> adapter;
private ActionBarDrawerToggle mDrawerToggle;
private String[] listData = {"Java", "Kotlin", "Oc", "Swift"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
mToolbar.setTitle("ToolBar");//设置标题
mToolbar.setTitleTextColor(Color.parseColor("#ffffff"));//设置标题颜色
setSupportActionBar(mToolbar);
getSupportActionBar().setHomeButtonEnabled(true);//设置返回键可用
getSupportActionBar().setDisplayShowHomeEnabled(true);
//创建返回键，并且实现开/闭
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
content.setText("");
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
content.setText("my name is DrawerLayout");
}
};
mDrawerToggle.syncState();
mDrawerLayout.setDrawerListener(mDrawerToggle);
adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, listData);
lvleftMenu.setAdapter(adapter);
}
private void initView() {
mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);
mToolbar = (Toolbar) findViewById(R.id.toolBar);
lvleftMenu = (ListView) findViewById(R.id.lv_left_menu);
content = (TextView) findViewById(R.id.text);
}
}
** 运行效果图 **
效果图-1
效果图-2
