UIImageView的圖片居中問題
我們都知道在ios中,每一個UIImageView都有他的frame大小,但是如果圖片的大小和這個frame的大小不符合的時候會怎麼樣呢?在預設情況,圖片會被壓縮或者拉伸以填滿整個區域。
通過檢視UIView的屬性可以知道,view的contentMode屬性可以用來控制圖片的顯示情況。下面的設定可以讓圖片進行居中顯示。
imageView.contentMode = UIViewContentModeCenter;
這個居中是包括了,橫向和縱向都是居中。圖片不會拉伸或者壓縮,就是按照imageView的frame和圖片的大小來居中顯示的。
這裡有兩種情況:
1、圖片比view的區域更大。這個時候會擷取圖片的中間部位顯示在frame區域裡面。
2、圖片比view的區域更小。這個時候圖片會完整的顯示在frame的中間位置。
如果在預設情況,圖片的多出來的部分還是會顯示螢幕上。如果不希望超過frame的區域顯示在螢幕上要設定。clipsToBounds屬性。
imageView.clipsToBounds = YES;
最後一個問題,在iphone的retina螢幕上面,必須要設定,contentScaleFactor屬性。這個屬性的預設值是1。二對應的retina螢幕需要是2.可以通過下面的方式來設定:
[imageView setContentScaleFactor:[[UIScreen mainScreen] scale]];
但是用:
imageView.contentMode = UIViewContentModeCenter;
也有他的問題,就是在圖片不規則的時候,而且圖片的寬或者高比frame的寬高更小的時候,會出現空白的情況。
為了解決這種問題可以設定:
imageView.contentMode = UIViewContentModeScaleAspectFill;
這樣圖片會拉伸或者壓縮以適應frame的邊界,而且是適應更小的邊,這樣可以達成的效果是,圖片適應最小的邊鋪開顯示,更大的邊會超出frame,如果設定了clipsToBounds屬性為YES,那麼更大的邊就會被截斷。這樣達成更好的居中顯示效果,完整的程式碼如下:
UIImage *pic = [ UIImage imageNamed:@"IMG_0404.PNG"]; UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, 240, 100 )]; [imageView setImage:pic]; [imageView setContentScaleFactor:[[UIScreen mainScreen] scale]]; imageView.contentMode = UIViewContentModeScaleAspectFill; imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight; imageView.clipsToBounds = YES;
相關文章
- 關於UIImageView的顯示問題——居中顯示或者UIView
- htmlcss圖片居中HTMLCSS
- flex圖片居中效果Flex
- display:flex 圖片居中效果Flex
- Android圖片底部居中的ImageViewAndroidView
- 載入圖片的問題
- 設定圖片水平垂直居中
- 設定圖片和文字的垂直居中
- 淺談居中問題(水平居中、垂直居中、水平垂直居中)
- css垂直居中怎麼設定?文字上下居中和圖片垂直居中CSS
- Android:ImageView圖片縮放、居中AndroidView
- UIButton圖片文字控制元件位置自定義(圖片居右文字居左、圖片居中文字居中、圖片居左文字消失等)UI控制元件
- iOS專案開發實戰——UIImageView的使用與圖片顯示模式iOSUIView模式
- 小程式背景圖片問題
- canvas圖片跨域問題Canvas跨域
- 定位和居中問題
- 小程式canvas居中剪裁繪製圖片Canvas
- css實現文字和圖片居中效果CSS
- vue 關於圖片路徑的問題Vue
- 解決Hexo關於圖片的問題Hexo
- 資料庫顯示圖片的問題資料庫
- wangEditor上傳圖片問題
- 小程式圖片排列扭曲問題
- canvas 圖片、文字模糊問題Canvas
- CSS實現垂直居中的問題CSS
- css實現的圖片水平垂直居中程式碼CSS
- 有關laravel 上傳圖片訪問404的問題Laravel
- CSS元素(文字、圖片)水平垂直居中方法CSS
- CSS如何實現圖片上下垂直居中CSS
- iOS開發之imageView居中顯示圖片iOSView
- android imageview圖片居中技巧應用AndroidView
- KindEditor編輯器的圖片上傳問題
- 解決圖片訪問403 Forbidden問題ORB
- 跨域CORS圖片上傳問題跨域CORS
- nginx 解決圖片跨域問題Nginx跨域
- laravel上傳圖片路徑問題Laravel
- bootstrap-彈框問題-居中boot
- MATLAB讀取圖片遇到長寬的問題Matlab