iOS 应用的有效 UI 样式

Question

我的问题很简单。在 android 中，我们可以将 xml 样式表与布局分开，以便它可以在任何地方重复使用并轻松编辑 UI 设计更改。

iOSxcode也可以吗？如果可以如何（如果不是来自控制器，则更喜欢）？需要图书馆吗？什么是好的图书馆？

感谢您的回答。

Answer 1

您可以使用Classy to define a styles for your UI in a more CSS like fashion. It's used and maintained byt the people at Wire

Answer 2

您可以将 UICategory class 用于 UIView。为 set borders、border colors、pass bazier-paths、corner radius 等创建不同的方法。这只是其中的一小部分。类别属于 UIView，因此您可以在 buttons、lables、textview、textedits 等上使用；

UIView+category.h

@interface UIView (category)
-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color;

@end

UIView+category.m

@implementation UIView (category)

-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color
{
   NSLog(@"height %f width %f",CGRectGetHeight(self.frame),CGRectGetWidth(self.frame));
    self.layer.cornerRadius=CGRectGetHeight(self.frame)/2;
    self.layer.masksToBounds=YES;
    self.layer.borderColor=[color CGColor];
    self.layer.borderWidth=borderwidth;
}

@end

使用它

[yourlable makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourbutton makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourTextview makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

[yourTextfield makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];

Answer 3

您还应该研究 UIAppearance。它是适用于大多数 UI 元素的设计代理，您只需设置一次样式。

Answer 4

您可以使用枚举创建自己的样式。通过将枚举放在 Styles 枚举中，您可以获得一个很好的分组：

enum Styles {
    enum Labels {
        case Standard
        case LargeText

        func style(label: UILabel) {
            switch self {
            case .Standard:
                label.font = UIFont.systemFontOfSize(12)
            case .LargeText:
                label.font = UIFont.systemFontOfSize(18)
            }
        }
    }

    enum Buttons {
        case RedButton

        func style(button: UIButton) {
            switch self {
            case .RedButton:
                button.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
            }
        }
    }
}

那么你可以这样使用它：

Styles.Labels.Standard.style(yourLabel)

您还可以对已设置的样式进行扩展：

extension UILabel {
    func style(style: Styles.Labels) {
        style.style(self)
    }
}

extension UIButton {
    func style(style: Styles.Buttons) {
        style.style(self)
    }
}

然后像这样使用扩展：

yourLabel.style(.Standard)
yourButton.style(.RedButton)

iOS 应用的有效 UI 样式

effective UI styling for iOS app

ui-design

ios

swift