Material Design

Material Design 总结 概述 为用户创造了崭新的视觉设计语言,与此同时,新的设计语言除了遵循经典设计定则,还汲取了最新的科技,秉承了创新的设计理念。这就是原质化设计(Material Design)。 环境 三维世界(3D world) 具备 x,y 和 z 轴的 3D 空间 光影关系(Light and shadow) 在 material 环境中,虚拟的光线照射使场景中的对象投射出阴影,主光源投射... 阅读详情

Material Design
Android Material Design系列之主题样式介绍说明等
阴影效果:
在Android5.x 增加了一个新的属性 Z

z=elevation+translationZ

通过XML代码来设置高度

android:elevation="xxdp"

在程序中通过代码来动态改变视图高度。

 view.setTranslationZ(xxx)

综合例子:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="2dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="23dp"
        />
</LinearLayout>

效果图
这里写图片描述
2.Tinting(着色) 和Clipping(裁剪)
Tinting只需在XML中配置好tini和tiniMode就可以了。下面一个例子。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:elevation="2dp"
        android:background="@mipmap/ic_launcher"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="add"
        />
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="11111"
        android:src="@mipmap/ic_launcher"
        android:elevation="2dp"
        android:tint="@android:color/holo_blue_bright"
        android:tintMode="multiply"
        />
</LinearLayout>

效果图这里写图片描述
Clipping 裁剪

package com.example.wangbaofu.viewserverdemo;

import android.app.Activity;
import android.graphics.Outline;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewOutlineProvider;

public class ElevationActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_elevation);

        View view1 = findViewById(R.id.tv_rect);
        View view2 = findViewById(R.id.tv_cricle);
        View view3 = findViewById(R.id.image);
//        获取OutLine
        ViewOutlineProvider ViewOutlineProvider = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),30);
            }
        };
        //        获取OutLine
        ViewOutlineProvider ViewOutlineProvider2 = new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setOval(0, 0, view.getWidth(), view.getHeight());
            }
        };
//      重新设置形状
        view1.setOutlineProvider(ViewOutlineProvider);
        view2.setOutlineProvider(ViewOutlineProvider2);
        view3.setOutlineProvider(ViewOutlineProvider2);
    }
}

xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.wangbaofu.viewserverdemo.ElevationActivity"
    android:orientation="vertical"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="2dp"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="11111"
        android:background="@mipmap/ic_launcher"
        android:elevation="23dp"
        />

</LinearLayout>
Material Components Material Design组件入门教程 Material Design是Google推出的设计语言,Material Components是其官方UI组件库,可帮助开发者快速实现精美的界面效果。文章介绍了Material Design的核心设计理念,包括材质隐喻、有意义的动效等,并重点讲解了Material Components for Android的使用方法。通过按钮、文本输入框、卡片和底部导航栏等基础组件的代码示例,展示了如何轻松创建符合Material规范的应用界面。该组件库能显著提升开发效率,同时确保应用具备一致性和高质量的交互体验。 阅读详情

相关推荐

Material Design风格浅析

说明:本文中的代码均是在Android Studio 2.0 preview版本中编译。Material Design是Android5.0 (API 21)推出的一套全新设计语言,同时体现了一种科技感。Google希望该设计语言的可视化风格(visual), 物体运动风格(motion)和交互设计风格(interaction design)能够在跨平台、跨设备的场合运行。

vanpersie_9987的博客 1411

Material Design详解

转:  ANDROID L——Material Design详解(主题和布局) ANDROID L——Material Design详解(视图和阴影) ANDROID L——Material Design详解(UI控件) ANDROID L——Material Design详解(动画篇) Material Theme 使用Mate

wxx614817的专栏 1710

Material Design在Android中的应用实践

通知栏是Android系统中非常重要的组件,它负责向用户显示应用程序的重要信息。自定义通知栏可以提供更丰富的用户交互体验,以及满足特定业务需求。本章节将详细介绍Android通知栏的基础知识、自定义实现步骤以及高级自定义技巧。是Android Support Library提供的一个兼容性类,用于构建现代的通知。以下是构建通知的基本步骤:// 创建一个通知构建器.setSmallIcon(R.drawable.notification_icon) // 设置小图标。

weixin_42393362的博客 1109

MaterialDesign_简介

MaterialDesign_简介1. 什么是MaterialDesign?伯乐在线上的介绍2. 使用MaterialDesign思想创作的App更多是不是感觉非常炫酷?从此再也不用照着IOS设计图纸来设计Android App了3. 使用MaterialDesign的准备3.1. Eclipse对于使用Eclipse开发的程序猿,开发MaterialDesign要比使用AS麻烦点,主要是导库方面,

张立春的博客 4964

Windowns下Git环境配置-命令行方式

文章目录一、配置Git1.1 下载Git并安装1.2 配置本地Git用户名和邮箱1.3 注册GitHub二、生成本地公钥,放到GitHub上-SSH Key2.1 生成本地公钥命令2.2 查看生成的公钥2.3 在GitHub放上公钥并测试连通性三、创建项目实操四、可能出现的问题4.1.push不成功4.2.提示SSL的问题4.3.域名不能解析的问题4.4.如果github连接不上的问题 一、配置Git 1.1 下载Git并安装 Git官网 默认安装,根据需要修改安装路径 1.2 配置本地Git用户名和邮箱

学习工作笔记 1137

SAP Script表单开发中ABAP preform方法的实战应用与调试技巧

本文深入探讨了在SAP Script表单开发中调用ABAP程序(preform方法)的实战应用与调试技巧。通过一个获取供应商版本名称的实例,详细讲解了如何在SE71中嵌入PERFORM指令、编写ABAP子程序进行数据查询与处理,并重点介绍了使用SAP Script Debugger进行高效调试的方法,帮助开发者灵活扩展表单功能,实现复杂业务逻辑。

o0p1q2r3的博客 554

Material Design介绍

Material Design介绍 一、Toolbar 说到Toolbar,就要提到ActionBar了,每个活动最顶部的那个标题栏其实就是ActionBar。不过ActionBar由于其设计的原因,被限定只能位于活动的顶部,从而不能实现一些Material Design的效果,因此官方现在已经不再建议使用ActionBar了。 打开AndroidManifest.xml文件看一下,可以看到,这里...

MRYZJ的博客 879

雪莉果的Axure原型工厂vol.006 中继器应用(二)——多选穿梭框

如果你用axure有一段时间了,那么你很快就能琢磨出一个大体设计流程,比如加一个中间过度的元件,来储存需要穿梭的内容;但是如果你再想一想,就会发现,这样做,似乎只能解决单选,那么多选需要怎么操作呢? 这时候,中继器就会告诉你,我还能做的更多。

weixin_43829792的博客 979

探索Material Design的魅力:Material Design Example项目推荐

探索Material Design的魅力:Material Design Example项目推荐 在当今移动应用的浩瀚宇宙中,用户体验设计的重要性日益凸显。Google的Material Design设计语言,以其简洁、动态且富有表现力的特点,成为引领潮流的设计标准之一。今天,我们特别推荐一个旨在展示Material Design精髓的开源项目——Material Design Example,...

gitblog_00594的博客 1004

Android SurfaceFlinger——概述(一)

对于系统渲染流程的理解是指导 SurfaceFlinger 设计的核心思想,从 Android 4.1 一直到 Android 9.0 都没有太大的变化。只要抓住这五个核心思想,我们阅读 SurfaceFlinger 的难度就会下降不少。下面看一下 SurfaceFlinger 的体系和 Skia 以及 View的绘制流程的关系。framework 面向开发者所有的 View 是便于开发的控件,里面仅仅只是提供了当前 View 各种属性以及功能。

小旭的专栏 2584

YOLO创新点改进点的消融实验设计规范

YOLO改进的消融实验是一种重要的方法,用于评估和验证模型中不同组件的影响。在进行YOLO改进的消融实验时,我们可以选择一些可能的改进点,比如Backbone网络、Anchor框设计和损失函数设计,然后通过实验来分析它们对模型性能的影响。首先,我们需要确定实验设计。对于每个改进点,我们将设计多个实验组,并针对每个实验组训练模型并进行性能评估。这里以三个改进点为例进行说明:改进点1:Backbone网络 (改进点2:Anchor框设计 (改进点3:损失函数设计 (

crasher123的博客 2913

Angular Material Design Lite 使用教程

Angular Material Design Lite 使用教程 1. 项目介绍 Angular Material Design Lite 是一个基于 Material Design Lite (MDL) 的 Angular 封装库。它允许开发者在 Angular 项目中轻松集成 Material Design 的视觉风格和交互效果。Material Design Lite 是由 Google ...

gitblog_00681的博客 1283

Claude Code 分布式并行开发最佳实践:1中枢+10Worker跨多Git仓库全流程落地

本文介绍了一套基于Claude Code和Git Worktree的分布式并行开发方案,解决多仓库、微服务开发中的核心痛点。方案采用"1个决策中枢+10个并行Worker"架构,中枢负责任务拆解和调度,每个Worker绑定独立仓库实现完全隔离开发。关键优势包括:任务并行效率提升10倍、跨仓库依赖自动编排、版本统一管理、零第三方依赖。文章详细提供了环境准备、架构设计、中枢搭建和初始化脚本等全流程落地指南,特别适合多仓库协同的全栈开发场景。

AI天才研究院 244

第11天:Material Design

是由Google在2014年推出的一套设计语言,旨在为用户提供统一、美观且直观的用户体验。它结合了经典设计原则和创新的技术,适用于各种设备和屏幕尺寸。Material Design不仅涵盖了视觉设计,还涉及动效设计、布局设计和组件设计等多个方面。主要特点包括:一致性:确保不同应用在视觉和交互上的一致性。灵活性:适应不同设备、屏幕尺寸和用户需求。可扩展性:支持从简单到复杂的各种界面设计。美观性:通过精心设计的组件和布局,提升应用的整体视觉效果。

weixin_41644568的博客 2014

ARM交叉编译gdbserver并远程在线调试

arm-linux平台。5、生成完整的makefile,新建full_install,执行 ./configure --target=arm-linux-gnueabihf --host=arm-linux-gnueabihf --program-prefix=arm-linux-gnueabihf- CC=arm-linux-gnueabihf-gcc --prefix=/home/geyuxi/Documents/full_install。如果--host和--build不同,是交叉编译;

wangjie36的博客 3169

YOLOv11涨点改进 | Conv篇/小目标改进 | YOLOv11引入SPDConv卷积特征无损下采样模块,增加YOLOv11小目标P2检测层(助力小目标任务高效涨点)

本文提出了一种创新的SPDConv模块来优化YOLOv11模型,通过空间到深度(SPD)层和非步幅卷积层实现特征无损下采样。该方法有效解决了传统CNN中因跨步卷积和池化层导致的细粒度信息丢失问题,特别提升了小目标检测性能。实验表明,SPDConv在目标检测和图像分类任务中显著优于现有SOTA模型。文章详细介绍了模块原理、核心代码实现,并提供了YOLOv11集成SPDConv的具体方法,包括配置文件修改和P2层增强等优化技巧。该技术为计算机视觉任务提供了一种高效的特征保留方案。

Ai缝合怪、助力小伙伴高效发论文 588

Angular Material vs. Material Design Lite

https://scotch.io/bar-talk/angular-material-vs-material-design-lite In this article we’re going to explore the options that Google provides us when implementing Material Design in our

youhan26的专栏 1943

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

Material Design Extensions:WPF应用Material Design风格的终极解决方案

Material Design Extensions是基于Material Design in XAML Toolkit开发的WPF扩展控件库,为开发者提供了丰富的Material Design风格控件和功能,帮助快速构建现代化桌面应用。本文将详细介绍这个强大工具的核心功能、使用方法和实战案例,让你的WPF应用瞬间提升视觉档次! ## 🎨 什么是Material Design Extensio

gitblog_00793的博客 376

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Material Design 设计风格

安装 NuGet 包在项目中安装。合并资源字典(App.xaml)在应用启动资源中引入主题和默认样式。-- 引入 Material Design 主题 -->-- 引入默认控件样式 -->-- 引入颜色定义 -->ControlzEx 的作用它是 WPF 窗口自定义的"瑞士军刀",让你在享受完全设计自由的同时,不用牺牲任何窗口的原生功能和用户体验。

qq_3517289697的博客 847

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Material Design Library 使用汇总

如有遗漏,欢迎大家留言告知。我会持续补充,谢谢~。要使用Material Design Library ,首先得将依赖库加入到项目中,在app的build.gradle中(dependencies{ }),添加如下:compile 'com.android.support:design:24.0.0'1 Color Pal...

cnzzs的博客 877

Vue Material Design Icons:将Material Design图标集成到Vue项目中的便捷方案

Vue Material Design Icons:将Material Design图标集成到Vue项目中的便捷方案 Vue Material Design Icons是一个开源项目,旨在将Material Design Icons以Vue单文件组件的形式集成到Vue项目中。该项目主要使用JavaScript和CSS编程语言开发。 项目基础介绍 本项目是基于Vue.js框架,将Material D...

gitblog_00069的博客 646

iOS Material Design 应用开发指南

iOS Material Design 应用开发指南 本指南旨在帮助开发者快速理解和上手 ios-material-design 这一开源项目,该项目旨在实现Google的Material Design设计规范于iOS平台。以下是核心内容概览: 1. 项目目录结构及介绍 ios-material-design项目遵循清晰的结构组织,以支持高效的开发和维护。 Sources: 包含了项目的主要源...

gitblog_00377的博客 1032

Vue.js 中的 Material Design:全面指南之 Material Components Vue

Vue.js 中的 Material Design:全面指南之 Material Components Vue 项目介绍 Material Components Vue 是一个基于 Google 的 Material Design 规范 的 Vue.js 实现库。它封装了官方的 mdc-web 组件,旨在提供一套简洁且易于使用的 Vue 组件集合。这个库鼓励遵循 Material Design 标...

gitblog_00430的博客 1153
上一篇: Android 性能优化
下一篇: 微信支付
我叫王哈哈
博客等级 码龄11年 36粉丝 98原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值