ToolBar+DrawerLauoyt學習

看到現在很多的手機應用程式都遵循最新的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

ToolBar+DrawerLauoyt學習

完整的Java代码

推荐阅读更多精彩内容