Android Material Design

最新推荐文章于 2019-11-22 09:02:39 发布
最新推荐文章于 2019-11-22 09:02:39 发布
阅读量167 收藏
点赞数
分类专栏： Android基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WillLiaowh/article/details/78389839
版权

1.Toolbar

新建一个项目，默认都会显示ActionBar，是根据项目中AndroidManifest中指定的主题来显示的。

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

指定不带ActionBar的主题有两种，Theme.AppCompat.NoActionBar 和 Theme.AppCompat.Light.NoActionBar。前者为深色主题，会将界面的主体颜色设为深色，陪衬颜色设为淡色，后者为淡色主题，会将界面的主体颜色设为淡色，陪衬颜色设为深色。

定义Toolbar:

   <android.support.v7.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="?attr/colorPrimary">

获取实例：

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

还可以通过添加action按钮来丰富Toolbar的内容，添加的逻辑和Actionbar添加menu相同。

在<Item>中通过app:showAsAction来指定按钮的显示位置,showAsAction主要有以下几种值可选：always表示永远显示在Toolbar中，如果屏幕空间不够则不显示；ifRoom表示屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在popupWindow中；never表示永远显示在popupWindow中。

Toolbar的action按钮只会显示图标，popupWindow的action按钮只会显示文字。

2.DrawerLayout

DrawLayout是一个布局，布局中允许放入两个直接子控件，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。

layout_gravity指定滑动菜单在屏幕的左边还是右边，指定为start，表示会根据系统语言进行判断，如果系统语言是从左往右，如英语、汉语，滑动菜单就在左边，如果系统语言是从右到左，比如阿拉伯语，滑动菜单就在右边。

通过setDisplayHomeAsUpEnabled()方法来让导航按钮显示出来，通过setHomeAsUpIndicator()方法来设置一个导航按钮图标。在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理，id永远是android.R.id.home。

3.NavigationView

NavigationView为让滑动菜单页面的实现变得更为简单。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
     ...
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_nav"
        app:menu="@menu/activity_nav_drawer" />

</android.support.v4.widget.DrawerLayout>

menu 是在NavigationView中显示具体的菜单项的，headerLayout则是用来在NavigationView中显示头部布局的。

调用setNavigationItemSelectedListener()方法来设置菜单项选中事件的Listener。

4.FloatingActionButton

FloatingActionButton不属于主界面的一部分，而是位于另外一个维度。

5.Snackbar

Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候可以执行一些额外的逻辑操作。

6.CoordinatorLayout

CoordinatorLayout是一个加强版的FrameLayout,可以监听其所有子控件的各种事件，然后自动帮我们做出最为合理的响应。比如Snackbar提示将FloatingActionButton遮挡住了，CoordinatorLayout会监听到Snackbar的弹出事件，自动将内部的FloatingActionButton向上偏移。

7.CardView

CardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果。

8.AppBarLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.liaowh.myapplication.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_scrollFlags="scroll|enterAlways|snap"/>

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

  <android.support.v7.widget.RecyclerView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">
  </android.support.v7.widget.RecyclerView>

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

AppBarLayout必须是CoordinatorLayout的子布局

1.将Toolbar嵌套到AppBarLayout中

2.给RecyclerView指定一个布局行为，这样才能将RecyclerView置于Toolbar下方

RecyclerView滚动的时候将滚动事件都通知给了AppBarLayout，当AppBarLayout接收到滚动事件的时候，它内部的子控件是可以指定如何去相应这些时间的，通过app:layout_scrollFlags属性就能实现。scroll表示当RecyclerVIew向上滚动的时候，Toolbar会跟着向上滚动并实现隐藏；enterAways表示当RecyclerView向下滚动的时候，Toolbar会跟着向下滚动并重新显示; snap表示当Toolbar还没有完全隐藏或者显示的时候，会根据当前滑动的距离，自动选择隐藏还是显示。

 SwipeRefreshLayout

在RecyclerView的外面嵌套一层SwipRefreshLayout，RecyclerView就有了下拉刷新功能。通过setOnRefreshListener()方法监听。

CollapsingToolbarLayout

CollapsingToolbarLayout是一个作用于Toolbar基础上的布局，可以让Toolbar的效果变得更加丰富。

CollapsingToolbarLayout限定只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局。

android:theme指定一个ThemeOverlay.AppCompat.Dark.ActionBar的主题，要实现更加高级的Toolbar效果，需要将这个主题指定提到上一层来。

app:contentScirm属性用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色，即折叠后的Toolbar的背景色。

exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上，不再移出屏幕。

app:layout_collapseMode指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，其中pin表示在折叠过程中位置始终保持不变，parallax表示在折叠过程中会产生一定的错位偏移。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.liaowh.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="@dimen/app_bar_height"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

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

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

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

    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:showIn="@layout/activity_scrolling"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.liaowh.myapplication.ScrollingActivity">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />

    </android.support.v4.widget.NestedScrollView>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

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

利用状态栏

Android 5.0之前，我们是无法直接对状态栏的背景或者颜色进行操作的，而Android5.0及之后的系统都是支持这个功能的。

1.将控件的android:fitsSystemWindows属性指定为true，表示该控件会出现在系统状态栏里。

2.在程序的主题中将状态栏的颜色指定为透明色，注意这里需要使用values-v21中的styles.xml

<style name="ExampleTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
        </style>
<activity android:name=".MainActivity"
            android:theme="@style/ExampleTheme">
        </activity>



Will_Liaowh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 之 Material Design（一）
AFinalDream
11-23 638
Material Design，TextInputLayout，Sncakbar
MaterialButton 去掉默认的点击阴影动画效果
xielunyan666的博客
08-11 2257
使用如下style即可： "@style/Widget.MaterialComponents.Button.UnelevatedButton" 对应的style定义如下： <style name="Widget.MaterialComponents.Button.UnelevatedButton"> <item name="android:stateListAnimator" ns2:ignore="NewApi">@animator/mtrl_btn_unelev
[Material Design] 教你做一个Material风格、动画的按钮(MaterialButton)
热门推荐
QiuJuer
10-07 1万+
前段时间 Android L 发布了，相信看过发布会了解过的朋友都为其中的 “Material Design” 感到由衷的惊艳吧！至少我是的。 在惊艳之余感到由衷的遗憾，因为其必须在 ”Android L“ 上才能使用，MD，郁闷啊。 之后便自己想弄一个点击动画试试，此念头一发不可收拾；干脆一不做二不休，就重写了一个 ”MaterialButton“ 控件出来。 在这里不讨论什么是 ：“Material Design” 。 在这里将给大家分享一下我自己弄的 “Material Design” 风格的 ”Ma
Android MaterialDesign
hongxue8888的博客
11-22 357
文章目录简介Material Design提供的材料主题AppCompatActivityCoordinatorLayoutBehaviorMaterial Design中的部分控件 Material Design相关网站 Material Design官网：https://www.mdui.org/design/material-design/introduction.html Material...
Android Material Design 中文版
05-10
原质化设计(Material Design)中文版 完整版 Google I/O 2014 发布的 Material Design 势必将会成为统一 Android Mobile、Android Table、Desktop Chrome 等全平台设计语言规范，对从业人员意义重大
android material design实现demo
01-26
Android Material Design 实现 Demo Material Design 是 Google 推出的一种设计语言，旨在提供一套统一、美观且具有响应式的用户界面设计规范。它不仅注重视觉效果，还强调用户体验和交互的一致性。在 Android 平台...
android MaterialDesign 动画
08-26
这个“android MaterialDesign 动画”资源很可能包含了一系列关于如何在Android应用中实现Material Design动画的示例代码和教程。下面将详细讨论Material Design动画的相关知识点。 1. **Material Design基础**： ...
Android Material Design Icon Generator Plugin.zip
09-24
Android Material Design Icon Generator Plugin 是一个开源项目，专为Android开发者设计，旨在简化应用程序中Material Design图标的使用。这个插件的目的是提高开发效率，避免手动创建和适配各种尺寸的图标，确保...
Android 简捷地为RecyclerView添加HeadView和FootView
WillLiaowh的博客
08-20 3393
之前自己尝试用ViewType的思路去实现为RecyclerView添加HeadView和FootView，总感觉自己写的代码太啰嗦了，向两位大神学习了一下他们的编码思路 RecyclerView添加Header的正确方式 Android 优雅的为RecyclerView添加HeaderView和FooterView 写了个简单了些的，分享给大家。 废话不多说，上图上代码。
Android Tinker的两种接入方式
WillLiaowh的博客
08-09 1838
老大让我把项目里的AndFix改为Tinker，遇到各种问题，网上的文章大同小异不清不楚，折腾了好几天好不容易搞出来了，来为跟我一样的菜鸟们指点迷津。 Tinker的接入主要有两种方式，一种是Tinker推荐使用的gradle接入，一种是命令行的接入。 一. gradle接入 1.project目录下gradle添加 buildscript { dependencies {
Android Studio的使用
WillLiaowh的博客
02-19 505
所谓工欲善其事必先利其器，Android Studio就是Android Developer的利器。 Adroid Studio的在安装前必须要安装jdk1.7或者以上的版本，至于环境变量可以不用配置，直接在Android Studio指定jdk的绝对路径即可。 一、Android Studio的安装 在这一步中第1个是Android Studio的主程序，第2个是Android 的
Android Studio项目结构
WillLiaowh的博客
08-02 470
Android Studio项目结构
Android View与LayoutInflater
WillLiaowh的博客
08-07 461
一、View View组件是一个空白的矩形区域，并负责这块区域的界面绘制和事件处理。 Android 中的所有UI组件类都继承了View类，扩展出具有各种形状和功能的UI组件。
Android 简捷地为ListView添加上拉加载
WillLiaowh的博客
08-03 412
分页是Android开发中常见的功能，ListView和RecyclerView的上拉加载是常用来实现分页的形式。 实现上拉加载的思路：当ListView或者RecyclerView发生滑动时，可视项的最后一项索引等于footView项索引，即屏幕底部的最后一项等于列表数据的最后一项。 public class LoadMoreListActivity extends AppCompatAct
Android Broadcast Receiver
WillLiaowh的博客
10-06 362
Android中，BroadCast(广播)一种是系统与进程，进程与进程之间通信的机制。
Android 简捷地为RecyclerView添加上拉加载
WillLiaowh的博客
08-04 344
相信我们经常在项目中遇到列表的每一行有n个item的需求，传统的ListView已经不再适用，google也早就为开发者提供了开发利器RecyclerView，但使用RecyclerView总会有这样那样的问题，不能像ListView一样拿来就用。我这里主要解决了两个RecyclerView常见的麻烦的问题： 1.HeaderView和FooterView的添加。 2.通过删除FooterVi
Android ListView解析
WillLiaowh的博客
05-10 342
ListView是我们的Android项目中常用的组件，以垂直列表的形式显示列表项。
精通Android Material Design：打造精美界面
"Learning Material Design" 是一本关于Android Material Design开发的学习资料，旨在帮助读者掌握Material Design，并能创建美观、动态的移动和网页应用界面。 Android Material Design是Google推出的一种设计语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值