Material Design学习回顾（一）

最新推荐文章于 2023-06-06 22:53:42 发布

leonseven

最新推荐文章于 2023-06-06 22:53:42 发布

阅读量396

点赞数

分类专栏： Android

本文链接：https://blog.csdn.net/leonseven/article/details/69240534

版权

Android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文回顾了作者学习Material Design（MD）的过程，探讨了MD在应用设计中的普及情况。作者分享了在使用MD时遇到的问题，创建了一个Demo，并介绍了如何添加依赖库，如Toolbar的设置、菜单折叠效果以及CoordinatorLayout的应用，强调了这些组件相比传统方法的便利性。

摘要由CSDN通过智能技术生成

Material Design已经出来很久了，但很多app仍然还是沿用老套的设计，不知道什么时候这种设计语言才能普及。下面是自己学习MD遇到的一些坑，和一些见解，也做了个Demo，欢迎斧正！

首先是添加依赖库：

compile 'com.android.support:design:25.3.1'

我用的版本比较高，大家可以自行调整

1.Toolbar

首先要将主题改为MD风格

<style name="AppThemeBase" parent="Theme.AppCompat.Light">
    <!-- 字体颜色-->
    <item name="android:textColorPrimary">@color/primary_light</item>
    <!-- 去掉actionbar-->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <!-- 状态栏颜色-->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <!-- actionbar颜色-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- TextInputLyout颜色-->
    <item name="colorAccent">@color/colorAccent</item>

</style>

在布局文件中添加Toolbar，确保自己的是v7包

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbarlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        />

</android.support.design.widget.AppBarLayout>

这里把Toolbar单独拿出来写，之后在activity中初始化并使用

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

当然还有其他Toolbar上的选项

// logo
toolbar.setLogo(R.drawable.ic_launcher);
// 主标题
toolbar.setTitle("主标题");
// 副标题
toolbar.setSubtitle("副标题");

菜单：

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

菜单布局：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/item_1"
        app:showAsAction="never"
        android:title="选项一" />
    <item
        android:id="@+id/item_2"
        app:showAsAction="never"
        android:title="选项二" />
    <item
        android:id="@+id/item_3"
        app:showAsAction="never"
        android:title="选项三" />
</menu>

Toolbar有个折叠效果，首先改下toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbarlayout"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    >

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/chinared"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.6" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

CollapsingTollbarLayout提供了可折叠的toolbar效果，关于layout_scrollFlags：

scroll 是指要滚动必须设置这个

exitUntilCollapsed指向上滚动时收缩View，但Toolbar一直在上面

之后我们引用这个Toolbar

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/appbarlayout"
            layout="@layout/toolbar"/>

        <FrameLayout
            android:id="@+id/frame_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/appbarlayout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>
    
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:menu="@menu/navigationView"/>
</android.support.v4.widget.DrawerLayout>