Android UI Design Series of custom Switchbutton switches to achieve similar iOS uiswitch animation effect (2) _android

iOS developers know that iOS provides a dynamic switching effect of the Uiswitch components, this component is very useful and relatively beautiful, when we go to click on the switch when the animation effect, but unfortunately Android does not give us a similar component ( I heard that a dynamic switch component was available on the Android4.0 version, but I haven't looked at the document yet, what if we want to achieve a similar effect? It's going to have to be customized again.
The company's products have been doing upgrades, mainly to do is to make the interface to do more gorgeous more beautiful to the user experience (alas, the customer is God ...), the setting function has the switch button, the original switch does is two pictures, by clicking the picture to give the switch to set the different state picture, But the effect is very inflexible and the overall style of the program is not very coordinated, so I want to achieve similar to the switch effect in iOS.
Draw a pen on the drawing, I realized the principle is also using two pictures, a whole background: and a small slider diagram:, with the small slider diagram to achieve in the background image sliding, when the small slider slide to the left just blocked the opening words, is shown off, The same principle when the small slider slide to the right to cover the closed word is the reality of the Open, the main use of sliding is the Translateanimation class, such as the translateanimation is not too familiar with, ask the degree Niang, She that about the translateanimation of the explanation to go, after all, their hands, plenty of food and clothing, (*^__^*) Xi hee ...
Okay, let's take a look at the structure of the project:

Project Switch_button.xml file is the corresponding Switchbutton layout file, the content does not need to explain, you can understand

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= 
 "http://schemas.android.com/" Apk/res/android " 
 android:id=" @+id/switch_parent " 
 android:layout_width=" Wrap_content " 
 android: layout_height= "Wrap_content" 
 android:background= "@drawable/switch_bg" > 
 
 <imageview 
  android:id = "@+id/switch_button" 
  android:layout_width= "wrap_content" 
  android:layout_height= "Wrap_content" 
  android:src= "@drawable/switch_btn"/> 
 
</LinearLayout> 

The root node in the Switchbutton layout file is a linearlayout, setting its background to a picture containing the switch text, which contains a imageview, which is used to slide through the linearlayout.
Where the custom switch components are all under the Wedgit package of Switchbutton, then quickly look at the Switchbutton code

public class Switchbutton extends LinearLayout {/** * switch picture * * Private linearlayout switchparent; 
 /** * Slide Block picture * * Private ImageView Switchbutton; 
 /** * button state, default close/private Boolean ISON = false; 
 /** * Slider needs to slide the distance * * private int scrolldistance; 
 
 /** * Switch Button listener * * Private switchchangedlistner Listner; 
  Public Switchbutton {Super (context); 
 Initwedgits (context); 
  Public Switchbutton (context, AttributeSet attrs) {Super (context, attrs); 
 Initwedgits (context); 
   /** * Initialization Component * * @param context * Contextual environment/private void Initwedgits {try { 
   View view = Layoutinflater.from (context). Inflate (R.layout.switch_button, this); 
   Switchparent = (linearlayout) View.findviewbyid (r.id.switch_parent); 
   Switchbutton = (ImageView) View.findviewbyid (R.id.switch_button); 
  Addlisteners (); 
  catch (Exception e) {e.printstacktrace (); 
 } 
 } 
 
 /** * Add event Listener/private void addlisteners () {try {Switchparent.setonclicklistener () {new Onclicklistener () { 
     @Override public void OnClick (View v) {ison =!ison; 
     Scrollswitch (); 
     if (null!= listner) {//switch developed or Closed callback method listner.switchchanged (GetId (), ISON); 
  } 
    } 
   }); 
  catch (Exception e) {e.printstacktrace (); }/** * Sliding switch/private void Scrollswitch () {//Get the distance the slider needs to slide, the sliding distance equals the width of the parent build minus the width of the slider scrolldistance = SW 
  Itchparent.getwidth ()-switchbutton.getwidth (); 
  Initialize the sliding event Animation Animation = null; 
  if (ISON) {animation = new Translateanimation (0, scrolldistance, 0, 0); 
  else {animation = new Translateanimation (scrolldistance, 0, 0, 0); 
  //Set sliding time animation.setduration (200); 
  Keep the state animation.setfillafter (true) after sliding; 
 Start sliding switchbutton.startanimation (animation); /** * Get Switch status * * @return "true: Open" "false: Off" */public Boolean ISON () {return ISON;  /** * Set Switch state * * @param ISON * Switch Status "true: Open" "false: Off"/public void SetOn (Boolean ison) {if (This.ison = = ISON) 
  {return; 
  } This.ison = ISON; 
   Post (new Runnable () {@Override public void run () {scrollswitch (); 
 } 
  }); /** * Set Switch State listener * * @param listner * Switch status Listener/public void Setonswitchlistner (SWITCHCHANGEDLISTN 
 Er listner) {this.listner = Listner; 
   /** * Switch State Listener * * @author Llew * */public interface Switchchangedlistner {/** * switch state change * * @param VIEWID * Current Switch ID * @param ISON * switch is turned on "true: Open" "false: Off"/public void Switchchan 
 Ged (Integer Viewid, Boolean ISON); 
 } 
}

The implementation of the

Switchbutton is also simple, starting with the initialization component Initwedgits (), and then adding the event listener addlisteners (), making logical judgments in the listener, with comments on the code, and no longer detailing
so at the end, Let's take a look at the use of Switchbutton in mainactivity.

public class Mainactivity extends activity {private Switchbutton Switchbutton; /** called the activity is a. 
  * * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
  Setcontentview (R.layout.main); 
 Initwedgits (); /** * Initialize components/private void Initwedgits () {try {Switchbutton = (Switchbutton) Findviewbyid (R.ID.SW 
   Itchbutton); 
   Switchbutton.seton (FALSE); 
   Switchbutton.seton (TRUE); 
  Addlisteners (); 
  catch (Exception e) {e.printstacktrace (); }/** * Add event Listener/private void addlisteners () {try {Switchbutton.setonswitchlistner) (new SWITCHC Hangedlistner () {@Override public void switchchanged (Integer viewid, Boolean ison) {if (ISON) {to 
     Ast.maketext (Getapplicationcontext (), "Switch turned on", Toast.length_long). Show (); 
     else {Toast.maketext (Getapplicationcontext (), switch off, Toast.length_long). Show (); 
   } } 
   }); 
  catch (Exception e) {e.printstacktrace (); 
 } 
 } 
}

OK, the code is all posted, next look at the operation of the effect bar, (*^__^*) Xi hee ...

Unfortunately, the wood has animation effect, whining ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
OK, basically the custom switch component here is finished, if there is not enough, please understand.

SOURCE Download: Android UI to achieve Uiswitch animation effect like iOS

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.