控件拖放
背景图片的设置
现在开始为每个tab page增加控件
对于"装备"，有一个背景图片，按照大菠萝3里面的设定，有5种英雄，每种分为男、女，共10张图片。大小均为宽994，高665。我们选择男性野蛮人作为背景，主要是把各种装备放到对应的位置上。
从toolbar上拖放一个image view到"装备"的view controller。
为了管理我们的图片，我们要在程序中新建立一个文件夹
打开finder，定位到我们的Diablo3Rank文件夹，新建一个sub folder，名字为：Assets
然后在左侧的工程视图中，选择"Diablo3Rank，右键点击，选择Add Files to "Diablo3Rank"
在接下来的文件窗口中，点击"Assets"，再点击"Add"按钮
此时，左侧的project视图中，增加了我们的Assets文件夹
在Assets上点右键，继续选择"Add files to "Diablo3Rank"，选择从blizzard官网上下载的文件：该文件原名为barbarian_male.jpg，我们修改为barbarianmale_background.jpg（后面程序设置时需要）
我们再回到story board中，选中"装备" view controller，点击ImageView（刚才我们拖进去的那个控件），然后点击右侧属性栏上的"Attributes Inspector"，再点击Image下拉框，选择我们刚刚加入的barbarianmale_background.jpg
注意，图片大小会根据你拖放的Image View的大小，进行"Scale to Fill"的缩放，所以我们要修改为原始尺寸大小
点击Size Inspector，修改宽度和高度为994和665
然后我们拖动图片，居于屏幕中间（此时会出现一条水平的蓝色线以及垂直的蓝色线）。
重新点击这个"装备"的controller，选择View
然后在attribute inspector中设置背景色为黑色
再次运行程序，我们看到的效果如下：
下面的4个tab item比较别扭，因为我们还没有设置图片。
标签及装备的设置
从tool bar上分别拖放两个Lable及无数个ImgeView。
Label分别显示该英雄的巅峰等级和名字。
ImageView主要针对不同位置的装备。每个装备，都有一个底图，有5种颜色，为Blue/Orange/Brown/Green/Yellow，对应装备的不同（如暗金、蓝装等）；然后上面一层是该装备的真实图片。对于某些部分，有孔，那么要把镶孔及宝石也画出来。
最终，我们的UI如下：
运行时的效果如下
供后面编程用的outlet生成
定义新的ViewController类
然后我们需要对每个控件，生成一个outlet，以方便我们后面的代码进行赋值操作。
选择"巅峰等级：100"那个label，打开Assistant Editor。咦，怎么是UIViewController.h文件？看起来是Apple自己的东西啊！
由于我们需要对此界面进行很多编程工作，所以，我们需要定义一个新的UIViewController。
为了便于管理，同Assets目录一样，我们也在当前工程目录下面，创建一个ViewController文件夹，然后我们Add files的方式，选择这个文件夹加入到工程中。
然后在此文件夹下面，创建一个新的objective-c类，叫做UIViewControllerItem，继承自UIViewController。
文件创建成功后，重新打开story board，选择装备ViewController（标记1），在右侧inspector中选择Identity Inspector（左数第三个）（标记2），在class中，输入：UIViewControllerItem，然后回车（标记3）。回车后，我们发现在Assistant Editor中，自动打开了UIViewControllerItem.m文件。（标记4）
在.m文件中，找到@implementation UIViewControllerItem，输入两个大括号，如图
增加outlet
鼠标选择"巅峰等级：100"那个label，按住Ctrl键，。箭头出现后，拖放到两个括号中间，松开鼠标，出现一个弹出窗口，在Name中输入textParagonLevel，然后回车
回车后，我们发现在两个括号中间，多了一个变量声明。
此时点击右侧的Inspector，选择最后一个Connection Inspector，我们看到该label与ViewController有了一个reference关系。
这样，代码中就可以对该label进行赋值操作了。同理，我们把剩下的"英雄的名字"Label以及所有装备相关的ImageView，都创建好outlet。最后，我们的.M文件应该类似于这样
数据绑定
实体类的定义
下一步，我们要开始把英雄的数据显示出来。暴雪有官方的API，都是http get的方式，返回结果是json格式。
API文档地址是：http://blizzard.github.io/d3-api-docs/
首先定义一个objective-c的class，名字叫做Profile。它是对于每个暗黑3玩家的一个定义，包括区域、tag、昵称。打开profile.h文件，里面定义方法：GetHeroByID，返回一个Hero实体类型。同时定义三个property.
再打开profile.m文件，把.h文件中的GetHeroByID那行粘贴过来，去掉最后的分号，然后加上两个大括号。
对于每个profile下面的各种Hero，我们定义Hero类。
其他的Stat/Items/Follower就不详述了。
回到上面话题，我们需要根据英雄ID获取Hero实体信息，那么这个ID如何得到的呢？你可以用http://us.battle.net/api/d3/profile/senjougahara-1375/来得到Profile的json数据，随机挑一个ID，作为我们的英雄ID。
下载数据的辅助类
构造英雄的url
上面调用了NSString类的静态方法stringWithFormat，后面的格式，与传统的C的printf非常类似。唯一要注意的是，如果传递的是NSString*数据，那么要用%@，而不是%s。
有了URL之后，就可以下载数据了。
为了提高效率，下载的数据会做缓存，我们调用Helper类的DownlaodBinaryByUrl方法，缓存文件名字是：区域-tag-英雄id格式
所有缓存数据都放在Library文件夹下面的一个新子文件夹：D3CACHE
根据URL及缓存文件名称，开始下载文件
JSON的解析
根据英雄ID下载下来的数据是NSData类型的，转换为字符串后可以看到，是Json类型。
对于json数据的读取，主要是objectForKey方法。如
但是要注意，如果是string类型，那么不要用[objectForKey:keyName] stringValue，而是直接用[objectForKey:keyName即可。如
对于英雄的基本属性信息，都存放在stats节点中，包括力量/智力/各种防御指数/生命等。
对于技能，都存放在skills节点中，包括2个鼠标技能、4个键盘技能以及3个被动技能。
对于追随者，都存放在followers节点中，包括3个追随者的4个技能、6个装备。
方法的调用
这些数据处理类都写好了后，我们要开始测试了。取英雄ID：33281470来做测试吧。
在project中，打开前面定义好的UIViewControllerItem.m，在最上面增加一行profile.h的引用
然后在didLoad方法中，构造一个profile先（暂时手工构造，因为我们还没有处理profile增加、保存的功能）
然后再调用GetHeroByID，最终代码如下：
在最后一个括号上设置断点，运行一下，看hero是否能真正取到？
当程序运行到断点处后，我们在下面的debug区域，展开hero对象
Yeah！我们得到了数据！
展开Items节点，我们发现有Head/Torso/…/Offhand等各种信息。展开head看看
图片绑定
现在我们先把头盔的数据绑定到视图上。上面的ICON返回的是一个头盔图片的URL，所以我们要首先能够把图片下载并缓存起来。
在Hero文件中，定义方法GetItemImageByIconName，利用DownloadBinaryByUrl把图片下载下来并进行缓存。
然后利用UIImage的相应方法，读取一个UIImage的对象。
我们先把头盔的图片以及头盔的底图展示出来
好，头盔出来了！绿色的底图，这个头盔是一个套装。和暴雪标准的展示还有些区别，第一，绿色底图应该有一个边框。
边框设置是针对UIImage的layer设置的，有两部分组成，包括设置边框颜色以及边框宽度。
现在还要处理镶孔。头盔只有一个孔，所以我们只需要判断该装备的SocketImage1是否为空即可。如果为空，即没有孔，那么需要把镶孔和宝石图片都隐藏，否则就显示出来。
再运行一下，效果如下：
好，头盔好了，剩下的装备，依法炮制，最终运行一下，看看结果。
等一下，还有几个地方不大一样。巅峰等级、英雄名字还没有设置，而且，背景不正确，这是一个女蛮子。
So，还有几个地方要修改一下。
背景图片，则是根据Hero的ClassName拼出一个字符串，以得到对应的背景图片名称。
最终，我们的"装备"搞好了。看看效果
上面头盔对应的heroid与本图不是同一个heroID，所以有差异，原因是开始我用的那个heroid，衣服都被扒到其他英雄身上去了，所以后来我找了这个有全部装备的英雄。