SkeletonView⼀种优雅的⽅式，向⽤户显⽰正在发⽣的事情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,numberOfRowsInSec tion section:Int)->unt}functableView(_tableView:UITableView,cellForRowAt indexPath:IndexPath)-
>UITableViewCell{w]letcell=tableView.dequeueReusableCell(withIdentifier:"SearchMovieCell",for:i ndexPath)as!SearchMovieCellifmodel.vod_pic?.isEmpty==vieImageView.kf.indicatorType=.activity
=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()tView.addSubview(movieImageView)movieImageView.snp.mak eConstraints{(make)inmake.left.equalToSuperview().offset(Y.equalToSuperview()make.height.equalTo(100)make.w idth.equalTo(80)}Radius=5movieImageView.tMode=.scal eAspectFill
movieImageView.setContentHuggingPriority(.required,for:.horizontal)movieImageView.setContentCompressionResistancePriority (.required,for:.horizontal)movieImageView.isSkeletonable=truetitleLabel=UILabel()tView.addSubview(titleLabel)titleLabel. snp.makeConstraints{(make)inmake.left.equalTo(movieImageView.snp.right).offset(p.equalTo(p) make.right.equalToSuperview().offset(-
15)}titleLabel.font=LCZBoldFontSize(size:16)titleLabel.setContentHuggingPriority(.required,for:.vertical)titleLabel.setContentCom pressionResistancePriority(.required,for:.="xxxxxxxxx"titleLabel.Alignment= .leftdetailsLabel=LCZAlignTopLabel()tView.addSubview(detailsLabel)detailsLabel.snp.makeConstraints{(make)inmake.le ft.equalTo(movieImageView.snp.right).offset(p.equalTo(titleLabel.snp.bottom).offset(5)make.right.equalToSuperview().o ffset(-
15)make.bottom.equalTo(movieImageView.snp.bottom)}detailsLabel.font=LCZFontSize(size:14)detailsLabel.numberOfLines=0;Color=LCZRgbColor(160,160,160,1)detailsLabel.Alignment=.left}}
3.3 显⽰⾻架
self.searchMovieView.tableView.visibleCells.forEach{$0.showAnimatedGradientSkeleton(usingGradient:SkeletonGradient(baseCol or:UIColor.clouds),pLeftBottomRight.slidingAnimation())}
4.UICollectionView
view ui框架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!MovieHo w]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:"zanwutup ian"))}=model.vod_namereturncell}// 显⽰⾻架cell的个数
funccollectionSkeletonView(_skeletonView:UICollectionView,numberOfItemsInSection section:Int)->Int{return12}
4.2 设置视图skeletonables
classMovieHomeCell:DiaryBaseCollectionViewCell{/// 图⽚varimageView=UIImageView()/// 标题
vartitleLabel=UILabel()overridefuncconfig()
{self.Radius=tView.clipsToBounds=tView.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)})Alignment=.centerself.titleLabel.font=LCZFontSize(size:14)Color=LCZHexadecimalColor(h exadecimal:"#FECE1D")self.titleLabel.isSkeletonable=="乐淘视
界"tView.addSubview(self.imageView)tMode=.scaleAspectFillself.imageView.clipsToBounds=trues elf.imageView.snp.makeConstraints{(make)p.right.equalToSuperview()make.bottom.equalTo(self.p).o ffset(-10)}self.imageView.isSkeletonable=true}}
3.3 显⽰⾻架
view.llectionView.prepareSkeleton(completion:
{doneinself.view.showAnimatedGradientSkeleton(usingGradient:SkeletonGradient(baseColor:UIColor.clouds),animation:pLeftBottomRight.slidingAnimation())})
4⼈点赞
⽇记本

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。