ios - iOS7 サイドメニューのステータスバーの色遷移。iOS7 の Facebook アプリのように

Question

iOS7 の Facebook アプリには、右から左にスワイプするか、右上のボタンをクリックして表示できる右側のメニューがあります。このメニューを開くと、ステータスバー全体の色が青から黒に変化し、閉じるとその逆になります。

この画像は、両方のステータスバーを並べて示しています

これは、サイドメニューを備えた iOS アプリにとって非常に優れたソリューションのようです。

これを達成する方法についてのアイデアや方法はありますか?

現在JASidePanelsを使用しています。ありがとう！

score 8 · Accepted Answer

Facebook アプリの機能を完全に模倣する、非常にシンプルでエレガントな方法を見つけることができました。

これが私のアプローチです：

ステータスバーフレーム付きのビューを作成する
ビューの背景色を黒に、不透明度を 0 に設定します
ビューをサブビューとして任意のルートビューに追加します(単一のビューに限定されないように、中央のビューとメニューの両方をカバーするビューが必要です。これに適したオプションは、メニューコントローラーの実装)
メニューコントローラー実装のメニューアニメーションメソッドでビューの不透明度を設定します

MMDrawerControllerを使用した私の特定の実装は次のとおりです。

MMDrawerController をサブクラス化し (実際には、Storyboards で MMDrawerController を使用するためのサブクラスを既に持っていました)、このコードをクラスのinitメソッドに追加しました。

// Setup view behind status bar for fading during menu drawer animations
if (OSVersionIsAtLeastiOS7()) {
    self.statusBarView = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
    [self.statusBarView setBackgroundColor:[UIColor blackColor]];
    [self.statusBarView setAlpha:0.0];
    [self.view addSubview:self.statusBarView];
}

// Setup drawer animations
__weak __typeof(&*self) weakSelf = self; // Capture self weakly

[self setDrawerVisualStateBlock:^(MMDrawerController *drawerController, MMDrawerSide drawerSide, CGFloat percentVisible) {
    MMDrawerControllerDrawerVisualStateBlock block;
    block = (drawerSide == MMDrawerSideLeft) ? [MMDrawerVisualState parallaxVisualStateBlockWithParallaxFactor:15.0] : nil; // Right side animation : Left side animation
    if(block){
        block(drawerController, drawerSide, percentVisible);
    }
    [weakSelf.statusBarView setAlpha:percentVisible];    // THIS IS THE RELEVANT CODE
}];

self.statusBarView私も私物として追加しました。

コードの最初のセクションでは、ビューを作成して構成し、MMDrawerController サブクラスのビューのサブビューとして追加します。メソッドは、デバイスが iOS 7 を実行しているかどうかを確認するためのOSVersionIsAtLeastiOS7()チェックを簡素化するカスタムメソッドです (そうでない場合は、カスタムビューがステータスバーの下に表示されますが、これは望ましくありません)。
コードの 2 番目のセクションは MMDrawerController のsetDrawerVisualStateBlockメソッドで、メニューの開閉時に実行されるアニメーションコードを設定します。コードの最初の数行は定型コードで、ビルド済みのアニメーションブロックの 1 つを各メニューに設定します (左側にはパララックスが必要でしたが、右側には何も必要ありませんでした)。関連するコードは、ブロックの最後の行です: [weakSelf.statusBarView setAlpha:percentVisible];、ステータスバービューの不透明度を、メニューが現在開いているパーセンテージと一致するように設定します。これにより、Facebook アプリで見られるスムーズなクロスアニメーションが可能になります。また、「保持サイクル」コンパイラの警告を回避するためselfに、変数に割り当てたことにも気付くでしょう。weakSelf

これは、MMDrawerController とサブクラスを使用した私の特定のアプローチです。これは、必然的に最善のアプローチまたはそれを行う唯一の方法であるという理由よりも、既にサブクラスを配置しているため、利便性を高めるために行いました。おそらく、サブクラスなしで MMDrawerController を使用するか、他のサイドドロワーメニュー実装を使用して、いくつかの他の方法で実装できます。

最終結果は、新しい Facebook アプリで見られるのとまったく同じように、ステータスバーの背後にある黒のアニメーションにスムーズにフェードします。

score 6 · Accepted Answer

私は同じことを達成しようとしてきました。これを行うために使用している方法は、次の概念に基づいています。

高さ 64 ポイントの背景画像は、UINavigationBar と UIStatusBar の両方を埋めます。
高さ 44 ポイントの背景画像は、UINavigationBar を塗りつぶし、UIStatusBar を黒のままにします。
現在の navigationController のビューの上部にサブビューを追加すると、UIStatusBar の下に配置されます。

したがって、最初に、目的の UINavigationBar の外観を持つ 2 つの画像を作成する必要があります。

ナビゲーションバーとステータスバーをカバーする 640x128 ピクセルの画像 ( ImageA )

UINavigationBar と UIStatusBar の両方をカバーする画像

ナビゲーションバーを覆うが、ステータスバーを黒のままにする 640x88px の画像 ( ImageB )。

ここに画像の説明を入力

メソッドではapplication:didFinishLaunchingWithOptions:、 UINavigationBar の背景を ImageA で設定します[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"ImageA.png"] forBarMetrics:UIBarMetricsDefault];

サイドメニューが開き始めたら、UINavigationBar を切り替えて ImageB を使用し、 UIStatusBar の下に追加するビューを作成します。これを行うためのサンプルコードを次に示します。

// Add a property for your "temporary status bar" view
@property (nonatomic, strong) UIView *temporaryStatusBar;

そして、サイドメニューが開き始めるコードでは:

// Create a temporary status bar overlay
self.temporaryStatusBar = [[UIView alloc] initWithFrame:[[UIApplication sharedApplication] statusBarFrame]];
self.temporaryStatusBar.backgroundColor = [UIColor yourColor];
[self.navigationController.view addSubview:self.temporaryStatusBar];

// Update both the current display of the navigationBar and the default appearance values
[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"imageB.png"] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setNeedsDisplay];

サイドメニューがアニメーションで開くか、ユーザーがメニューをパンすると、UIStatusBar オーバーレイのアルファレベルを調整するだけで済みます。サイドメニューが完全に開いている場合、UINavigationBarの背景画像は ImageB であり、UIStatusBar オーバーレイのアルファは 0 です。サイドメニューが閉じている場合、UINavigationBar の背景をImageAに置き換え、 UIStatusBar オーバーレイを削除します。 .

これがうまくいくかどうか教えてください！

score 1 · Accepted Answer

この素晴らしいスライドメニューライブラリを使用できます

https://github.com/arturdev/AMSlideMenu

このデモプロジェクトでは、4 行のコードを記述することでそれを行う方法を確認できます。

- (void)viewWillAppear:(BOOL)アニメーション
{
    [super viewWillAppear:アニメーション];

    // ナビゲーション バーの色合いの設定
    self.navigationController.navigationBar.barTintColor = [UIColor colorWithHex:@"#365491" alpha:1];

    // ナビゲーションバーと同じ色でビューを作成
    UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 20)];
    statusBarView.backgroundColor = [UIColor colorWithHex:@"#365491" alpha:1];

    // ステータス バー ビューを作成済みのビューに置き換えて、魔法を実行します :)
    [[self mainSlideMenu] fixStatusBarWithView:statusBarView];
}

ios - iOS7 サイドメニューのステータスバーの色遷移。iOS7 の Facebook アプリのように

3 に答える 3

Related

Reference