2011-10-12Expression Blend学习二UI布局

UI设计技能学习：文本列表和图像文字的布局方式
在UI界面设计的时候，尤其是手机移动端，经常会出现文本列表的布局和图文混排的布局，来自非凡学院的武老师给大家整理了一下常用的布局方式，方便各位同学在设计的时候参考。

一、文本列表的常见布局方式
比较常用的单行文本列表，通常左侧为主文本标题，右侧放图标
也可以在标题左侧追加图标，形成双图标
这里要注意右侧图标不宜过大
两行或多行文本列表在排版的时候，一定要注意标题、副标题、备注的字体或颜色层次头像或图标的大小，应当根据实际文字的行数来调整。

∙Panels控件（其实就是容器控件）
∙对内部的子控件提供了自动布局功能
∙可以在容器控件内继续添加容器控件（一个复杂的界面往往是多种容器控件嵌套而组成的）
∙一些界面器控件也是嵌套了容器控件而组成的（比如ListBox就嵌套了StackPanel控件）
∙你也可以自己来制作一些容器控件
一些常见的布局控件
在右侧的工具栏中你可以找到更多的布局控件。

或者你知道自己想要的控件直接输入他的名字便可以快速的找到他。

这里在LayoutRoot下添加上两个最简单的布局控件Canvas，并改变他们的背景颜色予以区分。

这里记住一个概念“所有的父控件对其子控件进行布局”。

尝试移动“Father”的位置，“Son”也跟着移动。

即使“Son”在舞台上不在“Father”的内部，只要他们的在层次上的关系不发生变化，“Son”会一直受“Father”的影响。

在Canvas中的表现是子控件和父控件的相对位置一直保持不变。

你也可以对现有的布局进行转化。

也能对现有的元素快速的组合到容器中。

所谓搭建自适应布局就是利用Grid的特性来搭建界面。

其内部的元素会根据父控件的属性来自行的调整自身的位置大小。

∙一个最基本的布局控件-panel
∙Silverlight控件 - Carrousel
∙Silverlight控件 - ScatterView。

2011-10-12E x p r e s s i o nB l e n d学习四控件-按钮Expression Blend制作自定义按钮1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125;2.右键点击此按钮，选择Edit control parts(template)>Edit a copy...3.在弹出的Create style resource对话框中，修改新按钮样式的名称4.在左侧的Object and timeline面板中选中ContentPresenter元素，按Ctrl+X将此标记临时保存到内存中5.选中Chrome,按Delete键删除6.选中Template,在工具条中双击Grid,添加一个Grid到Template中7.双击Grid，按Ctrl+V将之前保存在内存中的ContentPresenter元素粘贴到Grid中8.在Property面板的Layout中修改ContentPresenter的属性，将HorizontalAllignment和VerticalAllignment设为Center，将Margin属性Reset为09.添加一个Ellipse到Grid中，设置其width和Height属性为Auto,这样此圆会始终与Grid 大小相同10.选中Ellipse，然后在Brushes中选择GradientBrush11.选中左侧的Stop，调整其颜色为深蓝色，然后将其向右拖到大约三分之一的位置12.在工具条中选择Brush Transform工具,然后按住圆上的箭头调整使其朝向右上角13.选择Stroke，设置颜色为黄色，StrokeThickness为514.在Triggers面板中点击+Property,添加一个PropertyTrigger15.选择IsMouseOver，然后修改结果为True16.将左侧的Stop的颜色设置为浅蓝色，并将StrokeThickness设置为817.点击ScopeUp按钮推出Template编辑，然后按F5，即可看到自定义按钮的实际效果不过这个自定义按钮还是有点问题：按钮的Content属性是字符串"Button",可实际上看不到这个内容。

UI笔记-UILabel⽂本布局UILabel ⽂本布局1 - 新建 UILabel ⼦类，实现⽂本⾃定义布局功能2 - 代码⽰例// - UITextAlignLabel.h1#import <UIKit/UIKit.h>2@class AlignMaker;34 typedef NS_ENUM(NSUInteger,textAlignType){5 textAlignType_top = 10, // 顶部对齐6 textAlignType_left, // 居左对齐7 textAlignType_bottom, // 底部对齐8 textAlignType_right, // 居右对齐9 textAlignType_center // 中⼼10 };1112@interface UITextAlignLabel : UILabel1314 -(void)textAlign: (void(^)(AlignMaker *make))alignType;// 根据设置的对齐⽅式进⾏⽂本对齐1516@end171819@interface AlignMaker : NSObject2021// 存放对齐样式22 @property(nonatomic,strong)NSMutableArray *typeArray;2324// 添加对齐样式25 -(AlignMaker *(^)(textAlignType type))addAlignType;2627@end// - UITextAlignLabel.m1#import"UITextAlignLabel.h"2@interface UITextAlignLabel ()34 @property(nonatomic,strong)NSArray *typeArray;// 对齐⽅式56 @property(nonatomic,assign)BOOL hasTop; // 上7 @property(nonatomic,assign)BOOL hasLeft; // 左8 @property(nonatomic,assign)BOOL hasBottom; // 下9 @property(nonatomic,assign)BOOL hasRight; // 右1011@end1213@implementation UITextAlignLabel1415 - (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines {16 CGRect textRect = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];17if (self.typeArray){1819for (int i = 0; i < self.typeArray.count; i++) {2021 textAlignType type = [self.typeArray[i] integerValue];22switch (type) {2324// 顶部对齐25case textAlignType_top:26 self.hasTop = YES;27 textRect.origin.y = bounds.origin.y;28break;2930// 居左对齐31case textAlignType_left:32 self.hasLeft = YES;33 textRect.origin.x = bounds.origin.x;34break;3536// 底部对齐37case textAlignType_bottom:38 self.hasBottom = YES;39 textRect.origin.y = bounds.size.height - textRect.size.height;40break;4142// 居右对齐43case textAlignType_right:44 self.hasRight = YES;45 textRect.origin.x = bounds.size.width - textRect.size.width;46break;4748case textAlignType_center:49// 上中50if (self.hasTop) {51 textRect.origin.x = (bounds.size.width - textRect.size.width)*0.5;52 }53// 左中54else if (self.hasLeft) {55 textRect.origin.y = (bounds.size.height - textRect.size.height)*0.5;56 }57// 下中58else if (self.hasBottom) {59 textRect.origin.x = (bounds.size.width - textRect.size.width)*0.5;60 }61// 右中62else if (self.hasRight) {63 textRect.origin.y = (bounds.size.height - textRect.size.height)*0.5;64 }65// 上下左右居中66else{67 textRect.origin.x = (bounds.size.width - textRect.size.width)*0.5;68 textRect.origin.y = (bounds.size.height - textRect.size.height)*0.5;69 }70break;71default:72break;73 }74 }75 }7677return textRect;78 }7980 -(void)drawTextInRect:(CGRect)requestedRect {81 CGRect actualRect = requestedRect;82if (self.typeArray) {83 actualRect = [self textRectForBounds:requestedRect limitedToNumberOfLines:self.numberOfLines];84 }85 [super drawTextInRect:actualRect];86 }8788 -(void)textAlign: (void(^)(AlignMaker *make))alignType{8990 AlignMaker *make = [[AlignMaker alloc] init];91 alignType(make);92 self.typeArray = make.typeArray;93 }949596@end979899100#pragma mark - AlignMaker class101@implementation AlignMaker102103 - (instancetype)init{104 self = [super init];105if (self) {106 self.typeArray = [NSMutableArray array];107 }108return self;109 }110111 -(AlignMaker *(^)(enum textAlignType type))addAlignType{112 __weak typeof (self) weakSelf = self;113return ^(enum textAlignType type){114 [weakSelf.typeArray addObject:@(type)];115return weakSelf;116 };117 }118119@end3 - 如何使⽤1#import"ViewController.h"2#import"UITextAlignLabel.h"3@interface ViewController ()45@end67@implementation ViewController89 - (void)viewDidLoad {10 [super viewDidLoad];1112 UITextAlignLabel *testLabel = [[UITextAlignLabel alloc] initWithFrame: CGRectMake(40, 20+60, self.view.frame.size.width - 80, 90)];13 testLabel.text = @"还记得那年我们都还很年幼";14 testLabel.backgroundColor = [UIColor orangeColor];15 [self.view addSubview:testLabel];1617// ⽂本底部且居中18 [testLabel textAlign:^(AlignMaker *make) {1920 make.addAlignType(textAlignType_center).addAlignType(textAlignType_bottom);21 }];22 }232425@end运⾏效果：⽂本底部居中显⽰。

优秀UI的布局与网格大家好，今天给大家带来的是优秀UI的布局与网格的解构，很多同学想学网格，但却不知道如何下手。

其实看的作品多了，对学习网格与版面布局也是很有帮助的，这个系列会分享本猫自己解构出来的作品以及对版面布局的看法，希望对大家的学习路上有所帮助！UI设计这是一个简洁并且非常具有透气感的UI作品，正文信息全部位于版面右侧，那么我们先把版心与画面中很明显的对齐线画出来，如下UI设计这样已经很明显了，可以把这个版面看成左右两部分，主标题占据了两栏，而正文信息只占据了右侧的一栏。

那么被这条竖线划分的两个版面是什么关系呢？UI设计左右两侧的版面其实是相等的，也就是说中间的竖线将此画面分成了左右相等的两栏，详细的信息占据了右侧的一栏，而主标题占据了两栏。

UI设计除了竖向上的划分，横向上其实也可以划分，在主标题顶部拉一条横线，测量上下两部分的关系，如下UI设计上侧留白的部分与下侧文字所占的部分其实是白银比的关系，1：1.414。

版面中的留白面积大小等都是有依据的。

UI设计这是一个用插画当主形象，很活泼的一个版面，看似只用了基本的对齐形式，但其实也是藏有隐形的网格的，如下UI设计这个作品采用了栏宽相等的三栏网格，主要的文字信息占据了右侧两栏，留白占据了左边一栏，其中左侧一栏中的三角、叉、圆三个元素是居中于这一栏的。

UI设计留白与详细信息的比例关系如上，其中的a 代表栏间距，右侧详细的信息占据的网格是右侧两栏加上与第一栏的栏间距。

UI设计跟上一个案例一样，在横向的留白关系上依然可以拉一条横线看他们之间的比例关系。

UI设计如图所示，文字信息与插画留白之间的比例关系为1：1.5。

UI设计这个作品是以插画字母为主形象的，按照老规矩还是先把版心画出来。

UI设计内框里的就是这个画面的版心了，当然了，为了让版面更活跃有些很小的元素是可以位于版心外的，但是大小比例都要控制好。

现在虽然版心确立了，但版面中的插画以及左下方的详细信息对齐还是没有依据，所以我们可以继续分析，如下。

编号： ****002版本： V1.0界面设计规范用户操作手册作 者:__ 林贤旺___ __完成日期:____2013-12-03____ δ签 收 人:____ _____ ____签收日期:___ _________ _修改情况记录1引言 (4)1.1编写目的 (4)1.2背景 (4)2运行环境 (4)2.1硬件设备 (4)2.2支持软件 (4)3使用过程 (4)3.1安装与创建项目 (4)3.2.1 Blend安装 (4)3.2.1 Blend创建项目 (5)3.2常用控件说明 (9)3.2.1 Grid (9)3.2.2 StackPanel (10)3.2.3 Canvas (10)3.2.4 DockPanel (11)3.2.5 GridSplitter (12)3.2.6 Button (13)3.2.7 TextBox (13)3.2.8 Label (14)3.2.9 TextBlock (14)3.2.10 TabControl (15)3.2.11 DataGrid (16)3.2.12 GridControl (18)3.2.13 GroupBox (21)3.3引用三方控件 (24)3.4界面设计模板 (25)3.4.1单表模板 (25)3.4.2主从表模板 (26)3.4.3主从从表模板 (27)1引言1.1编写目的编写本报告的目的是为了说明blend这款软件对于界面设计的制作过程，提高用户的工作效率和工作质量。

1.2背景软件系统名称：blend界面设计软件2运行环境2.1硬件设备Blend硬件要求(建议)如下：(1)CPU: P4 以上(2)内存：4G(3)硬盘：60G以上2.2支持软件Blend软件要求(建议)如下：(1)操作系统：WINDOWS XP/7/83使用过程3.1安装与创建项目3.1.1 Blend安装(1)点击setup程序，选择安装路径，然后选择“下一步”，(2)最后点“完成”。