首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material Design —卡片(Cards)

卡片可能包含照片,文字和关于单个主题的链接。 他们可能会展示包含不同尺寸元素的内容,例如带有可变长度标题的照片。 卡片集合是同一个平面上的多个卡片的布局形式。...左:卡片有圆角、能有多个操作、可关闭/重现    右:是tile而不是卡片,无圆角、最多两个操作 ? 左:快速可浏览列表,适合展示无操作的同类内容    右:阻碍了快速浏览,且这些内容不能关闭 ?...但是,它们在卡内的大小和位置取决于图像是主要内容还是用于补充卡片的其他内容。 背景图像 当文字放置在纯色背景时,文字清晰度最高,且文字对比度足够高。 放置在图像背景的文本应该保留文本的易读性。...支持的手势包括: 滑动手势(swipe gesture)可以在每张卡片使用。限制视图内的轻扫手势,使其不会彼此重叠。例如,可滑动的卡片不应该包含可滑动的图像,以便在滑动时只发生一次动作。...UI控件 与主内容内联放置的UI控件滑块)可以修改主内容的视图。 例如,可以选择日期的滑块,评分内容的星星,或选择日期范围的分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置在卡的右上角。

4.3K100
您找到你想要的搜索结果了吗?
是的
没有找到

iOS 9人机界面指南(四):UI元素(下)- 腾讯ISUX

页面控件 4.3.9 选择器 4.3.10 进度视图 4.3.11 刷新控件 4.3.12圆角矩形按钮 4.3.13 分段控件 4.3.14 滑块 4.3.15 步进器 4.3.16 开关按钮 4.3.17...4.3.2 添加联系人按钮 添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。 ? API注释 想要了解如何在代码中定义添加联系人按钮,请参考UIButton....API注释 想要了解如何在代码中定义添加日期时间选择器,请参考UIDatePicker....API注释 想要了解如何在代码中定义信息按钮,可以参考UIButton. iOS包含了两种信息按钮样式:适用于浅色内容的深色按钮,以及适用于深色内容的浅色按钮。...文本框 高度固定,包含圆角 当用户点击它时,自动唤起输入键盘 可以包含系统提供的按钮,书签按钮(Bookmarks) 可以展示多种文字样式(了解更多请参考 UITextView) 使用文本框来获取用户输入的少量信息

13.2K30

H5+CSS3+JS逆向前置——CSS3、基础样式表

HTML的主要元素包括: 元素:包括段落、标题、链接、图像、列表等等。HTML为这些元素提供了特定的标签,、、、、等。...属性:这些是HTML元素中可以包含的额外信息,链接的href属性,图像的src和alt属性等。...其中,元素包含了网页的所有内容,文本、图片、视频、音频、链接等等。 HTML是一种基础且重要的技术,它为创建网页提供了基础结构和框架,使得我们可以添加样式、脚本和内容。...用户界面属性:包括鼠标悬停效果( hover 颜色)、表单控件样式( input 的 type 属性对应的样式)等。...圆角矩形(Rounded Corners):允许您为元素设置圆角矩形样式。 文本阴影(Text Shadow):允许您为文本添加阴影效果。

14010

腾讯开源超实用的UI轮子库,我是轮子搬运工

丰富的 UI 控件 提供丰富常用的 UI 控件,例如 BottomSheet、Tab、圆角 ImageView、下拉刷新等,使用方便灵活,并且支持自定义控件的样式。...QMUIRadiusImageView 提供为图片添加圆角、边框、剪裁到圆形或其他形状等功能。 QMUIRoundButton 对 Button 提供圆角功能,支持以下特性: 指定圆角的大小。...分别指定不同方向的圆角大小。 指定圆角的大小为高度的一半,并跟随高度变化自适应圆角大小。 支持分别指定背景色和边框色,指定颜色时支持使用 color 或 ColorStateList。...提供多个常用的工具方法,获取状态栏高度、判断当前是否全屏等等。...提供多个常用的 View 相关工具方法,如对 View 设置单个方向的 padding、从 ViewStub 中获取一个 View、判断 ListView 是否已经滚动到底部等等。

4.7K30

【愚公系列】2023年09月 WPF控件专题 Border控件详解

WPF控件可以分为两类:原生控件和自定义控件。 原生控件是由Microsoft提供的内置控件Button、TextBox、Label、ComboBox等。...一、Border控件详解 WPF(Windows Presentation Foundation)中的Border控件是一种常用的容器控件,可以用来包含其它UI元素,文本、图像、按钮等。...CornerRadius属性指定了边框的圆角半径。最后,我们设置了Border的Background属性为白色,并在其中放置了一个TextBlock控件,显示文本“Hello, World!”。...2.常用场景 WPF中Border控件常用场景包括: 装饰性边框:Border控件可以为元素提供装饰性边框,使其在视觉更具吸引力和焦点。...文本框:Border控件可以用于创建文本框,而不必编写额外的代码。可以将其属性设置为对文本进行格式化,边框、背景色或边框样式。

50800

Python的GUI编程(一)Label

pass 1、背景自定义 背景,有三部分构成:内容区+填充区+边框  内容区参数有:width,length用于指定区域大小,如果显示前景内容是文本,则以单个字符大小为单位;如果显示的是图像,...单个字符添加下划线,underline = index, index是目标字符串中的字符索引值。                               ...(bitmap/image)是如何在Label显示,缺省为None,当指定image/bitmap时,文本(text)将被覆盖,只显示图像了。  ...left:    图像居左     right:    图像居右     top:    图像居上     bottom:图像居下     center:文字覆盖在图像 bitmap/image:...    显示在Label图像 text:     显示在Label的文本 from Tkinter import * #创建界面窗口 Win=Tk() #只能显示GIF格式的图片 img=

2.1K20

高性能设置圆角,告别离屏渲染

起因 在谈及圆角这个话题之前,我们必须先知道系统的API是怎样去简单方便的设置圆角的。以一个imageView控件来举例。...也就是说,很多时候这个属性对于内部还有子视图的控件是无能为力的。所以很多时候,我们会这么来设置圆角。...讨论造成离屏渲染的原因之前,先说明什么是离屏渲染:离屏渲染指的是在图像在绘制到当前屏幕前,需要先进行一次渲染,之后才绘制到当前屏幕。...UIImageView 添加圆角 一般我们最常见的是为UIImageView添加圆角,首先重要的事情放到前面讲,千万避免通过重写drawRect方法来设置圆角,不恰当的使用这个方法,会导致内存的暴增。...,而其中的属性,使用了runtime的黑魔法去设置,在Category 给一个现有的类添加属性,但是却不能添加实例变量,这似乎成为了 Objective-C的一个明显短板。

91710

iOS从Xib中设置样式

xib进行view的生成,这种方式运行效率是会降低,但现在的手机配置基本可以忽略这点弊端,官方也推荐这种方式 常用技巧 选中View 当你想直接在view中选择自己想要的元素时,但是又碍于一个view叠加的元素太多很难直接选中...为了避免麻烦,还是不用margin约束比较好,如何在添加约束时不使用margin约束呢?...选中控件直接command + d吧,至少比command+c与command+v节省一半时间吧? 连线 想拖线还得手动点双环按钮分屏? 凹凸啦!...,谁说控件A要放在控件B的下侧才能设置到A到B在y轴方向上的距离?...试试看选中A控件, 按住control键同时把A往B的身上拖,直到B发亮再松手. 如果没用过这招, 肯定惊喜.

2.3K20

最新iOS设计规范十|5大拓展程序(Extensions)

除非您的应用将文档存储在单个目录中,否则用户应导航到目录层次结构中的特定目标。考虑提供一种添加新子目录的方法。 不要提供自定义导航栏。您的扩展程序将加载到已经包含导航栏的模式视图中。...考虑人们可能想要共享哪些信息,以及他们如何在活跃对话的背景下与您的应用进行交互。 插入内容以避免裁切。应用程序的内容以带有圆角的消息气泡形式显示,因此请不要将重要信息放在拐角处。...考虑合并图像,单词和短语以为对话添加新的维度。 放眼全球。消息传递是一种通用的通信形式。力求获得具有广泛国际吸引力的贴纸。 使用描述性图像名称或提供替代文本标签。...尽管它们在屏幕不可见,但是图像名称和其他文本标签使VoiceOver可以听得见地描述贴纸,从而使视力障碍者的导航更加轻松。 通过动画增加活力。...操作扩展则是让用户启动针对当前内容的任务,例如添加书签、复制链接、保存图像。 用户在点击页面中的操作按钮,会显示带有共享扩展和操作扩展的活动视图。该活动视图只会显示与当前内容相关的扩展。

3.1K10

Android 实现圆角布局

和尚我最近在处理图片的圆角,不止是四个角全是圆角,还包括单左侧/单右侧/对角线方向的圆角。...这个布局实现方式很简单,大神只提供了默认的四个圆角,这里我添加了一些方法可以动态的设置圆角的位置与弧度,并说明一下和尚我遇到的小问题。...---- Tips: 在设置完角度之后,要添加 invalidate() 刷新 UI,才可以进行动态设置; 自定义的布局样式继承的 FrameLayout,所以设置在需要进行圆角控件外即可,并不影响其内部控件的样式...; 既然 MyRoundLayout 继承的是 FrameLayout,则应遵循 FrameLayout 的特点,内部不能直接设置控件的权重,可在内部添加一层 Layout 布局,在进行权重 weight...,简称弧度 * * @param radius */ public void setTopDiagonal(float radius) { this.topLeftRadius = radius

2.2K21

Android开发之圆角矩形创建工具RoundRect类定义与用法分析

分享给大家供大家参考,具体如下: 用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): RoundRect.java import android.content.Context;...* * @param path 图片路径 * @return output 转换后的圆角矩形图像 */ Bitmap toRoundRect(String path) { //创建位图对象 Bitmap...图片资源ID * @param context 上下文对象 * @return output 转换后的圆角矩形图像 */ Bitmap toRoundRect(Context context, int...= bitmap.getHeight(); System.out.println(w + " " + h); //after zoom return bitmap; } /** * 用于把Bitmap图像转换为圆角图像...paint.setColor(Color.RED); canvas.drawRoundRect(outerRect, cornerRadius, cornerRadius, paint); // 将源图片绘制到这个圆角矩形

1.1K10

使用标签承载内容

(image) 图像存储位置 图像及其宽高 选择正确的图像格式 JPEG GIF PNG 矢量图 figure标签 表格(table) 基本的表格结构 表格的标题 跨行和跨列 长表格 表单(form)...如何收集信息 表单控件(input) 文本框 / 密码框 / 文本域 单选按钮 / 复选按钮 / 下拉列表 提交按钮 / 图像按钮 / 文件上传 组合表单元素 fieldset / legend HTML5...的表单控件 日期 电子邮件 / URL 搜索 音视频(audio / video) 视频格式和播放器 视频托管服务 添加视频的准备工作 video标签和属性 audio标签和属性 其他 文档类型 注释...(border-image) 投影(border-shadow) 圆角(border-radius) 列表、表格和表单 列表的项目符号(list-style) 表格的边框和背景(border-collapse...) 表单控件的外观 表单控件的对齐 浏览器的开发者工具 图像 控制图像的大小(display: inline-block) 对齐图像 背景图像(background / background-image

2.3K20

iOS 渲染原理解析

当放大位图时,可以看见赖以构成整个图像的无数单个方块。只要有足够多的不同色彩的像素,就可以制作出色彩丰富的图象,逼真地表现自然界的景象。缩放和旋转容易失真,同时文件容量较大。...显示器的电子束会从屏幕的左上角开始逐行扫描,屏幕的每个点的图像信息都从帧缓冲器中的位图进行读取,在屏幕对应地显示。扫描的流程如下图所示: [172743167a1c8980?...另外在 iOS 开发过程中,最大量使用的视图控件实际是 UIView 而不是 CALayer,那么他们两者的关系到底如何呢?...部分效果的设置:因为 UIView 只对 CALayer 的部分功能进行了封装,而另一部分圆角、阴影、边框等特效都需要通过调用 layer 属性来设置。...【UIBezierPath】用贝塞尔曲线绘制闭合带圆角的矩形,在上下文中设置只有内部可见,再将不带圆角的 layer 渲染成图片,添加到贝塞尔矩形中。

2.1K50

CALayer 图层概念二、CALayer属性二、方法

: bounds : 用于设置CALayer的宽度和高度,修改这个属性会产生缩放动画. background : 用户设置CALayer的背景色, 修改这个属性会产生背景色的渐变动画. position...,圆角矩形,layer剪裁 设置圆角半径 redView.layer.cornerRadius = 125; 如果控件有两层及以上就需要下面这个属性进行遮盖 redView.layer.masksToBounds...= YES; 已知控件label有两层,imageView,Button,UIView默认就一层,直接设置圆角就可以裁掉,但是各控件加了图片就会变成两层,依然需要masksToBounds属性;...masksToBounds方法告诉layer将位于它之下的layer都遮盖住,这样会使圆角不被遮,但是这样会导致阴影效果没有,可以再添加一个SubLayer,添加阴影。...此处可以和UIView的clipToBounds来比较记忆(clipToBounds为yes会使其的内容包括子视图不能超出边界) 控件截图裁剪的三种方法: 给layer设置圆角半径layer.cornerRadius

1.4K70

快速添加圆角和描边

前言 对于习惯使用Storyboard的人来说,设置圆角、描边是一件比较蛋疼的事,因为苹果没有在xcode的Interface Builder直接提供修改控件圆角,边框设置。...我们来说说如何对某个控件进行圆角、描边处理 初级 对于一个初学者来说,如果要进行某个控件圆角、描边设置,就要从Storyboard关联出属性,然后再对属性进行代码处理。...CGColor; 这样不仅需要Storyboard关联出属性,还要写一堆代码对属性进行设置,不得不说实在麻烦~ 中级 更聪明的做法是使用Storyboard提供的Runtime Attributes为控件添加圆角描边...选中控件,然后在Runtime Attributes框中输入对应的Key与Type与Value,这样程序在运行时就会通过KVC为你的控件属性进行赋值。...(不仅仅是圆角、描边~) 设置圆角、描边的Key为: layer.borderWidth layer.borderColorFromUIColor layer.cornerRadius clipsToBounds

62330

Flutter学习

addChild或removeChild以动态添加或删除View。...在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,而不是继承 某些widget属性需要单个widget(child),而其它一些属性,action,需要一组widgets...height如果不设置 界面显示会有问题,如果要设置,又不能准确的计算出结果,可以使用Expanded BoxDecoration:圆角,需要放在Container里,实现边框、圆角、阴影、形状、渐变、...综上不难看出dynamic 与object 的最大的区别是在静态类型检查。...添加尾随逗号很简单:始终在函数、方法和构造函数的参数列表末尾添加尾随逗号,以便保留您的编码格式。 这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。

2.6K20

iOS 优化界面流畅的技巧

文本渲染 屏幕能看到的所有文本内容控件,包括 UIWebView,在底层都是通过 CoreText 排版、绘制为 Bitmap 显示的。...图像的绘制 图像的绘制通常是指用那些以 CG 开头的方法把图像绘制到画布中,然后从画布创建图片并显示这样一个过程。这个最常见的地方就是 [UIView drawRect:] 里面了。...在 Twitter Demo 中,我为了图省事儿用到了不少 layer 的圆角属性,你可以在低性能的设备(比如 iPad 3)快速滑动一下这个列表,能感受到虽然列表并没有较大的卡顿,但是整体的平均帧数降了下来...异步绘制 我只在显示文本的控件用到了异步绘制的功能,但效果很不错。我参考 ASDK 的原理,实现了一个简单的异步绘制控件。这块代码我单独提取出来,放到了这里:YYAsyncLayer。...(- -太吊了)在显示简单的单张图片时,利用 UIView.layer.contents 就足够了,没必要使用 UIImageView 带来额外的资源消耗,为此我在 CALayer 添加了 setImageWithURL

1.4K10
领券