web-dev-qa-db-ja.com

次/前のキーボードツールバーiOS7

現在、キーボードツールバーの次/前のボタンを、ナビゲーションコントローラーに戻って戻るための、新しい洗練されたiOS 7の戻るボタン/進むボタンに設定しようとしています。これが私が試していることです。退屈な静的テキストの代わりにシステムバーのボタン項目を使用するにはどうすればよいですか？

[self setToolbar:[[UIToolbar alloc] initWithFrame:self.frame]];
        [self.toolbar setBarStyle:UIBarStyleDefault];
        [self.toolbar setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth)];
        [self addSubview:self.toolbar];

        [self setSegmentedControl:[[UISegmentedControl alloc] initWithItems:@[ NSLocalizedStringFromTable(@"Previous", @"BSKeyboardControls", @"Previous button title."),
                                                                               NSLocalizedStringFromTable(@"Next", @"BSKeyboardControls", @"Next button title.") ]]];

これが今の様子です：

enter image description here

これが私がそれをどのように見せたいかです： enter image description here

実際に画像を使用せずにこれらのシステムアイテムにアクセスする方法に関するアイデアはありますか？私はその正確なiOS 7バックバーボタンアイテムを知っていますが、ツールバーでそれにアクセスする方法がわかりません。私はどこでも検索しました。それが役立つ場合は、BSKeyboardControlsを使用しています。

編集：2番目の画像とまったく同じようにするには、Joshuaから提供された画像を使用し、back @ 2x.pngおよび[email protected]としてxcode projに保存します。 Chunのコードを使用しますが、@ "back @ 2x"ではなく、imageNamed：@ "back"のような画像を取得するメソッドを必ず呼び出してください。これでiOS 7の戻るボタンと進むボタンができました:)

EDIT2：次/前の矢印ボタンのように見えるようにするには、正しい実装方法で次のカスタマイズを使用します。

[self.segmentedControl setWidth:50 forSegmentAtIndex:0];
[self.segmentedControl setWidth:38 forSegmentAtIndex:1];

negativeSeparator.width = -19;

EDIT3：<>矢印の付いたツールバーは、デフォルトですべてのUIWebViewに付属しており、テキストフィールドをタップすると表示されます。

誰かがサンプルプロジェクトに興味がある場合は、お知らせください。リンクをアップロードします。

EDIT4：2014年5月24日の時点で、BSKeyboardControlsはデフォルトでこの機能を備えています。

iosobjective-ccocoa-touchios7
23
Josue Espinosa

1）最新のファイルを次からダウンロードします： https://github.com/simonbs/BSKeyboardControls

2）戻る/次へボタンの画像をインポートします。これらはあなたが好きなものにすることができ、適切に見えるように適切なサイズを設定できます。ジョシュアには良いセットがあります。私は「keyboardBack.png」と「keyboardForward.png」として保存しました

3）BSKeyboardControls.mで、initWithFields：fieldsを更新します。ここでは、戻る/次へボタンの幅を設定するなどのカスタマイズを行うことができます。スクリーンショットを追跡するために、ここでも[完了]ボタンを削除しましたが、元に戻すこともできます。

- (id)initWithFields:(NSArray *)fields
{
    if (self = [super initWithFrame:CGRectMake(0.0f, 0.0f, 320.0f, 44.0f)])
    {
        // Creates toolbar
        [self setToolbar:[[UIToolbar alloc] initWithFrame:self.frame]];
        [self.toolbar setBarStyle:UIBarStyleDefault];
        [self.toolbar setAutoresizingMask:(UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth)];
        [self addSubview:self.toolbar];

        // Import images
        UIImage *backImage = [[UIImage imageNamed:@"keyboardBack"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        UIImage *forwardImage = [[UIImage imageNamed:@"keyboardForward"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

        // Create segmentedcontrol
        self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[backImage, forwardImage]];
        self.segmentedControl.tintColor = [UIColor clearColor];

        // Set button widths
        [self.segmentedControl setWidth:50 forSegmentAtIndex:0];
        [self.segmentedControl setWidth:50 forSegmentAtIndex:1];

        // Other BSKeyboardControls stuff
        [self.segmentedControl addTarget:self action:@selector(segmentedControlValueChanged:) forControlEvents:UIControlEventValueChanged];
        [self.segmentedControl setMomentary:YES];
        [self.segmentedControl setEnabled:NO forSegmentAtIndex:BSKeyboardControlsDirectionPrevious];
        [self.segmentedControl setEnabled:NO forSegmentAtIndex:BSKeyboardControlsDirectionNext];
        [self setSegmentedControlItem:[[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl]];
        [self setVisibleControls:(BSKeyboardControlPreviousNext)];
        [self setFields:fields];
    }

    return self;
}

4）ツールバーの左側のパディングが少なすぎるので、toolbarItems：にBSKeyboardControls.mの負のセパレーターを追加して修正できます。

- (NSArray *)toolbarItems
{
    NSMutableArray *items = [NSMutableArray arrayWithCapacity:3];
    if (self.visibleControls & BSKeyboardControlPreviousNext)
    {
        UIBarButtonItem *negativeSeperator = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace
                                                                                           target:nil
                                                                                           action:nil];
        negativeSeperator.width = -12;

        [items addObject:negativeSeperator];
        [items addObject:self.segmentedControlItem];

    }

    if (self.visibleControls & BSKeyboardControlDone)
    {
        [items addObject:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]];
        [items addObject:self.doneButton];
    }

    return items;
}

注：正確な仕様に合わせたボタンの幅とパディングはおそらくありませんが、好みに合わせて調整できます！

6
Chun

これらは、ツールバーで使用される画像です。戻るおよび進むボタンの画像：

enter image description here

enter image description here

21
Joshua

Joshuaが共有するアイコンを使用してから、以下のコードを試してみてください。ここには完了ボタンを追加していません。

UIImage *backImage = [[UIImage imageNamed:@"backImage"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *forwardImage = [[UIImage imageNamed:@"forward"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[backImage, forwardImage]];
[self.segmentedControl addTarget:self action:@selector(segmentedControlChangedState:) forControlEvents:UIControlEventValueChanged];
self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
self.segmentedControl.tintColor = [UIColor clearColor];
UIBarButtonItem *aSegmentedControlBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];
[self setItems:@[aSegmentedControlBarButtonItem, self.flexibleSpace]];
8
Abhinav

Edgeでの生活を気にしない場合は、Appleの文書化されていないシステムアイテムを使用してiOS 7の外観を実現できます。左と右のバーボタンアイテムです。

    [self setDoneButton:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:105 target:nil action:nil]];
    [self setDoneButton:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:106 target:nil action:nil]];

ソース： http://iphonedevwiki.net/index.php/UIBarButtonItem

5
Steve Moser

この素晴らしい tool を@iftekharで使用し、次の前のボタンの代わりに画像を与える必要性に応じてIQSegmentedNextPreviousをカスタマイズできます。

2
Mayur Shrivas

Xcode 7.3を使用すると、バーアイテムのtitleとして記号を入力することもできます。これは、コードとInterface Builderの両方で機能します。

  • 記号を表示する場所にカーソルを置きます（たとえば、IBのtitleボックスまたはコードの引用符内）。
  • Xcodeのメニューで、[編集]、[絵文字と記号]の順にクリックします。 （または、control-command-spaceを押して、文字のリストを表示します。）
  • 検索ボックスに、lessまたはgreaterと入力します。
  • 次に、必要な記号を選択します。

小なり記号と大なり記号は、デフォルトではツールバーの青色になっています。

コードで：

backButton.title = "＜"

IBでは：

control-command-click to bring up Emoji & Symbols

1
leanne

これを使って： https://github.com/simonbs/BSKeyboardControls

しかし、iOS 7でフラット化されたセグメント化されたコントロールを使用します。

編集：セグメントのテキストを変更するだけです：

  [self setSegmentedControl:[[UISegmentedControl alloc] initWithItems:@[@"<",@">") ]]];

これは最もエレガントではないかもしれません。 （この正確なコードがコンパイルされるかどうかさえわかりませんが、要点はわかります）

0
Shaunti Fondrisi