demo:
oc代碼:https://github.com/xinsun001/iOS-15UI-oc.git
1、導航欄UINavigationBar
iShot2021-12-15 11.31.04.gif
從 iOS 15 開始,UINavigationBar、UIToolbar 和 UITabBar 在控制器中關聯滾動視圖頂部或底部時使用
在iOS15中,UINavigationBar默認是透明的,有滑動時會逐漸變為模糊效果,可以通過改變UINavigationBar.scrollEdgeAppearance屬性直接變為模糊效果、配置相關屬性-背景、字體等
調整如下:
//強烈建議直接隱藏系統導航欄,使用自定義的導航欄!!
object-c:
if (@available(iOS 15.0, *)) {
UINavigationBarAppearance *navBarApperance = [UINavigationBarAppearance new];
// 顏色
navBarApperance.backgroundColor = [UIColor redColor];
//圖片
// navBarApperance.backgroundImage = [UIImage imageNamed:@"bgImage.png"];
// navBarApperance.backgroundImageContentMode = UIViewContentModeScaleToFill;
NSDictionary *dictM = @{ NSForegroundColorAttributeName:[UIColor blackColor]};
navBarApperance.titleTextAttributes = dictM;
self.navigationController.navigationBar.standardAppearance = navBarApperance;
self.navigationController.navigationBar.scrollEdgeAppearance = navBarApperance;
}else{
self.navigationController.navigationBar.barTintColor = [UIColor redColor];
// [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"bgImage.png"] forBarMetrics:UIBarMetricsDefault];
}
swift:
if #available(iOS 15.0,*) {
let navBarAppecrace = UINavigationBarAppearance()
//顏色
// navBarAppecrace.backgroundColor = UIColor.red
//圖片
navBarAppecrace.backgroundImage = UIImage.init(named: "bgImage.png")
navBarAppecrace.backgroundImageContentMode = .scaleToFill
navBarAppecrace.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.black]
self.navigationController?.navigationBar.standardAppearance = navBarAppecrace
self.navigationController?.navigationBar.scrollEdgeAppearance = navBarAppecrace
} else {
self.navigationController?.navigationBar.barTintColor = UIColor.red
// self.navigationController?.navigationBar.setBackgroundImage(UIImage.init(named: "bgImage.png"), for: .any, barMetrics: .default)
}
效果對比:
iShot2021-12-15 11.57.58.gif
image.png
2、Tableview
iShot2021-12-15 12.07.14.gif
因為iOS 15新增sectionHeaderTopPadding屬性,在tableview的UITableViewStylePlain類型中,header上方又增加了高度(22像素)
調整如下:
object-c:
-(UITableView *)tableview{
if (!_tableview) {
_tableview=[[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
_tableview.backgroundColor = [UIColor whiteColor];
_tableview.delegate = self;
_tableview.dataSource = self;
if (@available(iOS 15.0, *)) {
_tableview.sectionHeaderTopPadding = 0; //去掉headerpadding的高度
}
}
return _tableview;
}
swift:
private lazy var tableview:UITableView = {
let tab = UITableView.init(frame: .zero, style: .plain)
tab.backgroundColor = UIColor.white
tab.delegate = self
tab.dataSource = self
if #available(iOS 15.0, *) {
tab.sectionHeaderTopPadding = 0
}
return tab
}()
效果對比:
iShot2021-12-15 12.12.26.gif
3:TabBar
這里我看到好多文章說和navigationbar是一個毛病,背景色和圖片設置在iOS 15上面都不會生效,但是我經過測試,oc是沒有毛病的!swift語言確實會不生效。為了統一做了如下改動
代碼和效果圖如下:
object-c:
if (@available(iOS 15.0, *)) {
UITabBarAppearance *tabBarAppearanc = [UITabBarAppearance new];
//顏色
tabBarAppearanc.backgroundColor = [UIColor greenColor];
// //圖片
// tabBarAppearanc.backgroundImage = [UIImage imageNamed:@"bgImage.png"];
// tabBarAppearanc.backgroundImageContentMode = UIViewContentModeScaleToFill;
NSDictionary *dictM = @{ NSForegroundColorAttributeName:[UIColor redColor]};
tabBarAppearanc.stackedLayoutAppearance.selected.titleTextAttributes = dictM;
// tabBarAppearanc.stackedLayoutAppearance.normal.titleTextAttributes = .....
self.tabBar.scrollEdgeAppearance = tabBarAppearanc;
self.tabBar.standardAppearance = tabBarAppearanc;
} else {
// Fallback on earlier versions
[[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName:[UIColor blackColor]} forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{ NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateSelected];
//顏色
[[UITabBar appearance] setBarTintColor:[UIColor greenColor]];
//圖片
// [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"bgImage.png"]];
}
swift:
if #available(iOS 15.0,*) {
let tabBarAppearanc = UITabBarAppearance.init()
//顏色
// tabBarAppearanc.backgroundColor = UIColor.green
//圖片
tabBarAppearanc.backgroundImage = UIImage.init(named: "bgImage.png")
tabBarAppearanc.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
// tabBarAppearanc.stackedLayoutAppearance.normal.titleTextAttributes = .....
self.tabBar.standardAppearance = tabBarAppearanc
self.tabBar.scrollEdgeAppearance = tabBarAppearanc
}else{
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.black], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .normal)
//顏色
UITabBar.appearance().barTintColor = UIColor.green
//圖片
// UITabBar.appearance().backgroundImage = UIImage.init(named: "bgImage.png")
}
左邊是iOS 15,右邊是iOS 14
iShot2021-12-15 14.01.05.gif
4:UIButton
image.png
之前我們可能要自定義一個類來實現這種按鈕,但是現在蘋果新增了特性
object-c:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.backgroundColor = [UIColor greenColor];
if (@available(iOS 15.0, *)) {
UIButtonConfiguration *conf = [UIButtonConfiguration tintedButtonConfiguration];
conf.cornerStyle = UIButtonConfigurationCornerStyleMedium;
[conf setImagePadding:5];
[conf setTitle:@"大標題"];
[conf setSubtitle:@"副標題"];
[conf setImage:[UIImage imageNamed:@"btnImage.png"]];
conf.imagePlacement = NSDirectionalRectEdgeLeading;
button.configuration = conf;
} else {
// Fallback on earlier versions
}
swift:
let button:UIButton = UIButton.init(type: .custom)
button.backgroundColor = UIColor.green
if #available(iOS 15.0, *) {
var conf = UIButton.Configuration.tinted()
conf.cornerStyle = UIButton.Configuration.CornerStyle.medium
conf.imagePadding = 5
conf.title = "大標題"
conf.subtitle = "副標題"
conf.image = UIImage.init(named: "btnImage.png")
conf.imagePlacement = .leading
button.configuration = conf
}else{
}
WeChat2d513139892f4b37509169da2df8eece.png
5:UIImage
圖片的尺寸變換
object-c:
UIImage *modeImg = [UIImage imageNamed:@"bgImage.png"];
NSLog(@"圖片原尺寸%@",NSStringFromCGSize(modeImg.size));
if (@available(iOS 15.0, *)) {
modeImg = [modeImg imageByPreparingThumbnailOfSize:CGSizeMake(220, 100)];
NSLog(@"**111111**變換后圖片原尺寸%@",NSStringFromCGSize(modeImg.size));
[modeImg prepareThumbnailOfSize:CGSizeMake(220, 100) completionHandler:^(UIImage * _Nullable) {
NSLog(@"###222###變換后圖片原尺寸%@",NSStringFromCGSize(modeImg.size));
}];
} else {
// Fallback on earlier versions
};
//打印值
//2021-12-15 15:48:17.590981+0800 iOS15UI[71637:683127] 圖片原尺寸{674, 206}
//2021-12-15 15:48:17.598647+0800 iOS15UI[71637:683127] **111111**變換后圖片原尺寸{220, 100}
//2021-12-15 15:48:17.600537+0800 iOS15UI[71637:684293] ###222###變換后圖片原尺寸{220, 100}
swift:
var modImg = UIImage.init(named: "btnImage.png")
print("原圖片尺寸%@",modImg?.size as Any)
if #available(iOS 15.0, *) {
modImg = modImg?.preparingThumbnail(of: CGSize(width: 220, height: 100))
print("**111111**變換后圖片原尺寸%@",modImg?.size as Any)
modImg?.prepareThumbnail(of: CGSize(width: 220, height: 100)){img in
print("###222###變換后圖片原尺寸%@",modImg?.size as Any)
}
}
//打印值
//原圖片尺寸%@ Optional((124.0, 120.0))
//**111111**變換后圖片原尺寸%@ Optional((220.0, 100.0))
//###222###變換后圖片原尺寸%@ Optional((220.0, 100.0))
其它
UILabel顯示的文字比設置font大,在iOS 15中,adjustsFontSizeToFitWidth為true時,高度不能跟設置的 Font 一樣大。固定寬度時文字顯示不全,之前正好顯示完文字,在iOS 15上可能顯示不全,增加寬度即可
demo:
oc代碼:https://github.com/xinsun001/iOS-15UI-oc.git
罪過,才發現swift的代碼上傳時只傳了文件夾,內容沒傳上,但是swift的代碼我本地已經找不到了,大家對著上面的代碼片段將就著看吧!