创建简单的Android Material DesignDemo

来源：互联网发布：linux备份文件命令bak 编辑：程序博客网时间：2024/04/27 02:28

1.关于MaterialDesign

还记得刚刚开始看到Android5.0刚出来的时候，感觉Android嵌入了MaterialDesign风格。那时候就感觉这种风格很好看。

2.Android上面实现MaterialDesign

这里的实现是在AndroidStudio上面实现的，如果是Eclipse的请绕过。现在的MaterialDesignDemo很多，这里我只是最近要想用MaterialDesign来设计一款应用。所以就关注了这方面的知识，并且结合网上的教程来实现的。

添加v7或者v13兼容包

当然Android的MaterialDesign是在差不多Android 5.0才出现的。所以很多情况下面是不兼容Android 5.0 以下的版本。为了避免出现很多问题的。我们要采取添加V7，v13等兼容包。下面我们是使用AndroidStudio作为开发环境，所以我用懂啊了gradle进行构建。

dependencies {    compile fileTree(include: ['*.jar'], dir: 'libs')    compile 'com.android.support:appcompat-v7:22.2.1'    compile 'com.android.support:cardview-v7:22.2.1'    compile 'com.android.support:recyclerview-v7:22.2.1'}

自定义Android的Theme

很多App的外观设计都是由Theme来定制的。这里的MaterialDesign定制也是要从这里入手。Android提供了3种风格的Theme。

@android:style/Theme.Material (dark version)        @android:style/Theme.Material.Light (light version)        @android:style/Theme.Material.Light.DarkActionBar

我们的演示是最后一种。

下面给出样式设置的图片说明

默认的styles.xml里面添加

    <!-- Application Base theme. -->    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/material_500</item>        <item name="colorPrimaryDark">@color/material_700</item>        <item name="colorAccent">@color/material_a200</item>        <!-- you can custome your actionBarStyle-->        <item name="actionBarStyle">@style/MyActionBar</item>    </style>

v21文件的styles.xml里面添加

    <!-- extend one of the Theme.AppCompat themes -->    <!-- Application theme. -->    <style name="AppTheme" parent="AppTheme.Base">        <item name="android:windowContentTransitions">true</item>        <item name="android:windowAllowEnterTransitionOverlap">true</item>        <item name="android:windowAllowReturnTransitionOverlap">true</item>        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>    </style>

Demo的效果图如下

v21以上的效果

v21以下的效果

Github上面的示范例子

https://github.com/mayubao/MaterialDesignDemo

0 0