解析SwiftUI布局细节(二)循环轮播+复杂布局

 

前言

 

      上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在SiwftUI文档中说道的比较好玩的一个东西,具体的我们后面在看。这篇我们还是说我们关于SwiftUI的东西,再提一下Demo代码我已经提交上Git了,目前Demo进度为一级页面基本上结束,地图点击大头针的添加也刚处理完,代码有需要的小伙伴可以去Git看看,项目地址

      1、View之间的跳转(这里有个疑问需要帮忙!)

      2、稍微复杂点View的布局思路和一些细节知识

      3、SwiftUI循环轮播图

      这次总结的首页的UI布局如下,我们下面一点点的解析:

 

解析SwiftUI布局细节(二)循环轮播+复杂布局

 

界面跳转的问题

 

       正常的界面跳转逻辑实现是比较简单的,我们先看看这个很简单的正常跳转,再说说我们的问题:

NavigationView{
      VStack{
           List{
                  /// 开关按钮
                  /// Toggle(isOn: $userData.showFavoritesOnly) {Text("Favorites only")}
                  ForEach(landmarkData) { landmark in

                        if !self.userData.showFavoritesOnly || landmark.isFavorite {
                            
                            NavigationLink(destination:LandmarkDetail(landmark:landmark)
                                    .environmentObject(self.userData),label:{
                                LandmarkRow(landmark: landmark)
                            })
                        }
                  }
           }
           .listStyle(PlainListStyle())
           .navigationTitle("iPhone")
    }
}

 

      这是一个很普通的通过 NavigationView + NavigationLink 的界面跳转,在苹果给的 SwiftUI 的使用例子中就是这样写的,当然我们在正常的使用中这样写也没啥问题,那我们界面跳转的问题是什么呢?

      如果你看了我们 Demo中的代码,你就知道我们是采用 TabView 嵌套 NavigationView 的形式,在这样的模式下似乎是存在问题的, 在 TabView+NavigationView 中你利用 NavigationLink 单击没法跳转,只有长按的时候才能跳转,这个问题抛出来,有懂得小伙伴希望能给我说一下,这个问题我也一直没有解决!具体的我们Demo中可以看看“我的”页面那个 List 的代码,问题就在那里。要理解这点的麻烦也给我说说,感谢!

 

首页布局

 

      我们把首页这个布局给解析一下,大概分了下面几部分,我们再具体的说说:

 解析SwiftUI布局细节(二)循环轮播+复杂布局

 

 

       我们看看最底层的代码先:

NavigationView{
            
       ScrollView(showsIndicators:false,content: {
        
                /// Banner视图
                HomeBannerView()
                    .environmentObject(homeViewModel)
                
                /// 服务列表
                HomeServiceCircleView().frame(
                   width: homeViewModel.homeServiceCircleWidth,
                  height: homeViewModel.homeServiceCircleHeight)
                    .environmentObject(homeViewModel)
                    .offset(y: -5)
                
                /// 滚动头条
                HomeCircleNewsView().frame(
                    width: homeViewModel.homeNewsCircleWidth,
                   height: homeViewModel.homeNewsCircleHeight)
                    .environmentObject(homeViewModel)
                
                /// 四个按钮
                HomeButtonView().frame(
                    width: homeViewModel.homeButtonViewWidth,
                   height: homeViewModel.homeButtonViewHeight)
                    .offset(y: -5)
                
                /// 服务列
                HomeServiceListView().frame(
                  width: homeViewModel.homeServiceViewWidth,
                 height: homeViewModel.homeServiceViewHeight)
                    .environmentObject(homeViewModel)
                
                /// 最美的风景
                HomeSnapshotView().environmentObject(homeViewModel)
       }).navigationTitle(title)
}

 

      这部分的代码没有啥特别需要说明的,都比较简单,可能是就是这个 environmentObject (我把它称为环境变量)这个是需要特别说明的一个变量,从名字上可以看出,这个修饰符是针对全局环境的。通过它我们可以避免在初始 View 时创建 ObservableObject, 而是从环境中获取 ObservableObject,像 @EnvironmentObject,@ObservedObject,@Binding 和 @States 这几个关键字还是需要需要我们特别理解的。下面这篇我们博客园的同行总结的还是很精辟的。传送门在这

      下面是我们值得细说的一些点:

      1、值得注意的 TabView + PageTabViewStyle 

      这是在iOS14中新出的一个值得我们注意的点,PageTabViewStyle 是14.0的新东西,但它的确能达到一个满意的翻页效果。和我们UIKit中的效果一样。具体的代码如下:

TabView(selection: $selection) {
      /// 里面的具体内容,我们写了三页      
      ForEach(0..<3){
          HomeServicePageView(pageIndex: $0)
               .tag($0)
               .environmentObject(homeViewModel)
       }
}
/// PageTabViewStyle 14.0的新东西
.tabViewStyle(PageTabViewStyle())
.animation(.spring())

 

     2、GeometryReader 它其实是有必要好好了解一下的。GeometryReader 的主要作用就是能够获取到父View建议的尺寸,这就是它的主要作用,要没有它我们面临的可能就是无休止的传值了,SwiftUI 既然是声明式的UI,按我的理解你就没有办法去获取某一个视图的父视图之类的。不然怎么体现声明这个点呢!

     这个GeometryReader在前面第一期的时候我说过这个属性。

/// A proxy for access to the size and coordinate space (for anchor resolution)
/// of the container view.
@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
public struct GeometryProxy {

    /// The size of the container view.
    public var size: CGSize { get }

    /// Resolves the value of `anchor` to the container view.
    public subscript<T>(anchor: Anchor<T>) -> T { get }

    /// The safe area inset of the container view.
    public var safeAreaInsets: EdgeInsets { get }

    /// Returns the container view's bounds rectangle, converted to a defined
    /// coordinate space.
    public func frame(in coordinateSpace: CoordinateSpace) -> CGRect
}

 

      * size 比较直观,就是返回父View建议的尺寸

      ** subscript 可以让我们获取.leading,.top等等类似这样的数据

      *** safeAreaInsets 可以获取安全区域的Insets

      **** frame(in:) 要求传入一个CoordinateSpace类型的参数,也就是坐标空间,可以是.local.global 或者  .named(),其中 .named()可以自定义坐标空间。

      有一个还得说明一下,GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中,内容放置方式为 .center。在 iOS 14.0 中则为:.topLeading。

 

      3、再提一点关于上面说的滚动视图,在UIKit中我们可以用UICollectionView搞定一切,但是在SwiftUI中没有这个控件,我建议采用的方式是 ScrollView + HStack + VStack  的方式去实现,很多同行有说目前来看SwiftUI的List在数据量大的情况下性能不是特别好,采用ScrollView是个不错的方式,而且也很容易构建出来,并不是说每一个Item的位置都需要你去计算,所以没啥可以担心的。

除了这个List,还要一个From我们也可以了解下,他们俩肉眼可见的区别 在选中这个点上的区别。

 

循环轮播实现

 

       总结一下循环轮播怎么实现,采用的方案就是 HStack + Gesture + Timer 的方式,这三者就能实现一个自动循环滚动或者手动滚动的轮播。然后缩放的方式还是比较简单的,我们采用改变下Image的frame的方式。

      HStack 这没啥可以具体说的,可以看代码,注释比较多,就不在这里累赘了。

      Gesture 这个我们可以说说,它就是我们具体手势的父类,像我们的单击手势和我们这里用到的拖拽手势一样。具体的我们会看下面的代码,他们的区别就是像拖拽我们可以监控它的改变状态,点击或者双击、长按等我们可以添加事件等等。下面是拖拽的代码:

/// 定义拖拽手势
private var dragGesture: some Gesture{
        
        DragGesture()
            /// 拖动改变
            .onChanged {
                
                isAnimation = true
                dragOffset = $0.translation.width
            }
            /// 结束
            .onEnded {
                
                dragOffset = .zero
                /// 拖动右滑,偏移量增加,显示 index 减少
                if $0.translation.width > 50{
                    currentIndex -= 1
                }
                /// 拖动左滑,偏移量减少,显示 index 增加
                if $0.translation.width < -50{
                    currentIndex += 1
                }
                /// 防止越界
                currentIndex = max(min(currentIndex, homeViewModel.homeBannerCount() - 1), 0)
            }
}

      再看看Timer,SwiftUI区别于我们UIKit的创建方式,SwiftUI对它进行了简化,具体的创建如下:

/// SwiftUI对定时器的简化,可以进去看看具体参数的定义
private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()

      它不像我们UIKit的需要我们绑定事件,那它的事件是怎么处理的呢?看看下面的代码:

/// 对定时器的监听
.onReceive(timer, perform: { _ in
    currentIndex += 1
}

      它的事件就是通过 onReceive 监听处理的,所有通过 publish 创建的都是可以通过 onReceive 监听的。那还有啥事通过 publish 创建的呢?我所用到的就是 NotificationCenter。

      这样基本上循环轮播的实现我们基本上都说清楚了,具体里面的一些实现细节代码注释写的清清楚楚,还是仔细看看代码结合里面的注释来看,难度不是很大。首页顶部自动循环轮播的代码实现如下,代码里有些注释还是比较重要的,注意看注释:

struct HomeBannerView: View {
    
    @EnvironmentObject var homeViewModel: HomeViewModel
    
    /// SwiftUI 对定时器的简化,可以进去看看具体参数的定义
    private let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    
    /// 拖拽的偏移量
    @State var dragOffset: CGFloat = .zero
    /// 当前显示的位置索引,
    /// 这是实际数据中的1就是数据没有被处理之前的0位置的图片
    /// 所以这里默认从1开始
    @State var currentIndex: Int = 1
    /// 是否需要动画
    @State var isAnimation: Bool = true
     
    let spacing: CGFloat = 10
    
    var body: some View {
        
        /// 单个子视图偏移量 = 单个视图宽度 + 视图的间距
        let currentOffset = CGFloat(currentIndex) * (homeViewModel.homeBannerWidth + spacing)
        /// GeometryReader 改变了它显示内容的方式。在 iOS 13.5 中,内容放置方式为 .center。在 iOS 14.0 中则为:.topLeading
        GeometryReader(content: { geometry in
            
            HStack(spacing: spacing){
                
                ForEach(0..<homeViewModel.homeBannerCount()){
                    
                    /*
                    如果想自定义Image大小,可以添加frame
                    clipped()相当于UIKit里的clipsToBounds,
                    与aspectRatio(contentMode: .fill)搭配使用。
                       
                    注意:frame 要放在resizable后面,否则报错,
                    如果需求裁剪,需要放在aspectRatio后面,
                    clipped()前面,否则frame失效 */
                      
                    Image(homeViewModel.bannerImage($0)).resizable()
                        /// 自己尝试一下.fill和.fit
                        .aspectRatio(contentMode: .fill)
                        .frame(width: geometry.size.width,
                               height: $0 == currentIndex ? geometry.size.height:geometry.size.height*0.8 )
                        .clipped() /// 裁减
                        .cornerRadius(10)
                }
            }.frame(width:geometry.size.width,
                   height:geometry.size.height,alignment:.leading)
             .offset(x: dragOffset - currentOffset)
             .gesture(dragGesture)
             /// 绑定是否需要动画
             .animation(isAnimation ?.spring():.none)
             /// 监听当前索引的变化,最开始初始化为0是不监听的,
             .onChange(of: currentIndex, perform: { value in
            
                isAnimation = true
                /// 第一张的时候
                if value == 0 {
                    
                    isAnimation.toggle()
                    currentIndex = homeViewModel.homeBannerCount() - 2
                /// 最后一张的时候currentIndex设置为1关闭动画
                }else if value == homeViewModel.homeBannerCount() - 1 {
                    
                    isAnimation.toggle()
                    currentIndex = 1
                }
             })
             /// 对定时器的监听
             .onReceive(timer, perform: { _ in
                currentIndex += 1
             })
        }).frame(width: homeViewModel.homeBannerWidth,
                height: homeViewModel.homeBannerHeight)
    }
}

// MARK: -
extension HomeBannerView{
    
    /// 定义拖拽手势
    private var dragGesture: some Gesture{
        
        DragGesture()
            /// 拖动改变
            .onChanged {
                
                isAnimation = true
                dragOffset = $0.translation.width
            }
            /// 结束
            .onEnded {
                
                dragOffset = .zero
                /// 拖动右滑,偏移量增加,显示 index 减少
                if $0.translation.width > 50{
                    currentIndex -= 1
                }
                /// 拖动左滑,偏移量减少,显示 index 增加
                if $0.translation.width < -50{
                    currentIndex += 1
                }
                /// 防止越界
                currentIndex = max(min(currentIndex, homeViewModel.homeBannerCount() - 1), 0)
            }
    }
}

 

参考文章:

      项目地址

      SwiftUI之GeometryReader

      理解SwiftUI关键字 State  Binding ObservesOgiect EnvironmentObje 

      SwiftUI 自定义实现旋转木马轮播效果

 

发表评论

评论已关闭。

相关文章