1.先初始化侧边的duck,效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/622c30e5051863eb89da4435048228d7.gif)
实现步骤;
![](https://i-blog.csdnimg.cn/blog_migrate/d2b7a84f9b4af29b0848ddf3e5a9f8f6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a377a96bee68413193fd95da9336c2af.png)
![](https://i-blog.csdnimg.cn/blog_migrate/6cf35ace6ec770454d1ac7b012cbeb30.png)
![](https://i-blog.csdnimg.cn/blog_migrate/aaa072486643bf8ae154fd539dbf5d0f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0f009422450205418711c7110c0b270f.png)
2.然后初始化BottomMenu,效果:
![](https://i-blog.csdnimg.cn/blog_migrate/388850bc62705ca19ff5338a7f377b49.gif)
步骤:
![](https://i-blog.csdnimg.cn/blog_migrate/94bf174fb625670c27709ae80fbbec10.png)
![](https://i-blog.csdnimg.cn/blog_migrate/03a5df3f352fe30417c211e335035f27.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2ab4fe9bcce4441c278702218b4864de.gif)
子控件的位置移高了,主要原因是:
![](https://i-blog.csdnimg.cn/blog_migrate/bf069e43ee54caed9dc005bbe7aa173b.png)
逻辑分析图:
![](https://i-blog.csdnimg.cn/blog_migrate/f142437ac008fd9fe42617a62c785b3e.png)
问题解决,可以添加一个底部自动布局:
![](https://i-blog.csdnimg.cn/blog_migrate/93ad98f30d26700429f9e3655e9eee9a.png)
3.然后初始化Tarbar,效果:
![](https://i-blog.csdnimg.cn/blog_migrate/2c1ba1baf9f7d73c25b9b02c7e6bacd2.gif)
步骤,步骤基本和 一样,这里就简单呈现:
![](https://i-blog.csdnimg.cn/blog_migrate/19a764e2a8916268f84972f0d9067747.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9dd24fc59192b3ef57f03a6fb6a8f18b.png)
4.初始化IconButton效果:
![](https://i-blog.csdnimg.cn/blog_migrate/89091aa7cac545d8c73909e0374d2e0c.gif)
步骤;
![](https://i-blog.csdnimg.cn/blog_migrate/f55e68405a2b0127c9983b8854b914fc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd2bbee70e516dbb5fe370489bc6ee91.png)
![](https://i-blog.csdnimg.cn/blog_migrate/554a1254fd9b9fcc2bb602e8e6285eb9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4ff45514ed3f5442e649e51728f7a740.png)
5.初始化BottomMenu子控件效果:
![](https://i-blog.csdnimg.cn/blog_migrate/f5c8876ab2bef01e513911f4943fa888.gif)
需要添加的代码:
![](https://i-blog.csdnimg.cn/blog_migrate/5a405e59513a158fb84340c342b18eab.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2dde71669d1fd2336f012b735054841b.png)
6、添加ContentView
![](https://i-blog.csdnimg.cn/blog_migrate/74e0ea88ff8d9e8c7f418b903794b6f6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3f54b63bf76770c6683eb039186ce1cf.png)
7、设置Tarbar子控件,效果图前面一张图蓝色区域就是,这里就不给了:
![](https://i-blog.csdnimg.cn/blog_migrate/f6a89c196b970b21188f0153d6ab7f0c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/76cd77e0dd21b69014385f809bbaab1e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3a59572aad09ba18ad8f174ef051cb3f.png)
如果没有self.imageView.contentMode =UIViewContentModeCenter:
![](https://i-blog.csdnimg.cn/blog_migrate/08985f4fe3237c2dd9b5183f2edf41c4.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c1697fe32a50c212435c8b3d63462fe9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d299010f0bdbeff0ef7c9ce61a11f756.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d5c8bd6650872a5fddf10ab94b2eb8be.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0fb6d73df7f59215b87a40fbd296c9b1.png)
8、设置IconButton,效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/0fcaee9536e355f747b36ed09f79e742.png)
![](https://i-blog.csdnimg.cn/blog_migrate/3494e13d46788aa2689e0a0656aeed71.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40657c57dec575bd2eaa20a371e3be2a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b5de163c7bfabac78e0d19124c6c732a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c0634190a91d9f45f2429e81343d8d3e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/01e4ccdf71d01854fa79f9357535b70d.png)