IOS开发之——QQ主流框架
<p>文章搬运来源：https://blog.csdn.net/Calvin_zhou/article/details/110517815<br>作者：PGzxc（如有侵权，联系作者，立即删除）</p>
<p><strong>对iOS开发感兴趣，可以看一下作者的iOS交流群：812157648，大家可以在里面吹水、交流相关方面的知识，群里还有我整理的有关于面试的一些资料，欢迎大家加群，大家一起开车</strong></p>
<h2 id="一-概述">一 概述</h2>
<p>本文搭建QQ主流框架程序，包含以下功能：</p>
<ul>
<li>底部有：消息、联系人、动态、设置四个按钮，通过按钮切换对应的界面</li>
<li>每个界面有界面布局和按钮
<ul>
<li>联系人界面：UISegmentedControl切换和添加联系人按钮跳转到联系人添加界面</li>
<li>动态、设置页面：分组</li>
</ul>
</li>
</ul>
<h2 id="二-qq主流框架mainstoryboard">二 QQ主流框架(Main.storyboard)</h2>
<h3 id="21-界面拖拽布局">2.1 界面拖拽布局</h3>
<ul>
<li>移除旧的布局(xcode自动生成)</li>
<li>添加一个TabBarController作为主程序界面</li>
<li>依次添加4个Navigation Controller(消息、联系人、动态、设置)</li>
</ul>
<h3 id="22-连线">2.2 连线</h3>
<ul>
<li>在TabBarController上右键view controllers，分别连接到消息、联系人、动态、设置四个Navigation Controller上</li>
</ul>
<h3 id="23-设置navigation-controller上的文字和图片">2.3 设置Navigation Controller上的文字和图片</h3>
<ul>
<li>点击消息(Navigation Controller)，在右侧设置显示的问题和图片</li>
<li>同理，设置其他三个Navigation Controller</li>
</ul>
<p><img src="https://upload-images.jianshu.io/upload_images/25330009-8ee7d8eb003f90ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></p>
<h2 id="三-界面详情">三 界面详情</h2>
<h3 id="31-消息">3.1 消息</h3>
<ul>
<li>点击Navigation Item设置Title为消息</li>
<li>添加Bar Button Item，并修改显示的图片</li>
</ul>
<h3 id="32-联系人">3.2 联系人</h3>
<h4 id="321-界面修改">3.2.1 界面修改</h4>
<ul>
<li>添加Segmented Control，并设置Segments为2；Segments-0为分组，Segments-1为全部</li>
<li>添加Bar Button Item，并修改图标为添加联系人</li>
</ul>
<h4 id="322-segmented事件">3.2.2 Segmented事件</h4>
<ul>
<li>
<p>新建ContactTableViewController，并关联联系人控制器</p>
</li>
<li>
<p>ContactTableViewController中添加Segmented事件方法</p>
<pre><code>- (IBAction)valueChange:(UISegmentedControl *)sender
{
NSLog(@"%d",sender.selectedSegmentIndex);
}
</code></pre>
</li>
</ul>
<h4 id="323-添加联系人跳转">3.2.3 添加联系人跳转</h4>
<ul>
<li>点击添加联系人Bar Button Item，show关联到添加联系人界面</li>
</ul>
<h3 id="33-动态设置分组">3.3 动态、设置(分组)</h3>
<ul>
<li>点击TabView，Content下拉选择Static Cells</li>
<li>Style下拉选择Grouped</li>
<li>点击Grouped中的单元格，Style下拉选择Basic，Accessory下拉选择Disclosure Indicator(右箭头)，同时设置显示文字(好友动态)和对应图片</li>
<li>同理设置其他分组</li>
</ul>
<h2 id="四-效果图">四 效果图</h2>
<p><img src="https://upload-images.jianshu.io/upload_images/25330009-eda4a6c4809a1a80.gif?imageMogr2/auto-orient/strip"></p><br><br>
来源：https://www.cnblogs.com/fadaijun/p/14325526.html
頁:
[1]