圖片適配、九宮切圖


01、貼圖與美化:圖片適配、九宮切圖
 
1、圖片的適配
1)屏幕分類
從顯式的角度:非Retina 和 Retina(視網膜屏 高清屏)
從設備的屏幕尺寸角度:對角線長度為3.5寸 4寸 4.7寸 5.5寸
不同的設備的分辨率不同,為了統一高清屏顯示時一個統一的坐標系,所以使用 點  作為坐標系的單位,編寫代碼設計界面時使用點坐標系即可。
在相同大小區域內,根據不同屏幕的種類,准備多套圖即可.圖片名稱 用 @數字x的方式來區分用於適配哪種屏幕,系統可以自動判斷加載哪一張。
如:
sun.png
sun@2x.png
sun@3x.png
當我們選圖是只會顯示一個sun名稱的圖片。
 
2)設置AppIcon
在images.xcassete中設置AppIcon,將不同的尺寸圖片直接拖拽到小方格中即可,如果尺寸不匹配會有警告。
 
3)閃屏Launch Screen
在images.xcassete中設置LaunchImage,將不同的尺寸圖片直接拖拽到小方格中即可,如果尺寸不匹配會有警告。
 
注:在Xcode6中設置閃屏圖片在資源庫中出現
 
 
2、九宮切片
2.1 為什么有九切片?
對於一些形式簡單,內容有規律變化的背景圖來說,需要根據實際的尺寸動態的改變圖片的大小,而不是由人工作圖的方式來完成圖片尺寸的調整
2.2 九切片的核心理念
保證分割線以外的四個角不變,其余中間部分可以自動根據設置進行復制或拉伸,再拼接上四個角以后,圖片的尺寸就會被放大
2.3 如何實現九切片
方式一:使用xcode工具進行切片
在圖片資源庫中,選中圖片,點擊 start slicing,后選擇 中間按鈕,橫豎三條線調整位置即可
對於橫線來說:
第一條橫線以上部分保留
第三條橫線以下部分保留
第二條和第一條之間部分復制或拉伸
第二條和第三條之間部分被切掉
豎線同理
方式二:使用代碼的方式實現切片
UIImage *image = [[UIImage imageNamed:@"message_i"] resizableImageWithCapInsets:UIEdgeInsetsMake(16, 16, 16, 30) resizingMode:UIImageResizingModeStretch];
2.4 什么時候使用切片技術?
大部分情況都是針對為視圖設置背景圖時,需要根據視圖所占據的實際區域,調整背景圖大小.
當美工給的圖片較小,內容簡單,可重復性疊加時,優先想到切圖技術
 
3、控件的美化
1)按鈕
按鈕的層次:一共有兩層,一層撲在下面做背景圖,一層在背景圖之上,包含左右兩部分,默認左邊是圖片,右邊是文字。
 
問:如何抉擇為按鈕添加的圖片是背景圖還是image?
答:圖片上可以疊加文字,那么這個圖片就是背景;如果圖片和文字沒有上下層的關系,只是並列(上下並列  左右並列),那么這個圖片就是image。
3.2 按鈕的可用狀態
Normal:擺在那不動
HighLighted:按住不松手
Selected: 設置按鈕的selected屬性為YES
Disabled: 設置按鈕的enable屬性為NO時
這四種狀態下,都可以設置各自狀態下按鈕顯示的文本和圖片
 
2)滑塊
設置三個屬性:
setMaximumTrackImage設置未滑動到的區域的背景圖
setMinimumTrackImage設置滑動過的區域的背景圖
setThumbImage:設置 滑動中間圓鈕的圖片
 
需要通過代碼設置:
[self.slider setMaximumTrackImage:[UIImage imageNamed:@"playing_volumn_slide_foreground"] forState:UIControlStateNormal];
[self.slider setMinimumTrackImage:[UIImage imageNamed:@"playing_volumn_slide_bg"] forState:UIControlStateNormal];
[self.slider setThumbImage:[UIImage imageNamed:@"playing_volumn_slide_sound_icon"] forState:UIControlStateNormal];
 
4、tintColor
4.1 什么是tintColor?
一個可以從父容器傳遞給自視圖的顏色屬性.只要在父視圖級別上設置一個顏色,那么父視圖中包含的所有子視圖在沒有自己指定顏色的時候,就都會使用父視圖設置的tintColor,可以實現批量的顏色設置的效果
4.2 作用
統一風格
4.3 如何使用
只對一個界面做統一顏色設置,那么就選中控制器中自帶的視圖,修改這個視圖的tintColor,則該界面所有控件都會應用這個設置
對整個應用做所有界面的統一顏色設置,那么需要在appDelegate的啟動方法中,設置window的tintColor即可
注意:
a.如果某個視圖自己設置過tintColor,那么該視圖就不再使用父視圖中得tintColor   
b.有些視圖會有自己特定的tintColor屬性, 如,導航欄就有 barTintColor特有的顏色設置,那么此時該屬性也不受父容器tintColor的影響
也就是說,首先使用自己的tintColor。
 
5、UIAppearance外觀類
1)是什么
一種可以定義外觀的特殊的類,可以針對指定的某一類控件做批量的外觀設置(字體  顏色  圖片 …)實現應用中出現的某種控件實例的統一外觀的定制。
如:希望應用中所有按鈕都有紅色背景,那么使用UIAppearance可以對UIButton這種類型做風格的設置,設置完成后,該應用中得所有按鈕就會按照設定的樣式 統一改變外觀
2) 如何使用
step1 : [類型名  appearance]  獲取到該類型的UIAppearance實例
step2: 針對類型的外觀做 屬性設置
 
// 對UIButton這種類型做背景色的設置
[[UIButton appearance] setBackgroundImage:[UIImage imageNamed:@"delete_btn"] forState:UIControlStateNormal];
 
 
6、導航欄
6.美化導航欄Navigation Bar
a.設置背景色
b.設置背景圖
c.設置左右按鈕中的文字顏色
d.設置中間標題的文字樣式
e.設置返回按鈕中圖標的樣式
f. 設置帶有導航時,狀態欄中的文字顏色
 
7.美化標簽欄Tab Bar 和 Tab Bar Item
a.TabBar的整體的背景圖
b.每一個單獨的item被選中時的背景圖
c.每一個單獨的item的文字的樣式及位置
1)美化代碼寫在哪里
寫在AppDelegate的didFinishLaunchingWithOptions方中
用到 UIAppearance,對整個應用中得導航和tabBar做風格設定
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self customNavigationBar];
    [self customTabBar];
    return YES;
}
-(void)customTabBar{
    UIEdgeInsets standardEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);
// 整個tabBar的背景圖
    [[UITabBar appearance] setBackgroundImage:[[UIImage imageNamed:@“tabbar_back"
resizableImageWithCapInsets:standardEdgeInsets resizingMode:UIImageResizingModeStretch]];
//設置tab bar上每一個項被選中時的背景圖
    [[UITabBar appearance] setSelectionIndicatorImage:[UIImage imageNamed:@"tabbar_selected_back"]];
//設置tab bar item上文字的位置 大小  顏色
    [[UITabBarItem appearance] setTitlePositionAdjustment:UIOffsetMake(0, -1)];
    [[UITabBarItem appearance]setTitleTextAttributes:@{
            NSForegroundColorAttributeName:[UIColor lightGrayColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:12]
    } forState:UIControlStateNormal];
    [[UITabBarItem appearance]setTitleTextAttributes:@{
        NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont boldSystemFontOfSize:12]
    } forState:UIControlStateSelected];
}
//美化導航欄
-(void)customNavigationBar{
//設置背景色
    [[UINavigationBar appearance] setBarTintColor:[UIColor blackColor]];
//設置有導航條時,狀態欄的文字顏色
    [[UINavigationBar appearance] setBarStyle:UIBarStyleBlack];
//設置導航條的背景圖
    //[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBarDefault"] forBarMetrics:UIBarMetricsDefault];
//設置左右按鈕上的文字顏色
    [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
//設置返回按鈕中出現的箭頭樣式
    [[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn"]];
    [[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn"]];
//設置中間的title的文字樣式
    NSShadow *shadow = [[NSShadow alloc]init];
    shadow.shadowColor = [UIColor redColor];
    shadow.shadowOffset = CGSizeMake(0, 1);
    NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:shadow,NSShadowAttributeName,[UIColor whiteColor],NSForegroundColorAttributeName,[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21],NSFontAttributeName,nil];
    [[UINavigationBar appearance] setTitleTextAttributes:dictionary];
}
 

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com