iOS SkeletonView
SkeletonView一种优雅的方式，向用户显示正在发生的事情，并为他们正在等待的内容做好准备
1.安装
pod "SkeletonView"
2.如何使用
2.1在适当的位置导入SkeletonView
import SkeletonView
2.2设置视图skeletonables
avatarImageView.isSkeletonable = true
2.3显示骨架
view.showSkeleton()// Solidview.showGradientSkeleton()// Gradientview.showAnimatedSkeleton()// Solid animatedview.showAnimatedGradientSkeleton()// Gradient animated
2.4更新骨架（如颜色，动画等）
view.updateSkeleton()// Solidview.updateGradientSkeleton()// Gradientview.updateAnimatedSkeleton()// Solid animatedview.updateAnimatedGradientSkeleton()// Gradient animated
2.5隐藏骨架
view.hideSkeleton()
3.UITableView
tableView.jpg
3.1遵守SkeletonTableViewDataSource协议，并实现协议方法
extensionSearchMovieViewController:SkeletonTableViewDataSource{functableView(_tableView:UITableView,numberOfRowsInSection section:Int)->Int{returnself.models.count}functableView(_tableView:UITableView,cellForRowAt indexPath:IndexPath)->UITableViewCell{letmodel=self.models[indexPath.row]letcell=tableView.dequeueReusableCell(withIdentifier:"SearchMovieCell",for:indexPath)as!SearchMovieCellifmodel.vod_pic?.isEmpty==false{cell.movieImageView.kf.indicatorType=.activity cell.movieImageView.kf.setImage(with:ImageResource(downloadURL:URL(string:model.vod_pic!)!),placeholder:UIImage(named:"zanwutupian"))}cell.titleLabel.text=model.vod_name cell.detailsLabel.text=model.vod_blurbreturncell}funccollectionSkeletonView(_skeletonView:UITableView,cellIdentifierForRowAt indexPath:IndexPath)->ReusableCellIdentifier{return"SearchMovieCell"}}
3.2 设置视图skeletonables
classSearchMovieCell:DiaryBaseTableViewCell{/// 图片varmovieImageView:UIImageView!/// 标题vartitleLabel:UILabel!/// 详情vardetailsLabel:LCZAlignTopLabel!overridefuncconfig(){self.isSkeletonable=truemovieImageView=UIImageView()self.contentView.addSubview(movieImageView)movieImageView.snp.makeConstraints{(make)inmake.left.equalToSuperview().offset(15)make.centerY.equalToSuperview()make.height.equalTo(100)make.width.equalTo(80)}movieImageView.layer.cornerRadius=5movieImageView.clipsToBounds=truemovieImageView.contentMode=.scaleAspectFill movieImageView.setContentHuggingPriority(.required,for:.horizontal)movieImageView.setContentCompressionResistancePriority(.required,for:.horizontal)movieImageView.isSkeletonable=truetitleLabel=UILabel()self.contentView.addSubview(titleLabel)titleLabel.snp.makeConstraints{(make)inmake.left.equalTo(movieImageView.snp.right).offset(5)make.top.equalTo(movieImageView.snp.top)make.right.equalToSuperview().offset(-15)}titleLabel.font=LCZBoldFontSize(size:16)titleLabel.setContentHuggingPriority(.required,for:.vertical)titleLabel.setContentCompressionResistancePriority(.required,for:.vertical)titleLabel.text="xxxxxxxxx"titleLabel.isSkeletonable=truetitleLabel.textAlignment=.leftdetailsLabel=LCZAlignTopLabel()self.contentView.addSubview(detailsLabel)detailsLabel.snp.makeConstraints{(make)inmake.left.equalTo(movieImageView.snp.right).offset(5)make.top.equalTo(titleLabel.snp.bottom).offset(5)make.right.equalToSuperview().offset(-15)make.bottom.equalTo(movieImageView.snp.bottom)}detailsLabel.font=LCZFontSize(size:14)detailsLabel.numberOfLines=0;detailsLabel.textColor=LCZRgbColor(160,160,160,1)detailsLabel.isSkeletonable=truedetailsLabel.textAlignment=.left}}
3.3 显示骨架
self.searchMovieView.tableView.visibleCells.forEach{$0.showAnimatedGradientSkeleton(usingGradient:SkeletonGradient(baseColor:UIColor.clouds),animation:GradientDirection.topLeftBottomRight.slidingAnimation())}
4.UICollectionView
collectionView.jpg
4.1 遵守SkeletonCollectionViewDataSource协议，并实现协议方法
funccollectionSkeletonView(_skeletonView:UICollectionView,cellIdentifierForItemAt indexPath:IndexPath)->ReusableCellIdentifier{return"MovieHomeCell"}funccollectionView(_collectionView:UICollectionView,cellForItemAt indexPath:IndexPath)->UICollectionViewCell{letcell=collectionView.dequeueReusableCell(withReuseIdentifier:"MovieHomeCell",for:indexPath)as!MovieHomeCellletmodel=self.models[indexPath.row]ifmodel.vod_pic?.isEmpty==false{cell.imageView.kf.indicatorType=.activity cell.imageView.kf.setImage(with:ImageResource(downloadURL:URL(string:model.vod_pic!)!),placeholder:UIImage(named:"zanwutupian"))}cell.titleLabel.text=model.vod_namereturncell}// 显示骨架cell的个数funccollectionSkeletonView(_skeletonView:UICollectionView,numberOfItemsInSection section:Int)->Int{return12}
4.2 设置视图skeletonables
classMovieHomeCell:DiaryBaseCollectionViewCell{/// 图片varimageView=UIImageView()/// 标题vartitleLabel=UILabel()overridefuncconfig(){self.isSkeletonable=trueself.contentView.layer.cornerRadius=10self.layer.cornerRadius=10self.contentView.clipsToBounds=trueself.contentView.addSubview(self.titleLabel)self.titleLabel.font=LCZBoldFontSize(size:16)self.titleLabel.snp.makeConstraints({(make)inmake.bottom.equalToSuperview().offset(-10)make.left.equalToSuperview().offset(10)make.right.equalToSuperview().offset(-10)})self.titleLabel.textAlignment=.centerself.titleLabel.font=LCZFontSize(size:14)self.titleLabel.textColor=LCZHexadecimalColor(hexadecimal:"#FECE1D")self.titleLabel.isSkeletonable=trueself.titleLabel.text="乐淘视界"self.contentView.addSubview(self.imageView)self.imageView.contentMode=.scaleAspectFillself.imageView.clipsToBounds=trueself.imageView.snp.makeConstraints{(make)inmake.left.top.right.equalToSuperview()make.bottom.equalTo(self.titleLabel.snp.top).offset(-10)}self.imageView.isSkeletonable=true}}
3.3 显示骨架
view.isSkeletonable=trueself.moreMoviesView.collectionView.prepareSkeleton(completion:{doneinself.view.showAnimatedGradientSkeleton(usingGradient:SkeletonGradient(baseColor:UIColor.clouds),animation:GradientDirection.topLeftBottomRight.slidingAnimation())})
4人点赞
网友评论