iPhotoのような画像スクロールバーを作成します。 パート2

前のパートでは、一般的に見苦しいスクロールバーを作成しました。さらに、その幅を超えるコンテンツでは正常に動作せず、デバイスの回転に応答しません。

今日はこれらの欠点を修正しようとします。



ImageScrubberAppbarelegateプロトコルからImageScrubberToolbarDelegateを削除し、メソッドを実装します-(void)imageSelected:(int)anIndexおよびImageScrubberViewController * viewControllerフィールドを追加します。



次に、新しいInterfaceBuilderドキュメントを作成し、ファイルの所有者としてImageScrubberViewControllerを選択し、UIViewとImageScrubberToolbarをUIViewの子として追加します。



「クラスファイルの書き込み」コマンドを選択し、IBOutlet ImageScrubberToolbar * imageScrubberToolbarフィールドをImageScrubberViewControllerクラスに追加し、ImageScrubberToolbarDelegateをImageScrubberViewControllerプロトコルに追加し、メソッドの実装を追加します-(void)imageSelected:(int)anIndex



ここで、ImageScrubberViewControllerクラスの(void)viewDidLoadメソッドを実装します。



[super viewDidLoad];



NSString * resourcePath = [[NSBundle mainBundle] resourcePath];





NSArray * imagesArray = [NSArray arrayWithObjects: [UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Aurora.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Gentle Rapids.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Ladybug.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Pond Reeds.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Rock Garden.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Rocks.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snow Leopard Prowl.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snow Leopard.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Snowy Hills.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Stones.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Summit.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Tahoe.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Tranquil Surface.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Water.jpg" ]],

[UIImage imageWithContentsOfFile:[NSString stringWithFormat: @"%@/%@" ,resourcePath, @"Nature/Zebra.jpg" ]],

nil];



[imageScrubberToolbar setImagesArray:imagesArray];




* This source code was highlighted with Source Code Highlighter .








実装を追加します-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation-このメソッドはYES(デバイスの任意の方向が受け入れ可能であることを示す)のみを返します-(void)didRotateFromInterfaceOrientation(UIInterfaceOrientation-を呼び出します)クラスImageScrubberToolbar。



次に、ImageScrubberToolbarクラスのフィールド-int position-を追加して、現在選択されている画像の番号とint leftを保存し、現在の左インデントを保存します。



タッチ処理メソッドの実装に移りましょう。

メソッド-(void)touchesMoved:(NSSet *)withEvents:(UIEvent *)イベントおよび-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)イベントは変更されません。

変更されます-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event-タッチの数のみをチェックし、メソッドを呼び出します-(void)imageSelected:(int)ImageScrubberToolbarDelegateクラスのanIndex。



-(void)再構築メソッドは、画像の配列が変更されたとき、またはデバイスが回転したときに呼び出されます。

このメソッドは、(void)calculateLeftAndUpdatePositions:(BOOL)引数YESで回転するだけを呼び出します。



次に、スクロールを追加するメソッドを実装します。



float w = [imagesArray count]*SMALL_SIZE + 2.f*SIZE_DIF;



BOOL calculated = NO;

if (w > self.frame.size.width)

{

UIView * v = [self.subviews objectAtIndex:position];

if (v.frame.origin.x + SMALL_SIZE + SIZE_DIF > self.frame.size.width)

{

left = self.frame.size.width - (position + 1)*SMALL_SIZE - SIZE_DIF;

calculated = YES;

}

else if (v.frame.origin.x < SIZE_DIF)

{

left = -position*SMALL_SIZE + SIZE_DIF;

calculated = YES;

}

}

if (rotated && !calculated)

{

left = (self.frame.size.width - w + SMALL_SIZE)/2.f;

if (left < SIZE_DIF)

{

left = SIZE_DIF;

}

}

[selectionImageView setImage:[imagesArray objectAtIndex:position]];

[self updatePositions];




* This source code was highlighted with Source Code Highlighter .








残りの変更は軽微であり、理解と実装が簡単です 。そのため、例をダウンロードしてImageScrubber2を使用してください



私にとっては、最終結果は非常に素晴らしいものに見えます。

画像







All Articles