文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

2-VVI-材料设计之CardView

内容与边距的间隔 app:contentPaddingLeft 内容与左边的间隔 app:contentPaddingTop 内容与顶部的间隔 app:contentPaddingRight...内容与右边的间隔 app:contentPaddingBottom 内容与底部的间隔 app:paddingStart 内容与边距的间隔起始...app:paddingEnd 内容与边距的间隔终止 app:cardUseCompatPadding 设置内边距，在API21及以上版本和之前的版本仍旧具有一样的计算方式...app:cardPreventConrerOverlap 在API20及以下版本中添加内边距，这个属性为了防止内容和边角的重叠 注意：CardView中使用android:background...Padding CardView会自动添加一些额外的padding空间来绘制阴影部分， 这也导致了以V21为界的不同系统上CardView的尺寸大小不同 app:cardUseCompatPadding

1.5K10

CardView的那点事儿

CardView 扩展 FrameLayout 类别并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。CardView 小组件可拥有阴影和圆角。...CardView 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。...card_view:cardCornerRadius 卡片的圆角大小 card_view:contentPadding 卡片内容于边距的间隔 card_view:contentPaddingBottom...V21+的版本和之前的版本仍旧具有一样的计算方式 card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠 一般来说和RecyclerView...} /** * 加了 @TargetApi(Build.VERSION_CODES.LOLLIPOP) * 在API21

1.5K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    CardView 简介和使用

    在使用 CardView 之前，多少应该对它有一定的了解，下面将对其实现做简单的介绍。 自定义属性 CardView 继承自 FrameLayout，并在其基础上添加了圆角和阴影等效果。...设置z轴最大高度值 CardView_cardUseCompatPadding       是否使用CompadPadding 设置内边距，V21+的版本和之前的版本具有一样的计算方式。...             内部边距，子View与CardView的距离 CardView_contentPaddingLeft         内部左侧边距 CardView_contentPaddingTop...          内部顶部边距 CardView_contentPaddingRight        内部右侧边距 CardView_contentPaddingBottom       内部底部边距...但是，elevation属性也是随MD出来的，它只支持 5.0+（也就是API21+）的系统。因此，如果要卡片效果能想兼容低版本系统，那还是应该优先考虑用 CardView。

    1.6K10

    Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

    ； 在主题中将android:statusBarColor属性的值指定成@android:color/transparent； 2.3 创建一个values-v21目录；values-v21...和TextView上都加了一些边距。...其中， CardView的marginTop加了35dp的边距，这是为下面要编写的东西留出空间。 至此水果标题栏和水果内容详情的界面便编写完了。...但android:statusBarCoIor这个属性是从API 21，即Android5.0系统开始才有的，之前的系统无法指定这个属性。...然后在FruitAcuvityTheme中将状态栏的颜色指定成透明色， 由于values-v21目录是只有Android5.0及以上的系统才会去读取的， 因此这么声明是没有问题的。

    2.9K40

    安卓阴影实现

    ，但不是从技术角度实现 下面还有几个 1. elevation（组件属性） 优点：绘制效率高，使用自带的api不用添加多余的drawable文件，并且支持 translationZ 动画方便实现点击的动画效果...；不占位 缺点：低版本不显示，方向颜色不可控，自带的属性设置参数有限； 注意：View要带透明度，否则是没有效果； 2....CardView（组件自带） 优点：CardView是自带阴影的是Materail设计的组件，效率高；不占位 缺点：阴影方向颜色不可控； 注意：CardView模拟的光源在屏幕中心正上方阴影显示角度会有所差异...SCardView 同CardView显示效果，可通过代码调整边角光源调整阴影方向和颜色，但需考虑版本兼容性问题； 5....，假如阴影的宽度为45px，则在ShadowCard内部的45px内进行绘制 float left = shadowLeftHeight + shadowCardPaddingWidth

    71610

    一文彻底搞清楚 Material Design

    为了配合 material desig， android 提供了新的主题、新的配合主题的组件、和自定义阴影和新动画 api 来看看 Android 为了配合 Material Design 都增加了哪些新的控件...Z 属性会扩大 View 的显示区域（主要是控件本身大小+阴影），如果它的大小大于或者等于父视图的大小，那么它的阴影效果就无法显示了，view 并不会因为 z 的属性而缩小自身去显示阴影。...，因为 TextView 的默认海拔是0 ，就被 Cardview 给挡住了，因为 CardView 的默认海拔是 2dp，如果你将 TextView 的海拔设置为 3dp 这个时候 TextView...在Web上，仅通过操纵y轴即可描绘阴影。以下示例显示了海拔为6dp的卡片。 阴影的条件 阴影由轮廓和海拔共同决定。 海拔决定了阴影的大小，轮廓决定了阴影的形状。...但是如果stateListAnimator设置为 null 后，点击的海拔高度动画就没有了，为此你可以在 Button 外套一层 LinearLayout给 LinearLayout 设置 elevation

    6K10

    iOS 仿支付宝银行卡界面(支持Swift和OC)

    在钱包视图中实现添加卡片方法 在钱包视图中实现卡片展示和隐藏回调方法 创建卡片视图ColoredCardView继承于CardView 在CardView中实现点击手势展示隐藏卡片 导入项目使用介绍...创建钱包视图容器WalletView 创建继承UIView的WalletView视图， 通过调用contentInset方法来控制top、left、bottom、right四个方向的边距，代码如下： public...页面为例，代码如下： walletView = WalletView(frame: CGRect(x: 10, y: 0, width: screenw - 20, height: screenh -...在钱包视图中实现卡片展示和隐藏回调方法 在钱包视图中实现卡片展示和隐藏回调方法，在展示状态下，需要隐藏掉添加卡片按钮，禁止继续添加卡片，并且显示卡片详细设置内容和删除按钮。...在CardView中实现点击手势展示隐藏卡片 在Demo中实现在CardView中点击除了删除按钮外任何位置，都可以触发隐藏卡片的功能，这里是在CardView中添加了手势来实现该功能，代码如下： public

    2K20

    Qt Quick Windows 下实现无边框窗口阴影效果

    Qt Quick 中实现一个无边框窗口阴影效果的中心思想是将 Window 容器背景设置为透明的，在 Windows 容器中添加一个填满窗口的容器（如 Page、Rectangle 等），然后将这个容器设置一些边距...，再给这个容器附加一个阴影效果，实现的效果如下： ?...mainLayout // 一个填满窗口的容器，Page、Rectangle 都可以 anchors.fill: parent // 当窗口全屏时，设置边距为...0，则不显示阴影，窗口化时设置边距为 10 就可以看到阴影了 anchors.margins: mainWindow.visibility === Window.Maximized ?...，但是还是有一些缺点的， 当你使用一些 Dialog、Popup 控件时，并设置 modal 为 true 的情况下，Dialog 这类浮层窗口会显示一个黑色背景，此时黑色背景的边缘是以 Window

    2.7K30

    【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

    ; 内边距设置效果 设置内边距效果 : 为 盒子模型 设置 内边距 Padding 后 , 在 盒子内容 与 盒子边框 中间 , 会产生一个内边距 , 与此同时 盒子模型 的 尺寸 会变大 ; 2、盒子模型内边距复合写法...下、左 外边距 */ margin: 20px 30px 40px 50px; 使用 margin: auto; , 将四个边距都设置为 auto , 此时左右边距自动就是 auto , 也可以实现水平居中...的 左外边距 和 右外边距 必须 设置为 auto 值 ; 如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中, 必须设置宽度 ; auto 的含义是 指定的 边距方向 自动充满...和 上边距 而设置图片的位置 ; margin-left 设置图片的 左外边距 ; margin-top 设置图片的 上外边距 ; /* 通过修改 盒子模型 外边距 修改图片显示位置 */ margin-left...两个边距之和 = margin-bottom + margin-top , 而是 这两个边距 中的较大的值 , 即 max (margin-bottom , margin-top) , 该现象称为 外边距

    1.1K10

    CSS知识框架（一）

    这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情 >> CSS知识框架 标签模式 块级元素 特点： 总是从新行开始 高度、行高、外边距，内边距都可以控制 宽度默认是容器的100%...可以容纳内联元素和其他块元素　 常见： ~、、、、、 行内元素 特点： 和相邻行内元素在一行上，但是之间会有缝隙 高、宽无效，但水平方向的padding...: 左上角 右上角 右下角 左下角;边距 内边距： 是指 边框与内容之间的距离 padding 外边距：margin盒子居中 用法：margin: 0 auto;清楚内外边距 用法：margin:...: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode盒子阴影 box-shadow...:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；CSS样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中行内式 标签的style属性来设置元素的样式外部样式表

    79430

    前端课程——盒子模型

    相关概念 内容区（content） 用于显示文本和图像 内边距（padding） 内容区至边框的边距 边框（border） 内容区的边界 外边距（margin） 两个元素的边距之间的距离...区域 1-4 为角区域。 每一个都用一次来形成最终边界图像的角点。 区域 5-8 边区域。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域。...该模型设置元素在HTML页面中所占区域为内容区+内边距+边框的宽度+外边距。 ●border-box: 称为怪异盒子模型，最早是由微软提出的。...该模型设置元素在HTML页面中所占区域为盒子的大小+外边距。. ? 外边距常见的问题 外边距重叠 外边距重叠的问题只出现在上外边距和下外边距中 左外边距和右外边距之间不存在外边距重叠 ?...解决方案: 简单的解决方案有两种: 为上一个元素设置下外边距为300px 为下一个元素设置上外边距为300px 网上的方法 可以在两个元素中间再添加一个新的元素.但不推荐.因为 为了解决间题增加无用的元素和内容

    1.6K10

    （四）：元素盒子模型；详细分析边框属性、盒子外边距

    盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。... div的边框宽50px,实线,红色，内边距为20px，外边距10px 在设置盒子样式前提，需要明白，有些行内标签样式（如...：span标签）虽然可以设置内外边距，但是在页面中没有办法显示 边框相关属性 宽度(border-width): 可以使用thin,medium,thick等文本值，也可以使用除百分比和负数之外的任何绝对值...hOffset:该属性值控制阴影在水平方向的偏移。 vOffset:该属性值控制阴影在垂直方向的偏移 blurLength:该属性值控制阴影的模糊程度。...取边距较大的值。

    19910
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券