web-dev-qa-db-ja.com

セグメント化されたコントロールをナビゲーションバーに追加し、ボタンでタイトルを保持する

セグメント化されたコントロールをナビゲーションバーに追加するだけでなく、iOS 7 Appstoreの購入済みセクションのようにタイトルとボタンも保持したい（ example ）

セグメント化されたコントロールをタイトルビューとして追加し、タイトルとしてプロンプトを使用しようとしましたが、ボタンはセグメント化されたコントロールと同じレベルにあります。

iosuinavigationbaruisegmentedcontrol
26
sangi93

ナビゲーションバーを使用してもうまくいかないようであるため、別のアプローチを使用して問題を解決しようとしました（AppStoreアプリがプライベートAPIを使用しているためかもしれませんが、確実に伝えるには十分な知識がありません...）とにかく私は単に、セグメント化されたコントロールを追加したナビゲーションバーのすぐ下にあるツールバーを使用しました。これらはすべて通常のUIViewController内にあります。

ストーリーボードでは次のようになります。 Storyboard

そして、これはシミュレータの結果です：

Simulator

ツールバーが使用する垂直方向のスペースを考慮して、テーブルビューを下にオフセットするよう注意してください。お役に立てれば！

12
neural5torm

私は2つの解決策を見つけました：

1）neuro5tormで示唆されているように、ナビゲーションバーと同じ背景色でセグメント化されたコントロールをUIViewに追加できます。

この方法でUINavigationBarのヘアラインを削除できます。

for (UIView *view in self.navigationController.navigationBar.subviews)
{
    for (UIView *view2 in view.subviews)
    {
        if ([view2 isKindOfClass:[UIImageView class]])
        {
            [view2 removeFromSuperview];
        }
    }
}

これは、半透明ではないナビゲーションバーでは問題ありません。



半透明ナビゲーションバーが必要な場合：
2）UINavigationBarをサブクラス化して、sizeThatFitsをオーバーライドしてより高いバーを作成します

- (CGSize)sizeThatFits:(CGSize)size
{
    size.width = self.frame.size.width;
    size.height = your height (probably 88.0f);
    return size;
}


カスタムナビゲーションバーを使用するには：

UINavigationController *navController = [[UINavigationController alloc] initWithNavigationBarClass:[YouNavigationBar class] toolbarClass:nil];
[navController setViewControllers:@[viewController]];


タイトルとボタンのアイテムは下部にあります。それらの垂直位置を調整します（カスタムナビゲーションバーのinitまたは外観プロキシ経由）

// Title view
[self setTitleVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

// Button item as icon/image 
[[UIBarButtonItem appearanceWhenContainedIn:[YourCustomNavigationBar class], nil] setBackgroundVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

UIBarButtonItemクラスリファレンスを見てください。setTitlePositionAdjustmentやその他の戻るボタンのメソッドもあります


セグメント化されたコントロールを作成したら、ナビゲーションバーに追加します

[self.navigationController.navigationBar addSubview:segmentedControl];


セグメント化されたコントロールは上部にあります。カスタムナビゲーションバーでdidAddSubviewをオーバーライドして、垂直位置を調整します

- (void)didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if ([subview isKindOfClass:[UISegmentedControl class]])
    {
        CGRect frame = subview.frame;
        frame.Origin.y += your extra height (probably 44.0f);
        subview.frame = frame;
    }
}
15
user370773

UISegmentedControlのあるナビゲーションバーは、Appleサンプルコード： https://developer.Apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html =

このコードの私の解釈は次のとおりです（プログラムで作成）：

// File MySegmController.h
@interface MySegmController : UIViewController
@end

// File MySegmController.m
#import "MySegmController.h"

@interface MyNavBarView : UIView
@end

@interface MySegmController ()<UITableViewDataSource, UITableViewDelegate>
{
    UISegmentedControl* _segm;
    UITableView* _table;
}
@end

#define SEGM_WIDTH 250

@implementation MySegmController

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"Title";

    float w = self.view.bounds.size.width;

    NSArray* items = [[NSArray alloc] initWithObjects: @"One", @"Two", @"Three", nil];
    _segm = [[UISegmentedControl alloc] initWithItems: items];
    [items release];
    [_segm sizeToFit];
    _segm.frame = CGRectMake((w - SEGM_WIDTH) / 2, 0, SEGM_WIDTH, _segm.bounds.size.height);
    _segm.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    _segm.selectedSegmentIndex = 0;

    MyNavBarView* topView = [[MyNavBarView alloc] initWithFrame: CGRectMake(0, 0, w, _segm.bounds.size.height + 10)];
    topView.backgroundColor = [UIColor whiteColor];
    topView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [topView addSubview: _segm];
    [_segm release];

    _table = [[UITableView alloc] initWithFrame: CGRectMake(0, topView.bounds.size.height, w, self.view.bounds.size.height - topView.bounds.size.height) style: UITableViewStylePlain];
    _table.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _table.dataSource = self;
    _table.delegate = self;
    [self.view addSubview: _table];
    [_table release];

    // add topView AFTER _table because topView have a shadow
    [self.view addSubview: topView];
    [topView release];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;
    // pixel_transp.png - 1x1 image with transparent background
    self.navigationController.navigationBar.shadowImage = [UIImage imageNamed: @"pixel_transp"];
    // pixel.png - 1x1 image with white background
    [self.navigationController.navigationBar setBackgroundImage: [UIImage imageNamed: @"pixel"] forBarMetrics: UIBarMetricsDefault];

    UIBarButtonItem* bt = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemCancel target: self action: @selector(onCancel)];
    self.navigationItem.rightBarButtonItem = bt;
    [bt release];
}

- (void)onCancel
{
    [self.presentingViewController dismissViewControllerAnimated: YES completion: NULL];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier: @"MyId"];
    if (!cell) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @"MyId"] autorelease];
    cell.textLabel.text = @"text";
    return cell;
}

@end

@implementation MyNavBarView

- (void)willMoveToWindow: (UIWindow *)newWindow
{
    self.layer.shadowOffset = CGSizeMake(0, 1.0f / UIScreen.mainScreen.scale);
    self.layer.shadowRadius = 0;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.25f;
}

@end
10
pigmasha

これには、ナビゲーション項目のPromptプロパティを使用できます。このようにストーリーボードのプロパティを設定するだけで、ナビゲーションバーは自動的にうまくフェードインおよびフェードダウンします。欠点は、テキストがちょっと小さいことだけです。

enter image description here

6
Zeezer

Xamarin.iOSでこれを実行しようとしました。iOS6からUINavigationBarを継承し、必要な場所にボタンやコントロールを追加できます。

2
Michal Dobrodenka

UINavigationBarサブクラスを作成して、UIToolbarDelegateプロトコルに準拠させてください。次に、-initメソッドでセグメントコントロールを作成し、UIToolBarに追加して、カスタムUINavigationBarクラスにデリゲートを設定します。次に、この魔法を書きます：

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}

幸運を！

2
user1403629

私の解決策はこれでした：
ツールバーとセグメント化されたコントロールをxibファイルに追加します。必要に応じてカスタマイズし、View Controllerのコンセントに接続します。

enter image description here

次に、これをviewDidLoadメソッドに追加します。

- (void)viewDidLoad
{
    [super viewDidLoad];

    // add after your setup code
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];

    self.navigationItem.rightBarButtonItem = item;
}

enter image description here

1
Nikolay Shubenkov

完全には実装していませんが、次のことを計画しています。 （ios7）これは、タイトルとボタンを同じナビゲーションバーに並べて配置するためのものです。

ストーリーボードで、ナビゲーションバーに空白のビューを追加します。次に、ラベルとセグメント化されたコントロールをそのビューに追加します。これにより、必要なコントロールをナビゲーションバーに追加できます。これまでのところ、UIは機能しますが、まだ接続していません。私が今まで見つけたものを共有したかっただけです。

0
Kalel Wade