Imitation Sina Weibo iOS client Iii-custom Tabbar

<span id="Label3"></p><p><p>Continue on the progress of an article, we actually completed the basic structure of the micro-bo, the implementation of the effect is as shown in the left, but we actually need to achieve the effect of the right figure, except the main page content not to talk about, just below the tabbar distance from our needs there is a considerable gap. So this article focuses on achieving the desired effect.</p></p><p><p></p></p><p><p>A brief summary of our needs:</p></p><p><p>1. We need to add a button on the basis of the original four buttons of the tabbar, as the entrance to the writing of weibo;</p></p><p><p>2. The newly added button must be distributed evenly on the Tabbar with the original button;</p></p><p><p>3. The newly added button has only pictures and no Text.</p></p><p><p>The requirements are summarized as above, let's take a look at the analysis and test first:</p></p><p><p>1. Drag a Uitabbaritem directly on the tabbarcontroller, tested, unable to drag on, this way can not meet the demand;</p></p><p><p>2. Create a new viewcontroller, drag a uitabbar, as a test, directly modify one of the default two tabbaritem, the test results are as Follows:</p></p><p><p>After using this method, the picture of Tabbaritem is completely unable to display properly, and the picture position is biased, and this method will change the original interface architecture, so this scheme is also abandoned;</p></p><p><p>Neither of the above can achieve the effect, it means that to achieve the desired effect, you can only use the last Method: custom tabbar.</p></p><p><p><span style="font-size: 18px;"><strong>one, Custom Controls</strong></span></p></p><p><p>In ios, you can customize as long as it is a control that can be displayed on the Screen. therefore, using a custom control is the best and quickest way to implement a system-provided control type that does not meet the needs of the User.</p></p><p><p><span style="font-size: 18px;">second, Custom Tabbar</span></p></p><p><p>Once the plan has been finalized, it is implemented IMMEDIATELY.</p></p><p><p>Create the Uitabbar subclass maintabbar, and set the Tabbar inheritance class in Tabbarcontroller to Maintabbar as Follows:</p></p><p><p></p></p><p style="text-align: left;"><p style="text-align: left;">Since then, the part of the setup is complete and the code begins to Enter:</p></p><p style="text-align: left;"><p style="text-align: left;">1. Create the button and add it to the tabbar.</p></p><p style="text-align: left;"><p style="text-align: left;">To add a button to the tabbar, first create the Button.</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #808080;"><span style="color: #808080;">///</span></span><span style="color: #008000;"><span style="color: #008000;">lazy Load Compose button, set picture and add to Tabbar</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span>Lazy var Composebutton:uibutton =<span style="color: #000000;"><span style="color: #000000;"> {</span></span><span style="color: #008080;"><span style="color: #008080;">3</span></span>Let btn =<span style="color: #000000;"><span style="color: #000000;">UIButton ()</span></span><span style="color: #008080;"><span style="color: #008080;">4</span></span>Btn.setimage (UIImage (named:<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">Tabbar_compose_icon_add</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">), ForState:UIControlState.Normal)</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span>Btn.setimage (UIImage (named:<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">tabbar_compose_icon_add_highlighted</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">), forState:UIControlState.Highlighted)</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span>Btn.setbackgroundimage (UIImage (named:<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">Tabbar_compose_button</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">), ForState:UIControlState.Normal)</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span>Btn.setbackgroundimage (UIImage (named:<span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">tabbar_compose_button_highlighted</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">), forState:UIControlState.Highlighted)</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Add to Parent control</span></span><span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #000000;"><span style="color: #000000;">Self.addsubview (btn)</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #008080;"><span style="color: #008080;"></span> one</span> <span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">btn</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span>}()</pre><p><p>2. Adjust the button layout</p></p><p><p>Just adding a button only proves logically that the Tabbar has a button child control, but it is not enough to display on the screen, and if it is to be displayed, it must have the exact position and Size.</p></p><p><p>For controls that have child controls, each adjustment to the position of the child control invokes its own layoutsubviews method, so we can test it in this method first to prepare for the later Work. The results of the actual tests are as Follows:</p></p><p><p></p></p><p><p>We can find that after the program is run, the Layoutsubviews method is called two times, and each time it prints out 6 child controls, except for the buttons that correspond to the four child view controllers, There are two other controls, and each control has detailed information such as location, size, and so On.</p></p><p><p>But we just have to focus on the four buttons, because we just need to adjust the position of the button and insert the button we created in the Middle. The biggest difference between the four buttons relative to the other two controls is that the four buttons are the responder type, while the other two are not, and can be seen from their userinteractionenabled = No.</p></p><p><p>The initial code and implementation effects are as shown in left and right:</p></p><p><p></p></p><p><p>We found that the two buttons on the right side are also on the left, so we need to make adjustments and add the size setting to the central compose Button. The final implementation is as Follows:</p></p><pre> <span style="color: #0000ff;"><span style="color: #0000ff;">Private</span></span>Let Buttoncount =<span style="color: #800080;"><span style="color: #800080;">5</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">Override</span></span><span style="color: #000000;"><span style="color: #000000;">func layoutsubviews () {super.layoutsubviews ()</span></span><span style="color: #808080;"><span style="color: #808080;">///</span></span><span style="color: #008000;"><span style="color: #008000;">set the width and datum dimensions of each button</span></span>Let w = self.bounds.width/<span style="color: #000000;"><span style="color: #000000;">cgfloat (buttoncount) Let H</span></span>=<span style="color: #000000;"><span style="color: #000000;">Self.bounds.height Let frame</span></span>= CGRectMake (<span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">, w, h) var index:cgfloat</span></span>=<span style="color: #800080;"><span style="color: #800080;">0</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>View<span style="color: #0000ff;"><span style="color: #0000ff;">inch</span></span>Self.subviews<span style="color: #0000ff;"><span style="color: #0000ff;"></span> as</span>!<span style="color: #000000;"><span style="color: #000000;">[UIView] {</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(view<span style="color: #0000ff;"><span style="color: #0000ff;"></span> is</span>Uicontrol &&! (view<span style="color: #0000ff;"><span style="color: #0000ff;"></span> is</span><span style="color: #000000;"><span style="color: #000000;">UIBUTTON)) { </span></span><span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008000;"><span style="color: #008000;">* * The current control is a responder object and is not a UIButton type when the reference sets the dimension position</span></span><span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #000000;"><span style="color: #000000;">View.frame</span></span>= Cgrectoffset (frame, Index * w,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">) Index</span></span>+ = (index = =<span style="color: #800080;"><span style="color: #800080;">1</span></span>) ?<span style="color: #800080;"><span style="color: #800080;">2</span></span>:<span style="color: #800080;"><span style="color: #800080;">1</span></span><span style="color: #000000;"><span style="color: #000000;"> } } </span></span><span style="color: #008000;"><span style="color: #008000;">/*</span></span><span style="color: #008000;"><span style="color: #008000;">* * Set the size and position of the compose button</span></span><span style="color: #008000;"><span style="color: #008000;">*/</span></span><span style="color: #000000;"><span style="color: #000000;">Self.composeButton.frame</span></span>=<span style="color: #000000;"><span style="color: #000000;">Frame Self.composeButton.center</span></span>= Cgpointmake (self.bounds.width *<span style="color: #800080;"><span style="color: #800080;">0.5</span></span>, Self.bounds.height *<span style="color: #800080;"><span style="color: #800080;">0.5</span></span><span style="color: #000000;"><span style="color: #000000;"> ) }</span></span></pre><p><p></p></p><p><p>3. Set the Click event of the Compose button</p></p><p><p>The Compose button will perform the corresponding action later, so it is also necessary to respond to the event, where we add a click event for the Compose Button.</p></p><p><p>Back to the initial Maintabbarcontroller class, adjust the viewdidload method, add a click event to the Compose button, and implement the method called by the click event, and test as Follows:</p></p><p><p></p></p><p><p>At this point, the work of customizing Tabbar is all DONE.</p></p><p><p></p></p><p><p>Zatan</p></p><p><p>1. Development Ideas</p></p><p><p>Before actually putting into development, developers often do not quite determine which way or means to complete the development tasks, so in the accompanying development process, the developer is often the side of the development, try different scenarios, and finally find out what can be achieved (it is also possible that the scenario found at this time is not the best). therefore, in our usual development, for more independent or more independent functions or modules, can be used in another project testing, completion, implementation, and then transplanted into the normal development of the code in the Pattern. This approach is also a way to minimize the impact of normal Development.</p></p><p><p>Some developers after receiving the demand, like to find a way that they think possible to implement, and then develop, and hope that once run debugging success, if encountered a problem, once the original plan can not get through, it is possible to give up, start Again. In fact, encountering bugs and problems is a common occurrence for developers, so this is not a desirable way to start. Here I suggest that developers who "haven't had a proven development model" follow the development approach and ideas of "backward from demand."</p></p><p><p>In Apple's current solution, the removal of very cutting-edge problems could not be achieved, other so-called "tall" problems can be solved, provided that the right solution can be found, in addition to the 1th of the many attempts, but more importantly, the use of backward methods, We can gradually clarify the technical points and ideas used in the scheme, which is the most important reason I recommend this way.</p></p><p><p>2. Print debugging information</p></p><p><p>In development, developers often use the way they print debugging information to determine whether the code logic is Correct. But because the output of the Swift language is not smart enough at the moment, the printed results are usually concatenated directly. There is a good interoperability between OC and Swift, and the format of OC when printing debug information is very clean and tidy, so when printing Swift's debugging information, Swift objects can be converted to OC objects for clearer and clearer results.</p></p><p><p></p></p><p><p>Imitation Sina Weibo iOS client Iii-custom Tabbar</p></p></span>