Material Design

###依赖
compile 'com.android.support:appcompat-v7:24.1.1'
testCompile 'junit:junit:4.12'
compile 'com.android.support:recyclerview-v7:23.4.0'
compile 'com.android.support:design:24.1.1'

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.2.1'
Material依赖库:Android Design Support Library
####Theme
主题常见属性:
colorPrimary、colorPrimaryDark、colorAccent、statusBarColor(5.0才有)、windowBackground、navigationBarColor、


xmlns:app命名空间
使用xmlns:android来指定一个命名空间,android:idandroid: layout_width等写法来使用android命名空间下的属性。要使用Material Design的属性,那么为了能够兼容之前的老系统,我们就不能使用android:attribute这样的写法了,而是应该使用app:attribute
####ToolBar(support-v7)
使用注意事项:
1. 继承 AppcompatActivity
2. Activity T heme noActionBar, 不然就会有两个 Toolbar
3.setSupportActionBar ( toolbar );
3.menu 背景色
2.showAsAction : never always ifRoom:Toolbar 能显示得下时显示,显示不下隐藏在 menu collapseActionView withText)
4.menu 主题
   给Toolbar设置Theme,可指定 actionMenuTextColor、textColor、textSize
5.Toolbar中的action按钮只会显示图标,菜单中的action按钮只会显示文字。
6.最左边的按钮叫HomeAsUp按钮,它也是一个菜单按钮,可以在菜单相关方法里使用它,它的id永远都是android.R.id.home
设置Toolbar上的icon?
怎么创建菜单?
Menu中showAsAction有哪几个选项?
设置弹出菜单主题?

对比ActionBar的优势
1.ActionBar 被包含在主题里面,而 Toolbar 是作为一个控件被使用的;且更加灵活
2.每个版本的ActionBar都不太一样,Toolbar解决了ActionBar的碎片化问题
3.可以配合其他控件实现Material Design效果

####DrawerLayout
DrawerLayout布局里第一个是内容,第二个是侧拉拦
必须给侧拉栏设置layout_gravity,表示打开侧拉拦的位置,是在屏幕的左边还是右边

####NavigationView(Design Support)
menu、headerLayout

####FloatingActionBar( Design Support
自带阴影悬浮按钮
也可通过app:elevation属性指定阴影高度,高度值越大,投影范围也越大,但是投影效果越淡,高度值越小,投影范围也越小,但是投影效果越浓

####CardView(appcompat-v7
属性:
  • android:cardCornerRadius
    • 在xml文件中设置card圆角的大小
  • CardView.setRadius
    • 在代码中设置card圆角的大小
  • android:cardBackgroundColor
    • 在xml文件中设置card背景颜色
  • android:elevation
    • 在xml文件中设置阴影的大小
  • card_view:cardElevation
    • 在xml文件中设置阴影的大小
  • card_view:cardMaxElevation
    • 在xml文件中设置阴影最大高度
  • card_view:cardCornerRadius
    • 在xml文件中设置卡片的圆角大小
  • card_view:contentPadding
    • 在xml文件中设置卡片内容于边距的间隔
  • card_view:contentPaddingBottom
    • 在xml文件中设置卡片内容于下边距的间隔
  • card_view:contentPaddingTop
    • 在xml文件中设置卡片内容于上边距的间隔
  • card_view:contentPaddingLeft
    • 在xml文件中设置卡片内容于左边距的间隔
  • card_view:contentPaddingRight
    • 在xml文件中设置卡片内容于右边距的间隔
  • card_view:contentPaddingStart
    • 在xml文件中设置卡片内容于边距的间隔起始
  • card_view:contentPaddingEnd
    • 在xml文件中设置卡片内容于边距的间隔终止
  • card_view:cardUseCompatPadding
    • 在xml文件中设置内边距,V21+的版本和之前的版本仍旧具有一样的计算方式
  • card_view:cardPreventConrerOverlap
    • 在xml文件中设置内边距,在V20和之前的版本中添加内边距,这个属性为了防止内容和边角的重叠


####CoordinatorLayout( Design Support
继承结构:
java.lang.Object
   ↳
android.view.View
    ↳
android.view.ViewGroup
     ↳
android.support.design.widget.CoordinatorLayout
作用:
CoordinatorLayout可以监听其所有子控件的各种事件,然后自动帮助我们做出最为合理的响应
CoordinatorLayout内部利用的也是嵌套滑动机制,所以可滑动的View只支持:RecyclerView NestedScrollView ViewPager
组成:
需要依赖的View:声明behavior的View(如可滑动View)
被依赖View:当CoordinatorLayout注意到声明了behavior的View后,会搜索其他子View作为其依赖的View

Behavior:定制需要依赖的View的行为

#####AppBarLayout
实现滚动后折叠ToolBar的效果
AppBarLayout有自己的Behavior, 可以管理其中的控件在内容滚动时的行为。
@CoordinatorLayout.DefaultBehavior(AppBarLayout.Behavior.class)
public class AppBarLayout extends LinearLayout {

layout_scrollFlags
scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed;
用于AppBarLayout的直接子View

scroll
Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点:第一点,如果使用了其他值,必定要使用这个值才能起作用;第二点:如果在这个child View前面的任何其他Child View没有设置这个值,那么这个Child View的设置将失去作用。

enterAlways
快速返回模式。其实就是向下滚动时Scrolling View和Toolbar之间的滚动优先级问题。向下滚动时, scroll 优先滚动Scrolling View, scroll | enterAlways 优先滚动Toolbar,当优先滚动的一方已经全部滚进屏幕之后,另一方才开始滚动。

enterAlwaysCollapsed
enterAlways的附加值。这里涉及到Child View的高度和最小高度,向下滚动时, Toolbar 先向下滚动最小高度值,然后Scrolling View开始滚动,到达边界时, Toolbar 再向下滚动,直至显示完全。

exitUntilCollapsed
这里也涉及到最小高度。发生向上滚动事件时,Child View向上滚动退出直至最小高度,然后Scrolling View开始滚动。也就是,Child View不会完全退出屏幕。

snap
简单理解,就是Child View滚动比例的一个吸附效果。也就是说,Child View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕,有点类似ViewPager的左右滑动。

####CollapsingToolbarLayout
是一个包裹 Toolbar 来实现折叠的App Bar.
作为AppBarLayout的直接子View
layout_collapseMode :
Parallax视差效果  Pin 固定不动
属性:折叠后遮罩、

###示例
```htmlbars
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android=" http://schemas.android.com/apk/res/android";
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">
    // AppBarLayout依赖于CoordinatorLayout,作为其子View
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        //CollapsingToolbarLayout依赖于AppBarLayout,作为其子View
        // background:背景图 minHeight:最小高度 contentScrim:遮罩,代码设置为Drawable layout_scrollFlags:滚动属性
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@drawable/p2"
            android:minHeight="100dp"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            // layout_collapseMode:折叠模式
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="100dp"
                app:layout_collapseMode="parallax"
                app:title="@string/title_activity_toolbar" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    // layout_behavior :行为
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
```

####沉浸式状态栏

windowTranslucentStatus API4.4 透明状态栏(沉浸式状态栏)
statusBarColor API5.0 设置状态栏颜色
两个属性不能混用,否则设置的statusBarColor不会生效
当status bar为透明或半透明时,内容会在状态栏底下被覆盖
改变状体栏及导航栏的颜色的本质是往DecorView中添加有颜色的View, 并放在状态栏及导航栏下面(下层)

fitSystemWindows
这个属性的作用是让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为true,就会调整view的 paingding 属性来给system windows留出空间(即给view添加一个值为状态栏高度的top padding)。
状态栏与导航栏拥有自己独立的窗口,而且这两个窗口的优先级较高,会悬浮在所有窗口之上,可以把系统自身的状态栏与导航栏看做全透明的,之所有会有背景颜色,是因为下层显示界面在被覆盖的区域添加了颜色,之后,通过SurfaceFlinger的图层混合,好像是状态栏、导航栏自身有了背景色。

沉浸式状态栏
1.设置 windowTranslucentStatus
2.布局加入fitSystemWindows




### Material Design 实现与应用 #### 设计理念概述 Material Design 是由谷歌开发的一种视觉语言,旨在为用户提供更统一、更系统的用户体验。这种设计理念强调物理属性的模拟以及响应式的交互效果[^1]。 #### 主要特性 - **分层结构**:通过阴影和表面处理来表现不同组件之间的层次关系。 - **动态动画**:流畅自然的动作反馈让用户操作更加直观易懂。 - **适应性强**:能够很好地适配各种屏幕尺寸和设备类型。 #### 应用实例分析 以 `Eajy's Material Design 2 Demo` 应用为例,在该应用程序中可以看到许多典型的设计模式被有效运用。比如卡片式布局使得信息展示清晰有序;底部导航栏提供了便捷的操作入口;还有就是色彩搭配上遵循了Material Design指南中的建议,使整个界面看起来既美观又和谐。 对于想要深入了解如何具体实现这些特性的开发者来说,《Material Design 示例应用》项目是一个非常好的学习资源。此开源项目不仅包含了完整的源码文件,还附带详细的文档说明,可以帮助大家更好地理解并掌握Material Design的各项技术要点[^2]。 ```xml <!-- 使用CoordinatorLayout创建可滚动的内容区域 --> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 添加AppBarLayout用于放置顶部工具栏和其他控件 --> <android.support.design.widget.AppBarLayout ...> ... </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> ``` 上述代码片段展示了如何利用Android Support Library中的`CoordinatorLayout` 和 `AppBarLayout` 来构建符合Material Design风格的应用程序界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值