web-dev-qa-db-ja.com

カスタムナビゲーションバーのスタイル-iOS

可能性のある複製：
iphoneナビゲーションバーに背景画像を追加する方法？

iOS-NY Timesはこのカスタムトップナビゲーションバーのスタイル設定をどのように行いましたか？

それに、一番下のものは？

ny-times

objective-ccocoa-touchiosuinavigationbar
53
phil swenson

編集：これは時代遅れです。 iOS5の場合、 muchより良い回答 、@ Jenoxによる。

ナビゲーションバーの完全なカスタムスタイル設定は驚くほど困難です。私が知っている最高の記事はセバスチャン・セリスによるこれです： http://sebastiancelis.com/2009/12/21/adding-background-image-uinavigationbar/

これはdrawRectをオーバーライドせず、なぜそれが良いことなのかについての良い説明が含まれています。また、彼のチュートリアルに従う必要はありません。完全なコードはこちらからダウンロードできます。 https://github.com/scelis/ExampleNavBarBackground

31
ludwigschubert

しかし、@ ludwigschubertのソリューションはiOS 5ではnot動作しません。また、-drawRect:。呼び出されないためです。
iOS 5では、ナビゲーションバーはUINavigationBarBackgroundとUINavigationItemViewで構成されています。それを機能させるには、他に2つの方法があります。

  1. カスタムイメージビューを、0ではなくindex 1に挿入します。これにより、ボタンの下にとどまりながらネイティブの背景画像の上に表示されます。

  2. IOS 5のIAppearance protocolを使用します。すべての背景画像を設定できます

[[UINavigationBar appearance] setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

または1つのナビゲーションバーのみ：

[navigationController.navigationBar setBackgroundImage:myImage forBarMetrics:UIBarMetricsDefault]

縦向きと横向きの両方のiPhoneアプリを開発するときは、必ず2つの画像（UIBarMetricsDefault＆UIBarMetricsLandscapePhone）を提供してください。

143
Christian Schnorr

@Jenoxの回答に追加するために、iOS 4.xxとiOS 5.xxの両方のデバイスをサポートする場合（つまり、DeploymentTargetが4.xxの場合）、外観プロキシへの呼び出しをラップする際には注意が必要です。実行時に「外観」セレクターが存在するかどうかを確認します。

あなたはそうすることができます：

//Customize the look of the UINavBar for iOS5 devices
if ([[UINavigationBar class]respondsToSelector:@selector(appearance)]) {
    [[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"NavigationBar.png"] forBarMetrics:UIBarMetricsDefault];
}

また、実装した可能性のあるiOS 4.xxの回避策を残す必要があります。 @ludwigschubertが述べたように、iOS 4.xxデバイスに「drawRect」回避策を実装している場合は、次のようにしてください。

@implementation UINavigationBar (BackgroundImage)
//This overridden implementation will patch up the NavBar with a custom Image instead of the title
- (void)drawRect:(CGRect)rect {
     UIImage *image = [UIImage imageNamed: @"NavigationBar.png"];
     [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

これにより、iOS 4とiOS 5の両方のデバイスでNavBarが同じように見えます。

24
bhavinb

これをviewDidLoadにコピーします。 iOS 5をチェックし、推奨される方法を使用します。それ以外の場合、iOSバージョン5.0未満のサブビューをnavBarに追加します。これは、カスタム背景画像に透明度がない場合に機能します。

float version = [[[UIDevice currentDevice] systemVersion] floatValue];
NSLog(@"%f",version);
UIImage *backgroundImage = [UIImage imageNamed:@"myBackgroundImage.png"];
if (version >= 5.0) {
    [self.navigationController.navigationBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
}
else
{
    [self.navigationController.navigationBar insertSubview:[[[UIImageView alloc] initWithImage:backgroundImage] autorelease] atIndex:1];
}
4
chazzwozzer

カテゴリを作成し、カスタムメソッドを作成して、画像、ボタン、スライダーなど、必要なビューを追加できます。敵の例、これは私が使用するコードです-カスタムbackgroundimage、backButton、Labelを追加します。

@interface UINavigationBar (NavigationBar)
-(void)setBarForCard;
@end


@implementation UINavigationBar (NavigationBar)

-(void)setBarForCard
{

    UIImageView *aTabBarBackground = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"BarImage"]];
    aTabBarBackground.frame = CGRectMake(0,0,self.frame.size.width,44);
    [self addSubview:aTabBarBackground];
    [self sendSubviewToBack:aTabBarBackground];
    [aTabBarBackground release];

    UIButton *backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
    backBtn.frame =CGRectMake(10, 8, 60, 30);
    [backBtn addTarget:self action:@selector(back:)forControlEvents:UIControlEventTouchUpInside];
    [backBtn setImage:[UIImage imageNamed: @"Back"] forState:UIControlStateNormal];
    [self addSubview:backBtn];

    UILabel *calendar = [[UILabel alloc]init];
    calendar.frame = CGRectMake(105, 13, 109, 21);
    calendar.text = @"Calendar"
    calendar.textColor = [UIColor whiteColor];
    calendar.textAlignment = UITextAlignmentCenter;
    calendar.shadowColor = [UIColor grayColor];
    calendar.shadowOffset = CGSizeMake(0, -1);
    calendar.font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:20];
    calendar.backgroundColor = [UIColor clearColor];    
    [self addSubview:calendar];


}

そして、どのView Controllerでも、[self.navigationController.navigationBar setBarForCard];を呼び出すことでナビゲーションバーを変更できます

これはIOS 4とIOS 5の両方で機能します

2
Nikita Pestrov

これはiOS 5のより良い方法です

if ([self.navigationController.navigationBar respondsToSelector:@selector(setBackgroundImage:forBarMetrics:)] ) {
 UIImage *image = [UIImage imageNamed:@"navBarImg.png"];
 [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
}
1
iOS Monster

ナビゲーションバーの色合いを変更して色を変更したり、ナビゲーションバービューで画像を使用したりできます。一番下のバーでは、3つのカスタムボタンのあるビューを使用していると思います。

0
saadnib