Skip to content


DSkinlite Tip of the Day #2 Using Radio Button to make a Tab Control

 

 radiobtnTab1

In the interface development, we often need to use the Tab control to switch the page to do, but some restrictions Tab controls redraw itself, and sometimes can not meet our needs.Some of the developers will consider developing a similar Tab Control in control to simulate the Tab Control feature, it is complicated and will take a long time.

       In fact, we can also use a group of radio buttons to simulate the tab control feature. Look closely,  you will find that a group of radio buttons have the same  behavior with a  tab control. If you set the radio button property "Push Like", it would be easier to see out the similarity.  As  DSkinLite supports radio button drawing fully, we can use a group of radio buttons to make a "tab control" and use dskinlite to skin them. As shown below:

image

In this condition,  each radio button  can be treated independently, there is greater flexibility, such as the size and style can be adjusted easily.

The following is the first radio button style definiton in the corresponding XML (and the same to a common definition of radio button ):

<window name="checkbtn_run" type="button">
    <property   width="76" height="67"/>
    <buttoninfo subtype="check" />
   <image state="normal" picfile="#checkbtn.running.nor"  />
   <image state="over"   picfile="#checkbtn.running.nor"  />
   <image state="checked" picfile="#checkbtn.running.sel"  />
   <image state="checkedover" picfile="#checkbtn.running.sel"  />
   <text state="normal" font="#default" horzalign="center" top="46" vertalign="top" bsingleline="true" textcolor="RGB(0,0,0)" />
   <text state="over" font="#default" horzalign="center" top="46" vertalign="top" bsingleline="true" textcolor="RGB(0,0,0)" />
  <text state="checked" font="#default_bold" horzalign="center" top="46" vertalign="top" bsingleline="true" textcolor="RGB(0,0,0)" />
  <text state="checkedover" font="#default_bold" horzalign="center" top="46" vertalign="top" bsingleline="true" textcolor="RGB(0,0,0)" />

</window>

 

The example above just uses the radio buttons to make a "tab control" . It is a simple example, you can implement it easily even you use the standard tab control. But the following example  is not easy to achieve if you use the standard tab control. It also demonstrates the flexibility of using the radio buttons.

radiobtn_subbtn

 

In the example above, "Today Down" and "History" are  two radio buttons, and each radio button has a child button. In this situation, it is  more easily to achieve using radio button, but it is difficult to implement using the tab control.

In summary, it is a good choice to use a group of radio buttons to assemble a tab control .

Posted in DSkinLite.

Tagged with , , .