2012-11-14 86 views
3

我想創建一個簡單的自定義加載欄,其中包含兩個圖像:一個圖像用於純色背景,一個圖像用於對角線。我是iOS新手,所以我的方法是創建一個自定義UIView,它使用兩個UIImageView,每個圖像一個,一個動畫塊將對角線圖像從左向右移動。創建一個帶圓角邊緣的自定義加載欄

我正在採取這種方法,因爲我已經熟悉UIImageViews和動畫塊。我的問題是...

  1. 你會建議更好的方法嗎?我對層不熟悉,並且由於時間限制,現在不想閱讀它們,但是我願意,如果它能提供更好的實現。
  2. 我該如何「圓」加載欄的兩端?以我目前的做法,這就是我要得到...

enter image description here

非常感謝你的智慧!

+0

如何創建映像在另一個像Photoshop這樣的編輯器中,並且有一個UIImageView,而不是在運行時嘗試組合兩個? – Martol1ni

+0

我需要兩個圖像來創建對角線動畫 – BeachRunnerFred

回答

1

有你 '純色背景' 視圖是對 '對角線' 的ImageView的容器視圖。 (對角線是背景子視圖)

然後在對角線子視圖上設置'clipsToBounds'= YES並根據需要重新調整框架。 (假設您的對角線imageView代表100%進度)

如果您的加載欄imageView沒有圓角,則可以使用CALayer的cornerRadius屬性。

imageView.layer.cornerRadius = 6.0f; 
+0

這聽起來很有希望,我會試試看,謝謝! – BeachRunnerFred

0

作爲iOS新手,您最好使用UIProgressView。它可能看起來不太好,但是它具有相同的目的並且會更容易。 UIActivityIndi​​catorView也是一個像齒輪一樣旋轉的圓。兩者比自定義解決方案更易於使用。

參考:http://developer.apple.com/library/ios/#documentation/uikit/reference/UIProgressView_Class/Reference/Reference.html

http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIActivityIndicatorView_Class/Reference/UIActivityIndicatorView.html

+0

不幸的是,自定義外觀是必要的 – BeachRunnerFred

2

使用以下兩種方法可以實現這一目標:

1導入這個類到你的代碼#import <QuartzCore/QuartzCore.h>

然後將以下兩行添加到-(void)viewDidLoad方法時的觀點是這樣的酒吧將被舍加載或者您可以將它添加到您想要開始對它進行四捨五入的位置。

barImageView.layer.cornerRadius = 10.0f; 
barImageView.layer.masksToBounds = YES; 

2 - 另一種方法是使用下面的代碼:

-(void)roundCorners:(UIRectCorner)rectCorner forView:(UIView*)view 
{ 
   UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds 
                                                  byRoundingCorners:rectCorner 
                                                        cornerRadii:CGSizeMake(20.0, 20.0)]; 
   // Create the shape layer and set its path 
   CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
   maskLayer.frame = view.bounds; 
   maskLayer.path = maskPath.CGPath; 
    
   // Set the newly created shape layer as the mask for the image view's layer 
   view.layer.mask = maskLayer; 
} 

添加以下行和viewDidLoad中或要開始四捨五入酒吧

[self roundCorners:UIRectCornerTopRight|UIRectCornerTopLeft|UIRectCornerBottomRight|UIRectCornerBottomLeft forView:[self.view.subviews objectAtIndex:0] withAngle:10];