V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
iamjjh
V2EX  ›  iDev

今天看了一个 IOS 的应用,发现有些效果挺炫的,想模仿下,求指导啊

  •  
  •   iamjjh · 2015-09-09 14:09:42 +08:00 · 6794 次点击
    这是一个创建于 3348 天前的主题,其中的信息可能已经有所发展或是发生改变。

    登录后第一个界面,首页导航栏是透明的,随着 view 上滑, View 中的一个按钮也移动到导航栏上,导航栏也变得不透明了,请问这个是如何实现的,主要是按钮也随着移动而缩小,最后到导航栏上。
    http://ww3.sinaimg.cn/large/721c0e13jw1evw6516sccg20hs0vkb29.gif

    第二个就是向下滑动的时候,出现的图片依次缩小再放大,如果滑动快有这个效果,慢慢划动无此效果,请问这个又是如何实现的,求指导啊
    http://ww1.sinaimg.cn/large/721c0e13jw1evw65iaog4g20hs0vk4nc.gif

    50 条回复    2015-09-12 16:13:02 +08:00
    iamjjh
        1
    iamjjh  
    OP
       2015-09-09 14:29:03 +08:00
    求指导啊
    CDuXZMAPgHp1q9ew
        2
    CDuXZMAPgHp1q9ew  
       2015-09-09 15:29:32 +08:00
    那个导航栏估计不是系统自带的
    要是系统自带的话 那个按钮在层级上就要在导航栏之上
    iOSSer
        3
    iOSSer  
       2015-09-09 15:43:05 +08:00
    应该不是系统的 nav,是 view
    iamjjh
        4
    iamjjh  
    OP
       2015-09-09 16:00:57 +08:00
    @iOSSer 但是滚动上去有导航条啊
    NovemberEleven
        5
    NovemberEleven  
       2015-09-09 16:08:15 +08:00
    第一个我想到的是,移动的时候改变 navigationbar 的透明度,再再 navigationcontroller.view 里面加一个大的加号, scrollview 滚动的时候,移动缩放加号,当位置去到 navigationbar 中间的时候,把 navigationbar 的加号显示,再把移动的加号隐藏。
    NovemberEleven
        6
    NovemberEleven  
       2015-09-09 16:09:28 +08:00
    另外楼主用什么录屏工具?
    ahu
        7
    ahu  
       2015-09-09 16:14:03 +08:00
    豌豆荚 android 版我记得就是这样的
    yellowV2ex
        8
    yellowV2ex  
       2015-09-09 16:19:45 +08:00
    1. 应该是看上去像导航条的 uiview 而已,目测这样实现最简单了,保持在上方不动可以写在 `scrollViewDidScroll` 里
    2. tableview 有个叫 `willDisplayCell` 的,可以在这里面写 cell 出来时的动画


    其实你看到的这些效果,有一万种实现方法,不一定完全按照教科书的方式去做,按照自己的编码习惯,熟悉的 API 和自己的水平去自己感受,慢慢写出来。其实就算别人实现了,你把代码复制过去,自己不理解的话,这样虽然东西是做出来了,但自己完全没有进步,下次叫你做个一样的效果,你只能找回之前的代码复制过去,那么你做过的东西真的就会了吗?

    没关系的,自己慢慢摸索,慢慢进步,不要虚不要燥,争取在初学阶段,打下一些真正的基础。
    iamjjh
        9
    iamjjh  
    OP
       2015-09-09 16:26:23 +08:00
    @NovemberEleven 用的 itools 录的视频,然后转的 gif
    iamjjh
        10
    iamjjh  
    OP
       2015-09-09 16:27:16 +08:00
    @yellowV2ex 多谢指导
    holy_sin
        11
    holy_sin  
       2015-09-09 16:29:15 +08:00
    太炫酷了
    iamjjh
        12
    iamjjh  
    OP
       2015-09-09 16:32:06 +08:00
    @yellowV2ex 这个控制器的结构是一个 scrollView ,最上方一个 View (导航条),按钮那部分整个是个 View ,然后下面的是 tableView 吗?用 tableview 的 headerView 和 SectionHeader 代替上部和中键的 View 实现起来是否回简单点?
    CareiOS
        13
    CareiOS  
       2015-09-09 16:35:17 +08:00
    App 叫什么名字?我也下来研究一下。
    joying
        14
    joying  
       2015-09-09 16:36:41 +08:00
    用 ScrollView 的委托事件,监测 ScrollView 的 contentOffset ,随着 contentOffset.y 的变化,改变 Button 的 transform , NavigationBar 应该是自定义的,层级 index 小于 Button 的。
    yellowV2ex
        15
    yellowV2ex  
       2015-09-09 16:42:10 +08:00
    @iamjjh tableview 其实也是个 scrollView ,这种列表的东西还是 tableview 比较好,因为帮你写了很多 cell 重用的东西,最上面那部分可以用 headerView ,但那个加号肯定是所有东西的最上层的,如果要平滑过渡到那个顶部区域的话,还是独立浮着比较好,当然你要说包括加号和上面的所有东西都放到一个很高的 SectionHeader 里也不是不行,完全按照这个范例的话也是可以实现的。
    但以后如果下面的 tableview 要加些分类啊什么的就比较麻烦了,按照这个 UI 的设计逻辑,顶部应该是一个独立 view 做独立的控制,而不应该跟下面的 tableview 混在一起。

    //

    你可以在 UITableViewController 里写一个 [self.view bringSubviewToFront:topView];
    然后在 - (void )scrollViewDidScroll:(UIScrollView *)scrollView 里写 topView.top = scrollView.contentOffset.y;
    这样 topView 就会保持在上面了,然后根据滑动的 contentOffset.y 再来变这个 view 里的东西
    yellowV2ex
        16
    yellowV2ex  
       2015-09-09 16:44:19 +08:00
    纠正一下,[self.view bringSubviewToFront:topView]; 换 [self.view addSubview:topView];
    finab
        17
    finab  
       2015-09-09 16:46:30 +08:00
    用 Reveal 看下他的页面结构。。
    我经常用这个看 国内大的 APP 的结构偷师。。
    ianisme
        18
    ianisme  
       2015-09-09 17:07:32 +08:00
    https://github.com/ianisme/CoolNavi
    我的开源项目 不谢
    hinate
        19
    hinate  
       2015-09-09 17:16:55 +08:00 via Android
    楼上原著已出现 😁
    lk920724
        20
    lk920724  
       2015-09-09 17:19:56 +08:00
    scrollView 的偏移 = =
    SourceMan
        21
    SourceMan  
       2015-09-09 17:28:13 +08:00
    @ianisme 以前帖子说的抄袭的,建议加上个 license 哦
    ianisme
        22
    ianisme  
       2015-09-09 17:29:28 +08:00
    @SourceMan 我抄袭?
    ianisme
        23
    ianisme  
       2015-09-09 17:31:13 +08:00
    @SourceMan 哦哦,明白了 多谢提醒 我的所有项目都没加 license 。。。
    Madeline
        24
    Madeline  
       2015-09-09 17:34:13 +08:00
    之前实现过,根据 scrollview 的 offset 换算成 nav bar 背景图的 alpha 。
    skxs067
        25
    skxs067  
       2015-09-09 17:34:19 +08:00
    @ianisme 是说, 如果你原创的话可以加个声明
    ieliwb
        26
    ieliwb  
       2015-09-09 17:34:46 +08:00
    华而不实的效果
    ianisme
        27
    ianisme  
       2015-09-09 17:34:56 +08:00
    @skxs067 谢谢提醒
    Elethom
        28
    Elethom  
       2015-09-09 18:06:53 +08:00
    @ianisme
    寫得好爛。
    codecrash
        29
    codecrash  
       2015-09-09 20:23:01 +08:00
    世界真小
    qq2511296
        30
    qq2511296  
       2015-09-09 22:40:02 +08:00
    另外简书的 app 里面个人中心 跟这个页面差不多
    qq2511296
        31
    qq2511296  
       2015-09-09 22:43:17 +08:00
    @Elethom
    别这样打击别人嘛
    来你写个优雅的
    iamjjh
        32
    iamjjh  
    OP
       2015-09-10 08:28:35 +08:00
    @yellowV2ex 感谢指导
    iamjjh
        33
    iamjjh  
    OP
       2015-09-10 08:28:53 +08:00
    @ianisme 多谢,学习了
    Mysdes
        34
    Mysdes  
       2015-09-10 09:51:22 +08:00
    @Elethom 哈哈哈哈哈哈,闹
    zichen0422
        35
    zichen0422  
       2015-09-10 10:33:43 +08:00
    学习了.
    Elethom
        36
    Elethom  
       2015-09-10 11:01:04 +08:00
    @qq2511296
    @Mysdes
    怎麼了?寫得確實挺爛的。
    ianisme
        37
    ianisme  
       2015-09-10 11:20:42 +08:00
    @Elethom 有哪些烂的点,希望您能指出,我可以多学习,多谢!
    kobe1941
        38
    kobe1941  
       2015-09-10 13:25:34 +08:00
    https://itunes.apple.com/us/app/wei-cai-kan-gu-piao-shi-shi/id590228830?mt=8

    这个 app 有这个效果,目测都是仿推特的
    iOSSer
        39
    iOSSer  
       2015-09-10 14:59:34 +08:00
    把头像加在 window 上,然后通过 scrollview 的偏移量去控制头像位置和导航栏透明度~
    iamjjh
        40
    iamjjh  
    OP
       2015-09-11 09:31:48 +08:00
    @CareiOS 搜布
    iamjjh
        41
    iamjjh  
    OP
       2015-09-11 09:33:02 +08:00
    @iOSSer 导航栏的透明度变化不会导致导航栏上面按钮的透明度也变化吗
    CareiOS
        42
    CareiOS  
       2015-09-11 13:03:21 +08:00
    @iamjjh 他的思路是,将头像那个 UIImageView 放到 UIWindow 上,而 UINavigationController 的 view 与 UIImageView 是兄弟关系。 所以不会相互影响。
    iamjjh
        43
    iamjjh  
    OP
       2015-09-11 13:05:21 +08:00
    @CareiOS 我给的 gif 图导航栏上还有两个图标啊
    CareiOS
        44
    CareiOS  
       2015-09-11 13:22:26 +08:00
    @iamjjh 这儿有一个开源的两个图标不会影响。 你可以看看 https://github.com/ondev/LTNavigationBar
    iamjjh
        45
    iamjjh  
    OP
       2015-09-11 13:35:05 +08:00
    @CareiOS 十分感谢~~
    Elethom
        46
    Elethom  
       2015-09-11 17:50:32 +08:00 via iPhone
    @ianisme
    整個思路就是錯的,更別提語言層面上還犯了很多非常低級的錯誤。
    ianisme
        47
    ianisme  
       2015-09-11 22:47:48 +08:00
    @Elethom 关于语言层面的错误,希望您多多指教,我想知道是哪里有问题?
    谢谢!
    Elethom
        48
    Elethom  
       2015-09-12 11:53:46 +08:00
    @ianisme

    比如說 scroll view 用了 strong 而不是 weak 之類的,具體沒怎麼看。

    思路上的主要問題有兩個。第一是 navigation bar 不應該隱藏,而是應該設置成透明並且自己做一個全局的 background 來代替,這樣就不會影響到和 navigation bar 相關的 transitions ;第二是 header 本身的參數,你這個樣子遇到一個特殊一點的 frame 就不行了,包括收到電話、後台導航等情況 status bar 的 frame 變化,以及屏幕旋轉,或者是在一個 container 內 frame 發生改變的時候,都會跪。另外我很喜歡做類似設計,但自己很不樂意寫的另一個原因,就是 iOS 7 和 iOS 8 對多個 affine transform 疊加的處理有時是不同的,要判斷版本,很煩。

    說直接了可能不太好聽,不過你的代碼值得參考的地方都基本沒有。就這樣。
    Elethom
        49
    Elethom  
       2015-09-12 11:54:10 +08:00
    @ianisme
    喔對,還有版本控制,你真的應該回去補一下基礎。
    ianisme
        50
    ianisme  
       2015-09-12 16:13:02 +08:00
    @Elethom 受教了, 3Q
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2838 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:07 · PVG 10:07 · LAX 18:07 · JFK 21:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.