首页
学习
活动
专区
圈层
工具
发布

《Motion Design for iOS》(十五)

比如说,iOS app中的状态栏是一个长且瘦的视图,处于屏幕的顶端,并且状态栏目中的每个物体(时间、电池指示器、信号强度指示器等等)都是状态栏视图中的其它视图。...这些是为某些功能或特性特定的特殊的UIView对象。包括作为界面按钮的UIButton、用来显示图片的UIImageView、显示文本的UILabel和显示列表的UITableView。...视图,用来包含UITableView中一行的元素 UILabel中的帖子标题 评论数量UIButton,由一个评论气泡图和评论的数量组成 显示帖子URL的UILable UILabel中显示帖子的点值和子板...如果你不熟悉iOS用户界面开发,看看一些你喜欢的app,看能不能找出界面中所有的视图,以此作为分解你自己设计的练习,这样你就可以学习在代码中构建它们。...像你想象的一样,让大量的视图在屏幕上移动确实是一个挑战,尤其是在一个小的,低功率的设备上。 这就是为什么苹果公司开发了Core Animation。

1.3K40

iOS开发·适配iPhone X相关的宏和方法

过了好久,今天终于有时间总结一下适配iPhone X相关的坑,总的来说有两类坑,一个是导航栏+状态栏的高度发生了变化,一个是一些没有实现实现-tableView: viewForHeaderInSection...灵活返回状态栏+导航栏的高度 需求:灵活得到导航栏+状态栏的高度,作为一个子视图Y轴的起点。...适配iPhone X的其他问题 适配iPhone X和Xcode 9的过程中,除了与导航栏相关的问题,还有一个问题经常出现,就是UITableView相关的问题。下面两个办法可以解决多数错位的问题。...这样就不会在iPhone X的底部虚拟home有任何控件干扰了。...这时候,不需要强调必须把子视图放在safeArea之内,原来的老代码也就不用改。

1.7K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    android 设置标题栏背景颜色_状态栏菜单栏都在哪

    大家好,又见面了,我是你们的朋友全栈君。...下面是同一个activity切换不同fragment时,状态栏文字颜色跟着变化的效果图: 下图是同一个Activity向上滚动时,标题栏和状态栏文字颜色根据变化的效果: 1....布局的根节点处加上android:fitsSystemWindows=”true”属性就可以了,要不布局会跑到状态栏和导航栏下面,与导航栏和状态栏重叠,这当然不是我们希望的。...而对于第一个首页和第四个我的fragment,则需要布局的图片填充到状态栏底下,而标题栏要位于状态栏下方,这其实只需要一种取巧实现,一般手机状态栏高度都是在25dp左右,当然在代码中动态获取状态栏高度,...感兴趣的小伙伴可以参下:android沉浸式状态栏、fitsSystemWindows、标题栏折叠 下面我们说说怎么在界面滑动时,修改状态栏和标题栏文字颜色。

    3.3K10

    uni-app前端H5页面底部内容被tabbar遮挡的问题解决

    使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar)遮挡,小程序端可以正常显示。 ?...这样的写法编译到 h5 后,这个菜单会和 tabbar 重叠,位于屏幕底部。...window-bottom); } 这样只会在 H5 端给 .content 元素增加一个 tabbar 的高度 的下边距, uni-app 默认给 tabbar 的高度是50px 。...如果 50px 的高度还不够,可以使用下面的方法,在 tabbar 高度的基础上再增加 20px : .content{   padding-bottom: calc(var(--window-bottom...由于在 H5 端,不存在原生导航栏和 tabbar,也是前端 div 模拟。如果设置了一个固定位置的居底 view,在小程序和App端是在 tabbar 上方,但在 H5 端会与 tabbar 重叠。

    16.6K20

    处理视觉冲突 | 手势导航 (二)

    我们甚至能看到在 StackOverflow 上有个一直热门的问题就是关于这个的。 Insets 区域负责描述屏幕的哪些部分会与系统 UI 相交 (intersect),例如导航或状态栏。...自 API 1 以来,它们就以各种形式存在着,并且每当系统 UI 重叠显示在您的应用上方时,这个方法就会被调用。常见的例子是下拉状态栏和导航栏,或者弹出屏幕软键盘 (IME)。...FAB,在应用被迭代为全屏应用前它看起来是这个样子: 在迭代为全面屏应用后,为了取得更加沉浸式的体验,我们将日程表控件延展进了导航栏的区域。...注意,使用可点击区域里的数值进行布局时,依然可能导致自己的控件与系统 UI 在视觉上重叠,这一点与系统窗口区域 insets 不同,使用后者的值对自己的控件进行位移后能确保不会与系统/导航栏发生视觉重叠...处理边衬区冲突 希望您现在对不同类型的 insets 区域有了更深的了解,下面我们来看看您需要如何在应用中实际使用它们。

    3.9K30

    iOS状态栏使用总结

    :显示时间、电池等信息 导航栏:显示app页面标题,返回按钮等 iOS7之前:状态栏与导航栏是分开的; iOS7之后:状态栏与导航栏合在一起;导航部分总高度(64)= 状态栏高度(20) +导航栏内容高度...分页控制:在视图控制器里通过prefersStatusBarHidden方法设置。...,代码的位置很重要;在AppDelegate中写入可以设置整个App页面的状态栏样式; 如果需要单独设置其中一个页面隐藏状态栏,需要在进入页面时设置隐藏,退出页面时设置显示,以保证不影响其他页面的状态栏样式...此时全局设置的操作都是无效的,需要分页设置才能修改其样式,即:在每个视图控制器或者控制器基类中使用如下代码: - (UIStatusBarStyle)preferredStatusBarStyle {...//return NO; //设置状态栏显示 } 但是,这里存在一个问题:如果当前视图控制器是UINavigationController的子视图控制器,preferredStatusBarStyle

    2.7K30

    Android P 凹口屏支持,打造全面屏体验

    默认情况下,如果开发者在竖屏模式下未对状态栏设定任何特殊标志位,状态栏会根据屏幕缺口情况自行调整高度 (缺口高度 ≤ 状态栏高度),而应用内容则会显示在状态栏以下区域;在横屏和全屏模式下,系统会在应用窗口四周保留黑边...灵活利用缺口区域 通过在缺口区域显示应用内容,尤其是视频、图片、地图或者游戏一类的内容,开发者能够显著提升应用沉浸度,为用户打造真正的全面屏体验。 ?...在默认情况下,只有当缺口完全包含在状态栏内时,系统才会允许应用延伸至缺口区域,否则窗口不会与缺口重叠。...如果您希望利用到整个显示区域,而且不介意缺口位置无法显示应用内容,SHORT_EDGES 模式是个不错的选择,在该模式下,系统始终允许应用窗口延伸至缺口区域。...如果您的应用无法适应长屏幕的纵横比,您可以通过设置应用的最大支持纵横比,要求系统用黑色填充应用边缘的显示空间。 希望以上内容能对您有所帮助,让您不惧 "刘海",只为更好体验!

    1.9K20

    CollapsingToolbarLayout使用

    关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar的标题;statusBarScrim顶部视图折叠状态下,状态栏的遮罩色。通常这样设置:app:statusBarScrim="?...addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);(支持API19及以上版本,位于setContentView语句前面)一起使用,使顶部视图展开时图片能够延伸到状态栏位置显示...,如效果图中所示;contentScrim内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色;通常这样设置:app:contentScrim="?...(不透明度),在0.0 ~ 1.0之间,默认值为0.5。

    3.2K60

    沉浸式管理:让你的APP更优雅

    详细介绍 解决状态栏和布局顶部重合 上面已经说了,沉浸式原理就是使整个布局延伸到状态栏和导航栏,既然这样必然导致一个问题,就是状态栏和布局顶部重叠,直接看图 ?...特性总结 ImmersionBar除了这些特性之外,还有其他特性哦,这里就不一一指出了,大家参考高级用法的注释,可以去实现看看哦,下面就来分析源码吧 源码分析 本库采用类似建造者模式来完成...实现沉浸式是分为两块,一块是android5.0以上,一块是android4.4,这两块实现原理完全不一样,在讲解原理之前先看几个概念,下面需要用到 View.SYSTEM_UI_FLAG_VISIBLE...现在是2.x.x版本,在1.x.x版本的时候,4.4中实现沉浸式是引用大家非常熟悉的一个库SystemBarTint(不推荐使用了,很久没人维护了)来实现的,但是后来发现一个严重的问题,对于有导航栏的手机...既然出现这样的问题,就想着怎么去解决吧!就这样,我乖乖去看看SystemBarTint的源代码,哦!

    2.3K30

    Android 15新特性,强制edge-to-edge全面屏体验

    照片墙功能其实非常简单,使用RecyclerView就能轻松写出来,这里我就不把照片墙的实现源码帖出来了,因为这部分和我们今天要介绍的内容无关,想对源码进行参考的朋友直接访问下面的GitHub链接即可。...可以看到,导航栏变成了一种半透明的效果,不透明度默认是80%。...同时被边缘化的还有一些与状态栏、导航栏颜色设置相关的API,这些API由于和edge-to-edge全面屏体验是相冲突的,有些是现在就已经不能用了,有些是已经不再推荐使用,反正大家看完这篇文章之后尽量就别再使用下面这些...可以看到,这次的效果就没有那么理想了。聊天内容进入了状态栏区域,导致部分文字内容和状态栏重叠不易阅读,输入框和发送按钮则进入了导航栏区域,导致输入框和按钮操作可能会受到影响。...那么由于我们不希望聊天内容进入状态栏区域,因此这里调用了WindowInsetsCompat.Type.statusBars()来获取状态栏的Insets,比如说这里获取到状态栏的高度是50,那么我们通过对

    3.4K11

    六天完成一个简单iOS App - 第六天

    cell的高度计算 评论界面的cell使用的是UITableViewAutomaticDimension自动计算高度,这样cell在添加约束的时候需要额外小心,先来看一下评论cell的xib 评论界面...MJRefresh提供了自动判断的方法 /** 自动根据有无数据来显示和隐藏(有数据就显示,没有数据隐藏。...keywindow上,实质上是判断scrollView和keywindow有没有重叠的地方,而判断他们有没有重叠的前提是他们在同一个坐标系中,即在同一个父控件中。...tabbar上的其他控制器view,判断view跟window有没有重叠排除的是精华模块中其他子控制器。...文中如果有不对的地方欢迎指出。我是xx_cc,一只长大很久但还没有二够的家伙。

    1.8K50

    iOS 知识小集(Status Bar变换)

    背景 iOS 中经常会有需要在某个界面改变状态栏颜色或者某个界面隐藏状态栏的需求。而改变状态栏颜色和控制状态栏显示和隐藏的API,在iOS 的不同版本中也发生了很多变化。...iOS 7以前 在iOS 7之前,状态栏是不占视图位置的。每个控制器中的根view都是从屏幕的Y轴20px处开始显示的。...iOS 7以前状态栏设置 从API来看,那时候也是支持在代码里修改状态栏的样式以及显示和隐藏的。只是因为状态栏对整个APP的影响不大,所以一般在plist里设置好后,用不着再去修改了。 ?...plist设置 然后在视图控制器中,重写如下三个方法即可: ?...情形二 状态栏的样式、是否显示实际上是由顶层window的当前视图控制器决定的。

    1.8K21

    Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(一)

    项目名称 在Mac OSX系统中,屏幕的右上角就是我们说的状态栏(NSStatusBar),一直是常驻应用的必争之地。...项目运行结果 这时你点击状态栏上的图标,它没有任何反应,因为我们还没有给它添加事件响应的方法。我们希望点击它能够弹出一个视图,显示它的内容或者功能,下面我们就来接着实现它。...NSPopover 提供了在屏幕内容视图上显示额外信息内容的一种方式(其实这个类似于在iPad开发中是常见的UIPopoverPresentationController),它的定位相对与现有内容。...is nil.这个错误信息,是因为我们没有为popover设置一个可以显示的内容视图控制器,下面我们来创建一个NSViewController来管理popover的内容视图: 1.5 添加SBPopViewController...设置contentViewController 现在再次运行工程,如果没有错误,我们就可以看到大致类似下面的这样界面了,这样我们就实现了可以在系统状态栏中添加应用的常驻标志,点击它,并可以弹出一个内容展示窗口了

    2.6K20

    全屏、沉浸式、fitSystemWindow使用及原理分析:全方位控制“沉浸式”的实现

    :是合成的目标Layer,不参与合成 从上表可以看出,虽然只展示了一个Activity,但是同时会有StatusBar、NavigationBar、XXXXActivity可以看出Activity是在状态栏与导航栏下面的...先看下关键点1跟2 ,这里是根据SystemUI的配置决定是否显示状态栏背景颜色,如果状态栏都不显示,那就没必要显示背景色了,其次,如果状态栏显示,但背景是透明色,也没必要添加背景颜色,即不满足(color...,那么用户的UI视图就不会被覆盖。...不过,如果状态栏被设置为透明,用户就会看到状态栏下方有一片空白,这种体验肯定不好。这种情况下,往往希望内容能够延伸到状体栏下方,因此,就需要把空白的也留给内容视图。...:fitsSystemWindows属性是系统添加状态栏padding的关键,为什么这样呢?

    6.6K40

    HarmonyOS NEXT实战:窗口沉浸式效果

    ,不希望用户被无关元素干扰。...在移动端应用中,全屏窗口元素包括状态栏、应用界面和导航栏(如下图),沉浸式页面开发常通过将应用页面延伸到状态栏和导航栏的方式,来达到以下目的:使页面和避让区域的色调统一,为用户提供更好的视觉体验。...实现沉浸式效果的两种方案方案一:设置窗口全屏模式方案二:扩展组件安全区域推荐使用方案一,好处是可以针对整个应用(所有页面)实现沉浸式效果。...从API version 14开始,该接口在2in1设备或平板设备的自由多窗模式(可点击设备控制中心中的自由多窗按钮开启)下调用不生效。...沉浸式布局生效时,布局不避让状态栏与底部导航区域,组件可能产生与其重叠的情况。非沉浸式布局生效时,布局避让状态栏与底部导航区域,组件不会与其重叠。

    26110

    iOS状态栏设置

    状态栏配置 iOS状态栏的设置有两种方式 这两种方式是根据UIViewControllerBasedStatusBarAppearance也就是View controller-based status...在NavigationController中,那么直接在ViewController设置是不生效的,只能在NavigationController中设置 所以如果你用的Storyboard中配置的NavigationController...另辟蹊径 创建一个UIView 设置该UIView的frame.size 和statusBar大小一样 设置该UIView的frame.origin 为{0,-20} 设置该UIView的背景色为你希望的...statusBar的颜色 在navigationBar上addSubView该UIView即可 UINavigationBar设置 上面说了状态栏 这里顺便把UINavigationBar也说了 我的配置...//设置背景色(不透明时没用,因为barTintColor在backgroundColor的上一层) appear.backgroundColor = UIColor(red: 52/255, green

    3.6K11

    实现边到边的体验 | 让您的软键盘动起来 (一)

    简单回顾一下,实现 "边到边" 会让您的应用渲染在系统状态栏的后面,如上图所示。 引用去年我自己的话: 实现从边到边的全面屏体验后,系统栏会覆盖在应用内容前方。...应用本身需要开始负责处理那些跟应用重叠的系统 UI 的部分。 正如我们前面提到的,两个最直观的例子是状态栏和导航栏。...,视窗希望在极端的情况下该如何布局内容。...(view) { v, insets -> v.updatePadding(bottom = insets.systemWindowInsets.bottom) // 返回边衬区,这样它们才能够继续在视图树中继续传递下去...您会看到如下两个应用: 两个应用,左边的使用的是深色状态栏背景,右边的使用的是浅色背景 左边的应用使用的是一个深色的状态栏背景,而它的内容用的是浅色,比如时间和图标。

    1.2K20

    IOS学习——iphone X的适配

    iPhone X的变化和特点都有所介绍,大家可以参考一下,下面我主要列举一下跟界面相关的新特性,jut8大家也可以参考下面的一些博客的分析链接: 导航栏变化,大号字体的变化,iOS 11之前的导航栏高度是...64px,其中状态栏的高度是20px,iOS 11中状态栏的盖度是44px。...ExtendedLayoutIncludesOpaqueBars参数的含义是不透明的导航栏条下是否可以扩展,默认是NO,如果设为YES,则表示可以扩展,即可能会受到导航栏的影响,我们知道在iOS 11中导航栏的变化非常大...竟然过期了,在IOS 11下 APPLE推荐使用UIScrollView的contentInsetAdjustmentBehavior属性进行设置自动计算滚动视图的内容边距。 ...,加上导航栏的高度的变化和safeArea的概念的提出,使得UITableview在iOS 11的布局上会出现一些偏差,因为涉及到项目信息,所以就不放图了。

    2K60

    View编程指南(二)

    涉及Windows的任务 对于许多应用程序,应用程序与window交互的唯一时间是在启动时创建windws时。...例如,如果您的应用程序支持在外部显示器上显示内容,则应在创建相应window之前等待显示器连接。 无论您的应用程序是启动到前台还是后台,您都应始终在启动时创建应用程序的主window。...通常用作roo tview的一些标准系统view包括滚动view,表view和图像view。 在配置window的rootview时,您需要负责在window内设置其初始大小和位置。...对于不包含状态栏或显示半透明状态栏的应用程序,请将view大小设置为与window大小相匹配。对于显示不透明状态栏的应用程序,请将您的view放置在状态栏下方并相应地缩小其大小。...例如,当您显示或隐藏状态栏或显示警报视图时,系统会自动创建所需的window来显示这些项目。

    1.3K10

    关于 Android 中的各种 Bar 和“透明状态栏”的一些知识

    这个时候就是充当一个 Title 的作用,这也就是 TitleBar。它的样子是这样的 ? titlebar.png 上面显示MyStudyDemo 的一栏就是 TitleBar 了。...在国内将这种状态栏变色叫做沉浸式状态栏,其实这种叫法是错误的,但是时间久了,大家都这么叫了,就不追究了,就把这种状态栏变色叫做沉浸式状态栏了(这也是由国内互联网发展太过迅速,忽略了很多细节点,相关方面的人才缺乏...可以知道在官方是根本没有 沉浸式状态栏 这种说法的。只有 沉浸模式 就是其实就是出于全屏状态。所谓的 ”沉浸式状态栏“,类似于下面图的样子: ?...,状态栏就会下来,我们的 UI 布局就会跑到状态栏下面,和没有设置的时候效果是一样的。...(这样我们的 UI 布局是没有被重新 layout 的) ?

    3.9K10
    领券