来简书有段时间了,一直都只是学习,最近有点时间研究了一下swift,心想能不能用swift做个小demo试试,这几天利用晚上空闲时间简单做了个框架,用的是MVVM模式,前期写工具类和搭框架耗时比较多,于是还只写了几个小界面就先发过来了,后面有空还会继续写.
废话不多说先上效果图:
登录进去的首页:

这里采用的是卡片式的布局,用collectionView重写layout的方式计算布局属性(关于自定义layout的封装我已经上传了gitHub,有兴趣可以去看一下https://github.com/even-cheng),在左右活动时候根据contentOffSet的变化来约束卡片的缩放.卡片本身添加了点击事件,可以进入下一层界面.数据用的是微博接口传的数据,如果有分享的话才能点击进入分享页,下面是进入分享的界面:

代码如下:
lazy var myView: CXW_HomeCollectionView = {
let homeLayout = CXW_CarouselLayout()
//设置item布局
homeLayout.itemSize = CGSize(width: screenWidth - 100, height: screenHeight - 108)
let view = CXW_HomeCollectionView(frame: CGRect(x: 0, y: 64, width: screenWidth, height: screenHeight - 108), collectionViewLayout: homeLayout)
//获取闭包,跳转到分享的页面
view.goOthersClosure = {(index,homeViewModel) in
//初始化动画者
let animator = XWCoolAnimator.xw_animatorWithType(XWCoolTransitionAnimatorType.Portal)
//跳转控制器
let destinationVC = CXW_OthersController()
destinationVC.myView.homeCellModel = homeViewModel.homeCellModel[index.item]
// 创建导航控制器包装目标控制器
let navVC = CXW_BaseNavController(rootViewController: destinationVC)
// 跳转控制器
self.xw_presentViewController(navVC, withAnimator: animator)
}
view.backgroundColor = UIColor(white: 237 / 255, alpha: 1)
view.showsVerticalScrollIndicator = false
view.showsHorizontalScrollIndicator = false
return view
}()
进入分享页的页面,重用的主页视图:

顶部的头像按钮点击效果如下,采用扩散式的动画效果切换控制器:


界面都是用的SnapKit进行自动布局.
这里是登录之后通知window切换根控制器实现的.

在主页面左滑可以刷新加载更多最新数据,默认一次加载20条,如果右滑到底会加载缓存数据.自定义刷新和加载更多也封装了一个文件,追求简洁的话可以使用.

之前用MJRefresh确实很强大,这里想着不用太多复杂的效果,所以自己写了一个轻量级的,在一般的应用上还是可以用得着的,部分代码如下,具体封装请见github:






用起来其实超级方便:


几行代码就搞定啦:
当然,我们有提示的嘛,所以监听一下刷新状态做出不同的响应(逻辑处理都是封装在viewModel中,网络工具也有封装NetWorkTools):

主页中间下发按钮点击事件采用了pop动画,弹出式的效果,再次点击用的扩散淡出的效果:

还有自定义的表情键盘:

键盘上面的toolBar使用UIStackView做的,9.0的新方法,所以先试试看,很好用的,是需要设置布局的方式和按钮的个数就可以啦,它会自动均等大小. ps.UIStackView只是作为容器,设置它本身的背景色是没有作用的:


注意:这里创建按钮之后添加不是用的addSubview,而是addArrangeSubview.这是stackView特有的.别用错了哦,不然看不到效果的.
点击事件用闭包传递给控制器:

最后分享一个利用runTime修改badge背景图片:

多谢大家捧场啦,后面我还会继续更新的,有一些新的功能或者好玩的地方再跟大家分享啦~~~最后送上源码地址https://github.com/even-cheng 欢迎交流指点!~~~
网友评论