Material 主题下Button的大小问题

Material 主题下Button的大小问题,第1张

前端给了一些设计图,包括大小,字体颜色,背景颜色,字体大小;

看起来挺合理的,但是实际上总是会出现显示不全:

布局文件如下:

效果图如下:

跟原型图差别过大;

后来经过排查发现:主题使用了 Material 的

这样子Button在布局加载时会被替换成 MaterialButton;

而在该主题中,MaterialButton的样式是:

继续点击

继续追踪background的熟悉:

继续追踪“@drawable/btn_default_mtrl_shape"

其中

这就造成了按钮边框上下显示不全的问题。完全ojbk

在Button中添加以下属性,即可去除背景边框

效果图如下:

ojbk

Material 是 Google 创建的一个设计系统,旨在帮助团队为 Android、iOS、Flutter 和 Web 构建高质量的数字体验。

Material design的灵感来自物理世界及其纹理,包括它们如何反射光线和投射阴影。Material surfaces重新构想了纸张和墨水的介质。

Material组件是用于创建用户界面的交互式构建基块,并包括一个内置状态系统,用于传达聚焦、选择、激活、错误、悬停、按下、拖动和禁用状态。组件库可用于 Android、iOS、Flutter 和 Web。

组件可满足一系列接口需求,包括:

Material主题 可让您轻松自定义Material设计以匹配品牌的外观和感觉,并具有用于自定义颜色、版式样式和拐角形状的内置支持和指导。可以轻松修改按钮等Material组件的颜色、排版和形状,以匹配您的品牌。

Material主题指南

使用Material主题的app样例

Material的 颜色系统 是将颜色应用于 UI 的有组织的方法。全局颜色样式具有语义名称和组件中定义的用法 - 主要、次要(品牌颜色)、表面、背景和错误。

每种颜色还具有互补色,用于放置在其“之上”的元素,以促进一致性和可访问的对比度。

Material 设计 type scale 提供了13 种版式样式涵盖从标题到正文文本和题注的所有内容 。每种样式在界面中都有明确的含义和预期应用。

可以修改重要属性(如字体、字体粗细和字母大小写)以匹配您的品牌和设计。

应用 形状 样式有助于引导注意力或识别组件、传达其状态以及表达您的品牌。

所有材料组件都根据其大小(小、中、大)分组到形状类别中。这些全局样式提供了一种快速更改类似大小的组件的形状的方法。

您可以使用 形状自定义工具 生成自己的形状样式。

Material System

Material Theme UI 主题插件里面的一款美丽(晃眼)的IDEA主题 Material Solarized Light ,给枯燥的编码生活带来一点儿粉嫩的点缀~

首先安装Material Theme UI插件,在IDEA File >Settings >Plugin 里面搜 Material Theme UI ,然后 install+restart 就行了,

加上 彩虹猫 进度条插件(Nyan Progress Bar)

有条件的再加上粉色系的显示器&键盘&座椅,美滋滋.png

最后一个IDEA使用小tips:给IDEA多设置一些内存可以明显的提高IDE性能哦!

在 Help >Edit Custom VM Options 中的 -Xmx 项, eg: -Xmx4096m


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/tougao/9405153.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-28
下一篇2023-04-28

发表评论

登录后才能评论

评论列表(0条)

    保存