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

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

文章索引 4.3 控件 4.3.1 活动指示器 4.3.2 添加联系人按钮 4.3.3 日期时间选择器 4.3.4 详情展开按钮 4.3.5 信息按钮 4.3.6 标签 4.3.7 网络活动指示器 4.3.8...用活动指示器来让用户知道进程仍在进行。有些时候,告诉用户进程没有停止比告诉他们何时完成更加重要。 设计一个与应用风格协调活动指示器。可以的话,让活动指示器尺寸和颜色与它所在背景协调。...网络活动指示器: 出现在状态栏,当网络活动正在进行时它会旋转,在活动停止时它则消失 不支持用户交互行为 当你app正在链接网络,而这个连接过程将会持续好几秒时候,你可以通过网络活动指示器来给用户以反馈...合适的话,为内容区域内系统按钮描边或者加入背景。大多数情况下,你可以通过定义一个清晰按钮名称、选择一个不一样标题颜色或提供上下文情景提示来让用户知道这是一个按钮而非普通文本。...但在某些特定内容区域内,为按钮描边或者添加背景颜色,让用户迅速地把注意力放到按钮上,也是必要。Value 2布局,文本和副标题中间垂直间距会让用户专注于副标题第一个单词。

13.2K30

Material Design整理(八)——TabLayout

简介 一般我们app主界面都是界面下方或者上方有指示器,结合ViewPager或者Fragment来实现。...而指示器可以是RadioGroup或者是其他简单View(TextView),但复杂业务逻辑需要我们自己控制,还有过度动画也需要自己实现。...如今,Android也有自带这种指示器控件TabLayout。TabLayout存在于android design库,它提供了一个水平布局来展示Tabs。...其中text就是指示器文字提示。 当然了,不仅可以在不居中直接添加TabItem子标签,这样可变性不好,我们可以在代码动态添加,节后会介绍到!...有以下属性支持修改: tabIndicatorColor:指示器颜色 tabBackground:tablayout背景颜色 tabIndicatorHeight:指示器高度 tabGravity:指示器位置

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

TabLayout用法,android顶部导航栏,android底部导航栏

TabLayout是android.support.design里一个控件,使用它可以很方便做出顶部导航和底部导航。类似于这样,能设置选中时字体颜色和选中时图片。 ? ?...首先我们引入compile 'com.android.support:design:23.1.1' 它用法是: 第一种比较简单,就是文本和一个指示器。...布局文件是 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width...app:tabIndicatorColor是设置指示器背景颜色,app:tabIndicatorHeight设置指示器高度,app:tabSelectedTextColor是选中时文本颜色,app...// tabLayout.setSelectedTabIndicatorColor(Color.WHITE);//设置选中时指示器颜色 // tabLayout.setTabMode

4K10

TabLayout+ViewPager实现切页示例代码

'com.android.support:design:23.3.0' 主布局文件编写: 顶部或者底部显示,只要更改ViewPager和TabLayout排列顺序即可 <?...-- app:tabIndicatorColor="" 指示器颜色 app:tabIndicatorHeight="" 指示器高度,设置为0就是没有指示器 app:tabTextColor="" Tab...文本默认颜色 app:tabSelectedTextColor="" Tab文本被选中后颜色 app:tabTextAppearance="" 为Tab文本设置样式,一般是需要为Tab加图标时使用...菜单栏每项布局文件设计: 一个图片显示和一个文字显示,定义为垂直布局,其中android:layout_gravity=”center”是把控件居中,这里不写,在菜单栏显示时可能会出现错位 <?...主布局文件更改: 在主布局文件<android.support.design.widget.TabLayout 更改android:layout_height=”70dp”,表示其菜单栏高度改变。

1.7K40

iPhone X 适配指南 (官方翻译版)

大多数使用标准系统提供UI元素(导航栏,表格和集合)应用程序会自动适应设备新外形。背景材料延伸到显示器边缘,并且UI元件被适当地插入和定位。...确保背景延伸到显示器边缘,并且垂直可滚动布局(如表格和集合)一直延续到底部。 插入必要内容以防止剪辑。...请勿尝试隐藏设备圆角,传感器外壳或通过在屏幕顶部和底部放置黑色条来访问主屏幕指示器。不要使用像括号,边框,形状或教学文字等视觉装饰,也要特别注意这些区域。 允许自动隐藏指示灯,以便轻松访问主屏幕。...这种行为应该只能用于被动观看体验,播放视频或照片幻灯片。 请参阅适应性和布局颜色 iPhone X上显示器支持P3色彩空间,可以产生比sRGB更丰富,更饱和颜色。...使用广泛颜色来增强视觉体验。使用宽颜色照片和视频更加逼真,使用宽色视觉数据和状态指示器更有影响力。请参阅颜色管理。

2.4K50

企鹅电竞weex实践之UI篇

2、避免在image标签上使用v-for,否则会导致安卓上图片渲染异常(slider图片)。 4、透明度 以下是涉及到颜色相关属性对透明度支持度列表。...表现不一致,ios、android是以代码dom顺序来依次添加,和z-index无关,后面加载视图会覆盖前面的视图。...这种布局方式在css要做到很容易,而在weex利用提供flex布局确很难实现,最后解决方案是通过js动态设置文字与标签父级宽度,从而控制文字溢出。...2、自定义slider组件 weex本身提供了slider组件,但轮播图指示器(indicator)只能修改颜色与位置,大小却无法更改,所以需要自定义slider组件。...但是当中遇到一个诡异问题:如果“div.indicator-item”内容为空的话,H5指示器并不会随着图片切换而变化(样式不生效),div需要添加内容才行。

98120

Android基础_2 Activity线性布局表格布局

在activity布局,线性布局表格布局是最简单,这次分别从线性布局表格布局以及线性布局表格混合布局做了实验,实验只需要编写 相应xml代码,java代码不需要更改,因为我们这里只是练习...-- 线性布局 android:layout_weight属性是指不同控件在activity占有体积大小比例。.../> 表格布局:   表格布局有点类似表单意思,可以在activity建立多行,每一行又可以设置为多列,所以看起来横竖条理比较清晰,因此叫做表格布局。   ...> 线性布局表格布局混合:   混合布局原理类似,只是大layout嵌入小layout,且小layout又可以嵌入不同layout。   ...这次实验将上面的2个实验混合起来显示,即总布局为垂直方向上线性布局,上面那个布局内部又为垂直方向布局,下面那个布局为也是一个线性布局,不过里面嵌入了一个表格布局,所以总共有4个布局

67320

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

工具栏和导航栏图标的颜色可以通过tintColor属性来设定。...表格行以分组形式展示,可以有页眉和页脚。分组表格视图中至少含有一组列表,而每一组至少包含一项内容。与平铺型不同,分组型表格没有索引。 ? 平铺型(Plain)。...平铺型表格可被分为若干带标签段落,表格右侧可能会出现垂直表格索引。每行开头可以有页眉,尾部可以有页脚(也可以没有)。 ? 在这两种样式,当用户选中某一行时,该行会短暂地高亮。...iOS定义了在平铺型表格和分组型表格中最常用到四种单元格布局样式。每种单元格样式都有最适合展示信息类型。 重要 从编程角度来说,这些样式应用于单元格,用以控制表格里每一列绘制方式。...Value 2布局,文本和副标题中间垂直间距会让用户专注于副标题第一 个单词。 ? 重要 以上四种单元格样式均支持添加表格视图元素,勾选或展开标志。

10.1K51

ViewPager轻松完成TabHost效果

首先来学习一下官方自带,在android.support.v4包两个控件PagerTabStrip与PagerTitleStrip。...关于标题及这条线颜色,和整个标识View背景,都可以在代码里设置。 还有一个区别就是,PagerTabStrip可以点击切换View,而PagerTitleStrip不能点击。...然后几个页面布局文件不变,既然需要在顶部显示Tab和标题,那就需要我们通过适配器来设置,修改后ViewPagerAdapter类代码如下: package com.jinyu.cqkxzsxy.android.advancedviewsample.adapter...new ViewPagerAdapter(mPageLists, mTitleLists); mViewPager.setAdapter(mAdapter); // 更改下划线颜色...关于PagerTitleStrip使用,和PagerTabStrip基本差不多,只是布局文件ViewPager包含控件不同而已,这里就不再详细说明了,建议自己动手练习,如果有问题,欢迎进Android

1.5K70

自定义View实现字母导航控件

今天分享一个以前实现通讯录字母导航控件,下面自定义一个类似通讯录字母导航 View,可以知道需要自定义几个要素,绘制字母指示器、绘制文字、触摸监听、坐标计算等,自定义完成之后能够达到功能如下:...完成列表数据与字母之间相互联动; 支持布局文件属性配置; 在布局文件能够配置相关属性,字母颜色、字母字体大小、字母指示器颜色等属性。...--指示器颜色--> </resources...,绘制过程要保证文字在指示器中心位置,参考如下: image.png 绘制 自定义 View 绘制操作都是在 onDraw() 方法中进行,这里主要使用到圆绘制以及文字绘制,具体就是 drawCircle...数据组装 字母导航基本思路是将某个需要与字母匹配字段转换为对应字母,然后按照该字段对数据进行排序,最终使得通过某个数据字段首字母就可以批匹配到相同首字母数据了,这里将汉字转化为拼音使用是 pinyin4j

44110

Android开发基础系列】Layout布局专题

1 布局介绍 1.1 ViewGroup介绍         在 Android 中视图组是集合若干个控件在一起元素,ViewGroup 有两种用法,一种是像普通控件一样使用(网页视图、旋转按钮、...在 Android 布局通常有以下几种不同情况:         FrameLayout(框架布局):系统默认在屏幕上就有空白区显示它;         LinearLayout(线性布局):让所有的子视图都成为单一方向...布局内容一般通过布局文件控制即可,在控制布局android:layout_width 和 android:layout_height 等表示 尺寸属性,除了使用实际尺寸值外,还有两个常用选项...以TextView和ImageView控件为例,设置为wrap_content将完整显示其内部文本和图像。布局元素将根据内容更改大小。...相对布局 执行效果 1.2.5 TableLayout表格布局 表格布局 1.2.6 TabLayout标签布局     TabLayout属性说明

22620

AndroidX TabLayout使用、扩展及解析All In One

要显示选项卡填充是通过TabLayout.Tab实例完成。可以通过创建标签 newTab()。在此处,您可以分别通过setText(int) 和更改选项卡标签或图标setIcon(int)。...要显示选项卡,需要通过一种addTab(Tab)方法将其添加到布局。...2.2 xml配置tab 还可以通过使用将项目添加到布局TabLayout TabItem。...这种方式只能事先确定有几个Tab时候用到,当这个Tab个数需要动态创建时候不能使用此方法。 另外一种方式通过代码动态设置布局布局选中和未选中态更新采用监听器动态修改方式。...,TabLayout简单运用和若干问题解决。 这篇中介绍了怎么加分割线,设置原有字体大小,自定义标签等。 在源码可以看到再newTab,customView创建。

7.6K71

终版 API 正式到来 | Android 12 Beta 3 发布

我们将继续对滚屏截图进行迭代,在 Beta 4 ,您将看到更多默认支持此功能场景,包括对 ListView 支持。我们也在努力为更多内容 (网页内容) 提供支持。...通过 AppSearch,应用可以对结构化数据进行索引,并通过内置全文搜索功能进行搜索,还可以使用高效索引和检索、多语言支持和相关性排序等原生功能。...AppSearch 有两种使用方式: 一种是通过 AppSearch Jetpack 库 提供本地索引供您应用使用,且向前兼容;另一种则是针对整个系统进行维护中央索引,支持 Android 12...WindowInsets 隐私指示器 API - 在 Beta 2 ,我们在状态栏里增加了隐私指示器,显示应用何时使用设备摄像头或麦克风。...Android 12 游戏支持 - 通过 游戏模式 (Game Mode) API,您可以在玩家为游戏选择不同性能配置时做出反应: 比如在漫长通勤过程节省电池消耗,或者通过性能模式获得最高帧率

55040

Android 样式系统 | 主题背景属性

Android 样式系统系列前几篇文章,我们介绍了主题背景与样式区别,以及为什么说通过主题背景和公共主题背景属性来分解您要实现内容是一个不错主意,请点击链接回顾: Android 样式系统...| 主题背景和样式 Android 样式系统 | 常见主题背景属性 这会让我们通过创建更少布局或样式,以隔离主题背景修改。...合格 Colors 文件 您可以通过在不同配置添加不同值来改变颜色 (例如,在 res/values/colors.xml 中和在 res/values-night/colors.xml 备选值里均定义...由于主题背景可以被覆盖或者改变,因此这间接表示: 您不需要创建其他布局或样式就可以更改某些颜色——您可以在相同布局中使用不同主题背景。 始终使用? 在某些情况下,您或许不想按照主题背景更改颜色。...它并没有定义一个新颜色资源方式来手动为您 (每一个配置文件) primary 颜色设置 alpha 值,而是通过改变当前主题背景 colorPrimary 方式。

1.3K20

Android界面运用ConvenientBanner实现轮播功能

前言在Android开发,实现图片轮播(通常称为轮播图或幻灯片)通常不会直接使用一个名为ConvenientBanner特定库(除非这是一个自定义库或特定于某个项目的组件)。...主布局文件中加入在安卓view布局添加插件,也就是引入ConvenientBanner,定义卡片轮播位置 三:MainActivity设置图片轮播使用第三方库ConvenientBanner在Android应用实现图片轮播(banner)一个示例。...在onCreate方法,首先设置了布局,然后找到ConvenientBanner控件。接着,通过循环将本地图片资源ID添加到localImages列表。...此外,还设置了轮播图一些属性,指示器可见性、自动翻页时间间隔、翻页指示器图片以及指示器对齐方式等。最终,这段代码将实现一个带有本地图片资源、自动翻页以及指示器图片轮播效果。

4810
领券