# NerdyUI
[![Platform](http://cocoapod-badges.herokuapp.com/p/NerdyUI/badge.png)](https://cocoapods.org/pods/NerdyUI)
[![Language](https://camo.githubusercontent.com/329dad681452751ddf3fed2c8a32d2c4515ae03b/687474703a2f2f696d672e736869656c64732e696f2f62616467652f6c616e67756167652d4f626a432d627269676874677265656e2e7376673f7374796c653d666c6174)](https://cocoapods.org/pods/NerdyUI)
[![Version](http://cocoapod-badges.herokuapp.com/v/NerdyUI/badge.png)](https://cocoapods.org/pods/NerdyUI)
[![License](http://cocoapod-badges.herokuapp.com/l/NerdyUI/badge.png)](https://cocoapods.org/pods/NerdyUI)
An easy way to create and layout UI components for iOS 8 and above.
There is also a [Swift version](https://github.com/nerdycat/Cupcake) available.
相关文章:
[中文说明](http://www.jianshu.com/p/ac47c4826a19)
[NerdyUI 使用小技巧](http://www.jianshu.com/p/c9ac29fb634e)
---
## Macros for create NSString, UIFont, UIColor, UIImage and Common structs
You can convert nearly everything to NSString by using `Str()` macro.
Similarly, you can log variables using `Log()` macro.
Str(100); //@"100"
Str(3.14); //@"3.14"
Str(@0.618); //@"0.618"
Str(view.frame); //@"{{0, 0}, {100, 100}}"
Str(view.center); //@"{50, 50}"
Str(_cmd); //@"viewDidLoad"
Str(NSString.class); //@"NSString"
Str("C-String"); //@"C-String"
Str(@"1 + 1 = %d", 1 + 1); //@"1 + 1 = 2"
Log(100);
Log(3.14);
Log(@0.618);
Log(view.frame);
...
Log(@"1 + 1 = %d", 1 + 1);
//Appending String
@"1".a(@"2").a(3).a(nil).a(4.0f).a(@5).a(@"%d", 6); //@"123456"
You can create NSAttributedString with `AttStr()` macro.
AttStr(@"hello, 101").match(@"[0-9]+").underline; //mark 101 with underline
AttStr(@"A smile ", Img(@"smile"), @" !!"); //attributedString with image attachment
You can create UIFont with `Fnt()` macro.
Fnt(15); //[UIFont systemFontOfSize:15]
Fnt(@15); //[UIFont boldSystemFontOfSize:15]
Fnt(@"body"); //UIFontTextStyleBody
Fnt(@"Helvetica,15"); //helvetica font with size 15
You can create UIColor with `Color()` macro.
Color(@"red"); //[UIColor redColor]
Color(@"0,0,255"); //RGB color
Color(@"#0000FF"); //Hex color
Color(@"random"); //random color
//also can have an optional alpha value
Color(@"red,0.5"); //red color with alpha 0.5
Color(@"0,0,255,0.8"); //blue color with alpha 0.8
...
Color(Img(@"pattern")); //pattern image color
You can create UIImage with `Img()` macro.
Img(@"imageName"); //[UIImage imageNamed:]
Img(@"#imageName"); //prefixed with # will return an stretchable image
Img(@"red"); //1x1 square image with red color
You can also create CGPoint, CGSize, CGRect, NSRange and UIEdgeInsets with `XY()`, `WH()`, `XYWH()`, `Range()`, `Insets()` macros.
CGPoint p = XY(20, 20);
CGSize s = WH(50, 50);
CGRect f1 = XYWH(20, 20, 50, 50);
CGRect f2 = XYWH(f1.origin, f1.size);
CGRect f3 = XYWH(f2.origin, 50, 50);
CGRect f4 = XYWH(20, 20, f3.size);
NSRange r = Range(10, 20);
UIEdgeInsets i1 = Insets(10); //{10, 10, 10, 10}
UIEdgeInsets i2 = Insets(10, 20); //{10, 20, 10, 20}
UIEdgeInsets i3 = Insets(10, 20, 30); //{10, 20, 30, 20}
UIEdgeInsets i4 = Insets(10, 20, 30, 40); //{10, 20, 30, 40}
These macros exist not only because they simplify the process of creating common types, but also indicate a new way of setting properties as you will see soon.
## Quick access to frame property and Screen size
someView.x = 10;
someView.y = someView.x;
someView.xy = XY(10, 10);
someView.w = 50; //width
someView.h = someView.w; //height
someView.wh = WH(50, 50);
someView.frame = XYWH(10, 10, 50, 50);
someView.cx = 25;
someView.cy = someView.cx;
someView.center = XY(25, 25);
someView.maxX = 60;
someView.maxY = someView.maxX;
someView.maxXY = XY(60, 60);
//qucik access screen size
someView.wh = WH(Screen.width, Screen.height);
## Easy way to set up UI components
NerdyUI make it very easy to create UI components and config properties by using a chaining syntax.
UIView *view1 = View.xywh(20, 30, 50, 50).bgColor(@"red").opacity(0.7).border(3, @"3d3d3d");
UIView *view2 = View.xy(80, 30).wh(view1.wh).bgColor(@"blue,0.7").borderRadius(25).shadow(0.8).onClick(^{
Log(@"view2");
});
<img src="./res/view.png" alt="view" width="30%" />
UIImageView *moose = ImageView.img(@"moose").x(20).y(100).shadow(0.6, 2, -3, -1);
UILabel *quiz = Label.str(@"%d+%d=?", 1, 1).fnt(@17).color(@"66,66,66").fitSize.x(moose.maxX + 10).cy(moose.cy);
<img src="./res/moose.png" alt="moose" width="30%" />
id title = AttStr(@"TAP ME").fnt(15).underline.range(0, 3).fnt(@18).color(@"random");
UIButton *button1 = Button.str(title).insets(5, 10).fitSize.border(1).xy(20, 150).onClick(^(UIButton *btn) {
//Exp allows you to execute codes in any position.
quiz.text = Str(@"%d+%d=%d", 1, 1, Exp(btn.tag += 1));
[quiz sizeToFit];
});
UIButton *button2 = Button.str(@"HAT").highColor(@"brown").img(@"hat").gap(8);
button2.xywh(button1.frame).x(button1.maxX + 10).borderRadius(5).bgImg(@"blue,0.5").highBgImg(@"orange");
//highBgImg with color string is a very useful trick to set highlighted background color for UIButton.
<img src="./res/button.gif" alt="button" width="50%" />
id pinField = TextField.x(button1.x).y(button1.maxY + 15).wh(170, 30).onChange(^(NSString *text) {
//self has been weakified, no need to warry about retain cycle.
[(id)[self.view viewWithTag:101] setText:text];
}).numberKeyboard.maxLength(4).hint(@"pin code").fnt(15).roundStyle;
id textView = TextView.xywh(20, 240, 170, 100).border(1).insets(8).hint(@"placeholder").fnt([pinField font]).tg(101);
<img src="./res/input.gif" alt="input" width="50%" />
As you can see, most of the chainable properties are quite straight forward and self-explained. Some of them are very versatile and can take many kind of arguments. By the way, `View` is just a Macro for `[UIView new]`, same as others.
You use `.opacity()` and `.tg()` to set view's alpha and tag.
You use `.x()`, `.y()`, `.xy()`, `.w()`, `.h()`, `.wh()`, `.xywh()`, `.cx()`, `.cy()`, `.cxy()`, `.maxX()`, `.maxY()`, `.maxXY()` to set view's position and size.
You use `.touchEnabled`, `.touchDisabled` to enable or disable touch.
You use `.flexibleLeft`, `.flexibleRight`, `.flexibleTop`, `.flexibleBottom`, `.flexibleLR`, `.flexibleTB`, `.flexibleLRTB`, `.flexibleWidth`, `.flexibleHeight`, `.flexibleWH` to set autoresizingMask.
You use `.centerAlignment`, `.rightAlignment` to set alignment.
You use `.fnt()` to set font with the same format as `Fnt()`.
You use `.str()` to set text or attribtedText with the same format as `Str()`.
You use `.img()`, `.highImg()`, `.bgImg()` and `.highBgImg()` to set image, highlightedImage, backgroundImage and highlightedBackgroundImage, with the same format as `Img()`.
You use `.tint()`, `.color()`, `.bgColor()`, `.highColor()` to set tintColor, textColor, backgroundColor and highlightedTextColor, with the same format as `Color()`.
You use `.border()`, `.borderRadius()` and `.shadow()` to config border styles and drop shadows.
You use `.fitWidth`, `.fitHeight` and `.fitSize` to change bounds to fit content.
You use `.onClick()` to add click handler to any UIView.
For UITextField and UITextView, you use `.hint()` to set placeholder, `.maxLength()` to limit the total length, `.onChange()` for adding text change handler.
For UIButton, UITextField and UITextView, you use `.insets()` to add padding to contents.
An there are many more. Check the corresponding header file for more information.
##Enhancements to UILabel
You can add line spacing to UILabel by simply use `.lineGap()`.
You can add link to UILabel as well. All you have to do is create an NSAttributedString that marked as `.linkForLabel`, and then add a link click handler to UILabel with `.onLink()`.
id str = @"Lorem ipsum 20 dolor sit
评论0