View的布局详解(三种方法)

View的布局无非就是其在屏幕上的大小与位置,其中UIView有三个重要的布局属性:frame,bounds,center。UIView提供了用来通知系统某个view布局发生变化的方法,也提供了在view布局重新计算后调用的可重写的方法。

1.layoutSubviews()方法

当一个视图“认为”应该重新布局自己的子控件时,它便会自动调用自己的layoutSubviews方法,在该方法中“刷新”子控件的布局。而且这个方法不需要我们手动去调用,而是系统在以下情况自动调用:

  • 直接修改 view 的大小时会触发
  • 调用addSubview会触发子视图的layoutSubviews
  • 用户在 UIScrollView 上滚动(layoutSubviews 会在UIScrollView和它的父view上被调用)
  • 用户旋转设备
  • 更新视图的 constraints 这些方式都会告知系统view的位置需要被重新计算,继而会调用layoutSubviews.当然也可以直接触发layoutSubviews的方法。

2.layouifNeeded()方法

当你“马上”,“立刻”需要刷新布局的时候调用,这时候会立刻调用layoutSubviews()方法,将打了“标记”的视图立刻更新。但是这方法会很消耗性能效率

3.setNeedsLayout()方法

使用setNeedsLayout()方法,不会立刻更新布局,而是在下一个run loop中将带有“标记”的视图更新,此时调用layoutSubviews()方法,这有利于优化性能,并且这个时间间隔并不会长到影响用户体验。

参考:

浅谈UIView的刷新与绘制 - 掘金

setNeedsLayout和layoutIfNeeded看我就懂!_慕课手记

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Router 是 Vue.js 的官方路由管理器,它与 Vue.js 紧密集成,可以让我们轻松地构建单页面应用(SPA)。 在使用 Vue Router 构建单页面应用时,我们通常会使用 `<router-view>` 组件来展示当前路由所对应的组件内容。下面是对 `<router-view>` 组件的使用详解: 1. 定义路由: 在 Vue Router 中,我们需要首先定义路由。可以通过在 `routes` 配置项中定义一个数组来实现,每个路由对象都包含了一个路径和对应的组件。例如: ```javascript import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] ``` 2. 注册路由: 在创建 Vue 实例之前,我们需要将路由配置注册到 Vue 实例中。可以使用 `Vue.use()` 方法来注册 Vue Router 插件。例如: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例: 在注册完插件后,我们可以创建一个路由实例,并将之前定义的路由配置传入。例如: ```javascript const router = new VueRouter({ routes }) ``` 4. 添加路由占位符: 在应用的根组件中,我们需要添加一个 `<router-view>` 组件作为路由占位符。这样,当路由切换时,对应的组件就会渲染在这个占位符中。例如: ```html <template> <div> <router-view></router-view> </div> </template> ``` 注意,`<router-view>` 组件可以放置在任何位置,根据实际需求进行布局。 5. 挂载路由: 最后一步是将路由实例挂载到 Vue 实例上。例如: ```javascript new Vue({ router }).$mount('#app') ``` 至此,我们就完成了 `<router-view>` 组件的使用。当用户访问不同的路由时,对应的组件就会被渲染到 `<router-view>` 中,实现了页面的切换效果。 需要注意的是,`<router-view>` 组件只能用于展示路由对应的组件内容,并不能直接显示其他内容。如果需要在路由切换时显示一些其他元素,可以结合使用 `<router-link>` 组件来实现。 希望以上解答对你有帮助!如有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值