[Android UI] implements the split Button, which imitates the MIUI setting Button on the top of the page

Function:

The spliced Button.

Instructions for use:

Use RidaoGroup to wrap several RidaoButton pairs for stitching.

Still look at the picture, more real !!!

 

The page is relatively simple, and this function is not very difficult .. This is only one of the implementation methods. For more information, see.

Let's take a look at the code below:

Interface Activity:

[Html]
Package com. bbswp. topbuttondemo;
 
Import com. bbswp. topbuttondemo. view. SegmentedRadioGroup;
 
Import android. app. Activity;
Import android. OS. Bundle;
Import android. view. View;
Import android. widget. RadioGroup;
Import android. widget. RadioGroup. OnCheckedChangeListener;
Import android. widget. Toast;
 
Public class MainActivity extends Activity implements OnCheckedChangeListener {
 
@ Override
Protected void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. activity_main );
 
SegmentedRadioGroup group = (SegmentedRadioGroup) findViewById (R. id. segment_text );
Group. setOnCheckedChangeListener (this );
 
}
 
@ Override
Public void onCheckedChanged (RadioGroup group, int checkedId ){
Switch (checkedId ){
Case R. id. button_one:
Toast (1 );
Break;
 
Case R. id. button_two:
Toast (2 );
Break;
 
Case R. id. button_three:
Toast (3 );
Break;
 
Default:
Break;
}
 
}
 
Public void onClick (View view ){
Toast (4 );
}
 
Private void toast (int id ){
Toast. makeText (this, "click:" + id, 0). show ();
}
 
}

 

A custom View is used to package RidaoButton.

Check the Code:

[Html]
/*
* Copyright (C) 2011 Make Ramen, LLC
*
* Licensed under the Apache License, Version 2.0 (the "License ");
* You may not use this file before t in compliance with the License.
* You may obtain a copy of the License
*
* Http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* Distributed under the License is distributed on an "as is" BASIS,
* Without warranties or conditions of any kind, either express or implied.
* See the License for the specific language governing permissions and
* Limitations under the License.
*/
 
Package com. bbswp. topbuttondemo. view;
 
Import com. bbswp. topbuttondemo. R;
 
Import android. content. Context;
Import android. util. AttributeSet;
Import android. widget. RadioGroup;
 
Public class SegmentedRadioGroup extends RadioGroup {
 
Public SegmentedRadioGroup (Context context ){
Super (context );
}
 
Public SegmentedRadioGroup (Context context, AttributeSet attrs ){
Super (context, attrs );
}
 
@ Override
Protected void onFinishInflate (){
Super. onFinishInflate ();
ChangeButtonsImages ();
}
 
Private void changeButtonsImages (){
Int count = super. getChildCount ();
 
If (count> 1 ){
Super. getChildAt (0). setBackgroundResource (R. drawable. segment_radio_left );
For (int I = 1; I <count-1; I ++ ){
Super. getChildAt (I). setBackgroundResource (R. drawable. segment_radio_mid );
}
Super. getChildAt (count-1). setBackgroundResource (R. drawable. segment_radio_right );
} Else if (count = 1 ){
Super. getChildAt (0). setBackgroundResource (R. drawable. segment_radio_button );
}
}
}

 

Xml is indispensable for the interface... Check it out:
 
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Xmlns: tools = "http://schemas.android.com/tools"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent"
Android: orientation = "vertical"
Tools: context = ". MainActivity">
 
<Com. bbswp. topbuttondemo. view. SegmentedRadioGroup
Android: id = "@ + id/segment_text"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "5dip"
Android: checkedButton = "@ + id/button_one"
Android: gravity = "top | center"
Android: orientation = "horizontal">
 
<RadioButton
Android: id = "@ id/button_one"
Android: button = "@ null"
Android: gravity = "center"
Android: minHeight = "33dip"
Android: minWidth = "40dip"
Android: text = "I am the first"
Android: textAppearance = "? Android: attr/textAppearanceSmall "/>
 
<RadioButton
Android: id = "@ + id/button_two"
Android: button = "@ null"
Android: gravity = "center"
Android: minHeight = "33dip"
Android: minWidth = "40dip"
Android: text = "I am the second"
Android: textAppearance = "? Android: attr/textAppearanceSmall "/>
 
<RadioButton
Android: id = "@ + id/button_three"
Android: button = "@ null"
Android: gravity = "center"
Android: minHeight = "33dip"
Android: minWidth = "40dip"
Android: text = "I am the third"
Android: textAppearance = "? Android: attr/textAppearanceSmall "/>
</Com. bbswp. topbuttondemo. view. SegmentedRadioGroup>
 
<Com. bbswp. topbuttondemo. view. SegmentedRadioGroup
Android: id = "@ + id/segment_text"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "5dip"
Android: checkedButton = "@ + id/button_one"
Android: gravity = "center_horizontal"
Android: orientation = "horizontal">
 
<RadioButton
Android: id = "@ + id/button_four"
Android: button = "@ null"
Android: gravity = "center"
Android: minHeight = "33dip"
Android: minWidth = "40dip"
Android: onClick = "onClick"
Android: text = "I Am a separate"
Android: textAppearance = "? Android: attr/textAppearanceSmall "/>
</Com. bbswp. topbuttondemo. view. SegmentedRadioGroup>
 
</LinearLayout>

There are also four important drawable files for display by pressing:

Segment_radio_button.xml
[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: state_enabled = "false" android: drawable = "@ drawable/segment_grey"/>
<Item android: state_focused = "true" android: state_checked = "true" android: state_pressed = "false" android: drawable = "@ drawable/segment_grey_focus"/>
<Item android: state_focused = "true" android: state_checked = "false" android: state_pressed = "false" android: drawable = "@ drawable/segment_white_focus"/>

<Item android: state_pressed = "true" android: drawable = "@ drawable/segment_grey_press"/>
<Item android: state_checked = "false" android: drawable = "@ drawable/segment_white"/>
<Item android: drawable = "@ drawable/segment_grey"/> <! -- Default -->
</Selector>

Followed by left:

Segment_radio_left.xml
[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: drawable = "@ drawable/segment_radio_grey_left_focus" android: state_checked = "true" android: state_focused = "true" android: state_pressed = "false"/>
<Item android: drawable = "@ drawable/segment_radio_white_left_focus" android: state_checked = "false" android: state_focused = "true" android: state_pressed = "false"/>
<Item android: drawable = "@ drawable/segment_radio_grey_left_press" android: state_pressed = "true"/>
<Item android: drawable = "@ drawable/segment_radio_white_left" android: state_checked = "false"/>
<Item android: drawable = "@ drawable/segment_radio_grey_left"/>
 
</Selector>

Medium:

Segment_radio_mid.xml
[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: state_focused = "true" android: state_checked = "true" android: state_pressed = "false" android: drawable = "@ drawable/segment_radio_grey_middle_focus"/>
<Item android: state_focused = "true" android: state_checked = "false" android: state_pressed = "false" android: drawable = "@ drawable/segment_radio_white_middle_focus"/>

<Item android: state_pressed = "true" android: drawable = "@ drawable/segment_radio_grey_middle_press"/>
<Item android: state_checked = "false" android: drawable = "@ drawable/segment_radio_white_middle"/>
<Item android: drawable = "@ drawable/segment_radio_grey_middle"/>
</Selector> www.2cto.com

Right:

Segment_radio_right.xml
[Html]
<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item android: state_focused = "true" android: state_checked = "true" android: state_pressed = "false" android: drawable = "@ drawable/segment_radio_grey_right_focus"/>
<Item android: state_focused = "true" android: state_checked = "false" android: state_pressed = "false" android: drawable = "@ drawable/segment_radio_white_right_focus"/>

<Item android: state_pressed = "true" android: drawable = "@ drawable/segment_radio_grey_right_press"/>
<Item android: state_checked = "false" android: drawable = "@ drawable/segment_radio_white_right"/>
<Item android: drawable = "@ drawable/segment_radio_grey_right"/>
 
</Selector>