web-dev-qa-db-ja.com

iOS7で戻るボタンを適切に配置する方法

このコードを使用して、カスタム画像をアプリ全体の戻るボタンとして使用しました。

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back"]];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back"]];

画像の寸法は30 x 30です。

コードは画像を戻るボタンとして追加しますが、次の画像に示すように、位置が正しくありません。

back button not correct positioned

画像の寸法を変更せずに画像を適切に配置する方法に関するアイデア（少なくとも画像の視覚部分（円+矢印））

編集：

iOS7でスワイプ/バックジェスチャを強制的に無効にするため、カスタムの戻るボタンを使用したくない

objective-cios7uinavigationbaruinavigationitem
32
Bernat

[〜＃〜] edit [〜＃〜]
このトリックを見つけたかもしれません（iOS 7 Design Resource-UIKit User Interface Catalogで）。
下バーボタンアイテム

レンダリングモードをUIImageRenderingModeAlwaysOriginalに明示的に設定しない限り、バーボタンイメージはナビゲーションバー内のテンプレートイメージとして自動的にレンダリングされることに注意してください。詳細については、テンプレート画像を参照してください。

テンプレート画像の下に、UIImageRenderingModeを指定するコードがあります。

UIImage *myImage = [UIImage imageNamed:@"back"];
UIImage *backButtonImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];  
// now use the new backButtomImage
[[UINavigationBar appearance] setBackIndicatorImage:backButtonImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backButtonImage];

位置合わせインセットを使用してUIImageを作成してから、Back Indicator画像を設定してください。

UIEdgeInsets insets = UIEdgeInsetsMake(10, 0, 0, 0); // or (0, 0, -10.0, 0)
UIImage *alignedImage = [[UIImage imageNamed:@"back"] imageWithAlignmentRectInsets:insets];  
[[UINavigationBar appearance] setBackIndicatorImage:alignedImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:alignedImage];

UINavigationBarタイトルテキストの位置を調整することもできます

[[UINavigationBar appearance] setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics];
21
race_carr

提案を1つだけ実行してレイアウトを修正し、iOS 7の「バックジェスチャ」を失った後、 UIScreenEdgePanGestureRecognizer で修正します。

UIScreenEdgePanGestureRecognizerは、画面の端の近くから始まるパン（ドラッグ）ジェスチャを探します。システムは、場合によっては画面のエッジジェスチャを使用して、View Controllerの移行を開始します。このクラスを使用して、独自のアクションに同じジェスチャー動作を複製できます。

8
Rivera

以下の編集を参照してください!!!

IOS7でカスタムバックボタンを作成しました。鉱山には矢印があり、その上に言葉があります。パワンの提案は良いスタートだと思います。使用できるカスタム画像で戻るボタンを作成するには、

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Back" style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];
[backButton setBackgroundImage:finalImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

self.navigationItem.leftBarButtonItem = backButton;

私の画像finalImageは2つの異なる画像の合成ですが、「戻る」画像を使用するだけです。しかし、そこに問題があると思います。私の画像はコンポジットでした。コンポジットも作成したいかもしれませんが、背面アイコンの上に明確なスペースを置いてください。アイコンの右側に明確なスペースを置いて、スペースを調整しました。コードは次のとおりです。

UIImage *arrow = [UIImage imageNamed:@"back.png"];
UIImage *wordSpace = [UIImage imageNamed:@"whiteSpace.png"];
CGSize size = CGSizeMake(arrow.size.width + wordSpace.size.width, arrow.size.height);
UIGraphicsBeginImageContext(size);
[arrow drawInRect:CGRectMake(0, 0, arrow.size.width, size.height)];
[wordSpace drawInRect:CGRectMake(arrow.size.width, 0, wordSpace.size.width, wordSpace.size.height)];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

Image wordSpaceは、Photoshopで作成した透明なpngなので、新しい戻るボタンの画像は引き伸ばされませんでした。アイコンを少し押し下げるために、透明なpngを上部に配置することをお勧めします。あなたが調整すべきだと思うもののために、photoshopでそのsize.heightを作成します。あなたはこれで少し困る必要があるかもしれません。そして、アイコンと空きスペースに合うようにCGSizeを変更してください。

私の言葉は少しずれていたので、私は見た

[backButton setTitlePositionAdjustment:UIOffsetMake(-20, 0) forBarMetrics:UIBarMetricsDefault];

できる限り見栄えを良くするために、その行で少し遊んでみなければなりませんでしたが、最終的に-20で望んでいたものが得られました。私の場合は2番目の変数である0も調整しました。これにより、実際のアイコンが移動しました。 -5はアイコンをずっと下に置きますが、クリアpngからの別のオプションです。

次に、実際の戻るボタンにしたいという事実に対処します。私が投稿したコードの最初の行を見てください。ボタンのアクションは@selector（backButtonClicked）です。だからあなたがする必要があるのは、その方法を作ることであり、あなたは行ってもいいはずです！

- (void)backButtonClicked
{
  NSLog(@"going back");
  [self.navigationController popViewControllerAnimated:YES];
}

これが少し役立つことを願っています。

enter image description here

編集*****

私は自分のコードで少し遊んでいて、戻るアイコンを移動するより良い方法を見つけました。私はあなたと同じものを持っていなかったので、船のホイールを使用しましたが、それは同じように機能します。

タイトルが本当に必要ないので、このコードでボタンを作成できます。

UIImage *image = [UIImage imageNamed:@"781-ships-wheel.png"];

UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(backButtonClicked)];

アイコンの名前で781のものを変更するだけです。その後、次のようにして移動できます。

[backButton setImageInsets:UIEdgeInsetsMake(20, 0, -20, 0)];

この写真を見てください。

pic one

これにより、アイコンがかなり下に表示されますが、アイデアを示したいと思います。エッジインセットの番号は、上、左、下、および右です。そのように移動する必要がない場合は、左右に触れないでください。上下を変更します。ただし、私がやったように20ポイント下に移動する必要がある場合（あまりにも多く）、下側のネガをオフセットする必要があります。そうしないと、アイコンが圧縮されます。これは、すべてゼロの場合の外観です。

pic with zeros

そのため、好きな場所に移動できますが、@ selector（backButtonClicked）を設定して、実際の戻るボタンのように機能させる必要があります。

6
Douglas

これはSwift 2バージョンです。最も簡単な方法はこのようなものです。このコードをAppDelegateに入れてください。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        let navigationBarAppearace = UINavigationBar.appearance()
        let image = UIImage(named: "back-btn")
        navigationBarAppearace.backIndicatorImage = image
        navigationBarAppearace.backIndicatorTransitionMaskImage = image

        return true
    }

戻るボタンに背景色がある場合、正しく機能しない可能性があります。

次のように、解像度ごとにアイコンをasset folderに追加します。 enter image description here

5
fatihyildizhan

これを試すことができます

self.navigationItem.leftBarButtonItem.imageInsets = UIEdgeInsetsMake(0, 0, 10, 0);
3
Erhan

問題は、画像が高すぎることです。これを証明するには、まず次のコードを試してください：

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,20), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

元気そう20から30 2つのCGSizeMake呼び出しで：

UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(6,0,4,20));
UIImage* im = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorImage = im;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(10,30), NO, 0);
UIImage* im2 = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.navbar.backIndicatorTransitionMaskImage = im2;

アイコンが高すぎます。

したがって、画像の高さを20ピクセルにすれば、すべてうまくいきます。

3
matt
UIEdgeInsets insets = UIEdgeInsetsMake(0, 0, -2, 0); // or (2,0,0,0)
UIImage *backArrowImage = [[UIImage imageNamed:@"back"] imageWithAlignmentRectInsets:insets];

[[UINavigationBar appearance] setBackIndicatorImage:backArrowImage];
[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:backArrowImage];
1
carmen_munich