安卓日记——设计简洁好看的UI

最近看到谷歌的to-do的那个demo，虽然他的mvp暂时还看不懂，但我觉得他的界面还是挺好看的，所以决定跟着模仿一下
效果图

主要是用到下面几个东西

• ToolBar
• ActionBarDrawerToggle
• Menu
• PopupMenu
• DrawerLayout
• FrameLayout
• ImageButton

首先说明一点，不同部分的布局分开写很重要

这样以后修改起来就会很方便，而不用慢慢地进入哪个主布局里滚啊滚啊
而且这样也更方便复写，所以强烈建议不同部分的布局分开来写

由于Actionbar功能不满足开发需求，现在基本上被Toolbar这个更好看更强大的顶部栏所取代

1.首先先设置一下主题先，把Actionbar去掉，把AppTheme的parent改为Theme.AppCompat.Light.NoActionBar，还有设置一下Toolbar的样式

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

</resources>

2.好，我们首先来新建一个名为custom_toolbar的layout写这个Toolbar

因为直接输入Toolbar的话系统可能不会提示，所以要记得写上在Toolbar前写上android.support.v7.widget，（建议直接复制我的代码过去）这个layout的全部代码如下

<?xml version="1.0" encoding="utf-8"?>
<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/tl_custom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/Toolbar">
</android.support.v7.widget.Toolbar>

3.接下来就是DrawerLayout

新建一个名为custom_drawerlayout的layout写这个DrawerLayout,记得在DrawerLayout前加上android.support.v4.widget，全部代码如下

<?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">