web-dev-qa-db-ja.com

iOS7-UINavigationBarの境界線の色を変更する

IOS7でUINavigationBarの灰色の境界線下の色を変更することは可能ですか？

私はすでにボーダーに削除しようとしましたが、これは機能していません：

[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

ありがとう！

colorsborderuinavigationbarios7xcode5
28
MappleDev

境界線ではなく影を削除しています。次の手順を実行する必要があります。

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

境界線を変更するには、幅2ピクセルの線の画像を使用します。

[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:@"2pxWidthLineImage"]];
62
null

下部の色を高さで変更するカテゴリは次のとおりです。

[self.navigationController.navigationBar setBottomBorderColor:[UIColor redColor] height:1];

enter image description here

目的C：

UINavigationBar + Helper.h

#import <UIKit/UIKit.h>

@interface UINavigationBar (Helper)
- (void)setBottomBorderColor:(UIColor *)color height:(CGFloat)height;
@end

UINavigationBar + Helper.m

#import "UINavigationBar+Helper.h"

@implementation UINavigationBar (Helper)

- (void)setBottomBorderColor:(UIColor *)color height:(CGFloat)height {
    CGRect bottomBorderRect = CGRectMake(0, CGRectGetHeight(self.frame), CGRectGetWidth(self.frame), height);
    UIView *bottomBorder = [[UIView alloc] initWithFrame:bottomBorderRect];
    [bottomBorder setBackgroundColor:color];
    [self addSubview:bottomBorder];
}
@end

スイフト：

extension UINavigationBar {

    func setBottomBorderColor(color: UIColor, height: CGFloat) {
        let bottomBorderRect = CGRect(x: 0, y: frame.height, width: frame.width, height: height)
        let bottomBorderView = UIView(frame: bottomBorderRect)
        bottomBorderView.backgroundColor = color
        addSubview(bottomBorderView)
    }
}
55
sash

別の方法を次に示します。

CALayer *border = [CALayer layer];
border.borderColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"border"]].CGColor;
border.borderWidth = 1;
CALayer *layer = self.navigationController.navigationBar.layer;
border.frame = CGRectMake(0, layer.bounds.size.height, layer.bounds.size.width, 1);
[layer addSublayer:border];
9
k06a

色を変える唯一の方法は次のとおりです。

override func viewDidLoad() {
    super.viewDidLoad()

    if let navigationController = self.navigationController {
        let navigationBar = navigationController.navigationBar
        let navigationSeparator = UIView(frame: CGRectMake(0, navigationBar.frame.size.height - 1, navigationBar.frame.size.width, 0.5))
        navigationSeparator.backgroundColor = UIColor.redColor() // Here your custom color
        navigationSeparator.opaque = true
        self.navigationController?.navigationBar.addSubview(navigationSeparator)
    }

}
6
Luca Davanzo

Swiftで簡単に使用できるように、他の回答に基づいて拡張機能を作成しました。

extension UINavigationBar {

    func setBottomBorderColor(color: UIColor) {

        let navigationSeparator = UIView(frame: CGRectMake(0, self.frame.size.height - 0.5, self.frame.size.width, 0.5))
        navigationSeparator.backgroundColor = color
        navigationSeparator.opaque = true
        navigationSeparator.tag = 123
        if let oldView = self.viewWithTag(123) {
            oldView.removeFromSuperview()
        }
        self.addSubview(navigationSeparator)

    }
}

このようなコンテキストでメソッドを呼び出すと、この拡張機能を使用できます。

self.navigationController?.navigationBar.setBottomBorderColor(UIColor.whiteColor())

色のついた境界線の問題に対処しなければならなかったので、私はそれが非常に便利だと感じました。

5
FTFT1234

この問題は自動レイアウトを使用して解決しました。このソリューションは、さまざまな画面サイズで機能し、方向を変更できます。

extension UINavigationBar {

    @IBInspectable var bottomBorderColor: UIColor {
        get {
            return self.bottomBorderColor;
        }
        set {
            let bottomBorderRect = CGRect.zero;
            let bottomBorderView = UIView(frame: bottomBorderRect);
            bottomBorderView.backgroundColor = newValue;
            addSubview(bottomBorderView);

            bottomBorderView.translatesAutoresizingMaskIntoConstraints = false;

            self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: 0));
            self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 0));
            self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: 0));
            self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute,multiplier: 1, constant: 1));
        }

    }

}
5
Nikolay Khramchenko

@sashからの回答に基づいて、Swift Autolayoutを使用して拡張機能を作成しました。説明は 右） です。

本質的に、他のソリューションには次の落とし穴があります。

  • UIImageソリューションを使用している場合、ドロップシャドウを追加できません
  • 追加されたサブビューは、ビューの回転時にサイズ変更されません
 extension UINavigationBar {
 
 func setBottomBorderColor（color：UIColor、height：CGFloat）-> UIView {
 
 let bottomBorderView = UIView（frame： CGRectZero）
 bottomBorderView.translatesAutoresizingMaskIntoConstraints = false 
 bottomBorderView.backgroundColor = color 
 
 self.addSubview（bottomBorderView）
 
 = ["border"：bottomBorderView] 
 self.addConstraints（NSLayoutConstraint.constraintsWithVisualFormat（ "H：| [border] |"、オプション：[]、メトリック：nil、views：views））
 self.addConstraint（NSLayoutConstraint（item：bottomBorderView、attribute：.Height、relatedBy：.Equal、toItem：nil、attribute：.NotAnAttribute、Multiplier：1.0、constant：height））
 self.addConstraint（NSLayoutConstraint（item ：bottomBorderView、属性：.Bottom、relatedBy：.Equal、toItem：self、属性：.Bottom、乗数：1.0、定数：高さ））
 
 return bottomBorderView 
} 
}

これにより、必要に応じてドロップシャドウを追加できます。これにより、回転がうまく処理されます。

4
Pierre

私のようにシンプルでハックなソリューションが好きなら、デフォルトの境界線をカバーするビューを作成してください：

UIView *navBarLineView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.navigationController.navigationBar.frame),
                                                                  CGRectGetWidth(self.navigationController.navigationBar.frame), 1)];
navBarLineView.backgroundColor = [UIColor redColor];
[self.navigationController.navigationBar addSubview:navBarLineView];
2
budidino

budidinoソリューションは非常にうまく機能します。 Swiftの場合：

let navBarLineView = UIView(frame: CGRectMake(0,
    CGRectGetHeight((navigationController?.navigationBar.frame)!),
    CGRectGetWidth((self.navigationController?.navigationBar.frame)!),
    1))

navBarLineView.backgroundColor = UIColor.whiteColor()

navigationController?.navigationBar.addSubview(navBarLineView)
1
linker

下の境界線を削除する場合は、影の画像を空の画像に設定します

[navigationBar setShadowImage:[UIImage new]];

別の色に設定したい場合は、その色の画像を作成するだけで、ヘルパー関数を使用して以下の色から画像を作成します（元のソース http://jslim.net/blog/2014/05/05/ios-customize-uitabbar-appearance / ）

+ (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size 
{
return [UIImage imageFromColor:color forSize:size withCornerRadius:0];
}

+ (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size     withCornerRadius:(CGFloat)radius
{
CGRect rect = CGRectMake(0, 0, size.width, size.height);
UIGraphicsBeginImageContext(rect.size);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Begin a new image that will be the new image with the rounded corners
// (here with the size of an UIImageView)
UIGraphicsBeginImageContext(size);

// Add a clip before drawing anything, in the shape of an rounded rect
[[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius] addClip];
// Draw your image
[image drawInRect:rect];

// Get the image, here setting the UIImageView image
image = UIGraphicsGetImageFromCurrentImageContext();

// Lets forget about that we were drawing
UIGraphicsEndImageContext();

return image;
}

そして私のナビゲーションバーで

[navigationBar setShadowImage:[UIImage imageFromColor:[UIColor redColor] forSize:CGSizeMake(CGRectGetWidth(self.tableView.frame), 1)]];

それはそれです、それは私のために働いています、この助けを願っています。受け入れられた答えを変更することを検討してください。それは機能せず、混乱を招く可能性があるためです

1
Ansel

@sashのSwift実装に基づいて構築するには、制約を使用して、境界線を回転/特性の変更に対応させることができます。

extension UINavigationBar {
  func setBottomBorderColor(color: UIColor, height: CGFloat) {

    let bottomBorderView = UIView()
    bottomBorderView.backgroundColor = color
    bottomBorderView.translatesAutoresizingMaskIntoConstraints = false
    addSubview(bottomBorderView)

    // Add constraints to make the bar always stay at the bottom of the nav bar and change size with rotation/trait changes
    let horizontalConstraint = NSLayoutConstraint(item: bottomBorderView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)
    let verticalConstraint = NSLayoutConstraint(item: bottomBorderView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
    let widthConstraint = NSLayoutConstraint(item: bottomBorderView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: .width, multiplier: 1, constant: 0)
    let heightConstraint = NSLayoutConstraint(item: bottomBorderView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: height)

    self.addConstraints([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint])
  }
}
1
g0ld2k

クリアカラーの画像を作成する方法は次のとおりです。

+ (UIImage*)imageFromColor:(UIColor *)color withSize:(CGSize)sizeImage
{
    UIImage *resultImage = nil;

    UIGraphicsBeginImageContext(sizeImage);

    CGContextSetFillColorWithColor(UIGraphicsGetCurrentContext(), color.CGColor);
    CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(0.0f, 0.0f, sizeImage.width, sizeImage.height));
    resultImage = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return resultImage;
}

厄介なボトムラインを削除するための使用法は次のとおりです。

navigationBar.shadowImage = [UIImage imageFromColor:[UIColor clearColor] withSize:CGSizeMake(1.0f, 1.0f)];
0
Eugene Alexeev

写真1

revealを使用して、境界色がUIImageViewのbackgroundColorであることを確認できます。そのため、imageViewのbackgroundColorを直接変更するか、非表示にします。

コード：@interface QdtTabBarController：UITabBarControllerに書き込みます

Class backGroundClass = NSClassFromString(@"_UIBarBackground");
for (UIView *view in self.tabBar.subviews) {
    if ([view isKindOfClass:backGroundClass]) {
        for (UIView *view2 in view.subviews) {
            if ([view2 isKindOfClass:[UIImageView class]]) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    view2.backgroundColor = [UIColor redColor];
                });
            };
        };
        break;
    }
}

写真2

0
Q.Man