Android custom control: the third-level menu of the old version of Youku (effect chart + Demo ),

Android custom control: third-level menu (+ Demo) of Youku of the old version ),

:

Production ideas:

1. Analyze this effect first. In fact, it can be understood that three levels of menus are divided into level1, level2, level3, and level1, which are always displayed. After you click level1, level2 appears. After you click level2, level3 appears. After level2 and level3 appear, click level1 and level2 and level3 disappear. Then we used an animation to disappear and appear.

2. the animation effect uses RotateAnimation. Because we all use the same effect, we only need to write a class and implement the effect. If we use RotateAnimation, we will continue to reuse some code, so that the development efficiency will be relatively low.

3. RotateAnimation's rotation is a pitfall-as it rotates clockwise on the X axis. You can see the figure below:

The overall idea is as follows:

Code:

1. MyAnimation class:

public class MyAnimation{public static void animationIn(View view){animationIn(view,0);}public static void animationOut(View view){animationOut(view,0);}public static void animationIn(View view,long delay){RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());animation.setDuration(500);animation.setFillAfter(true);animation.setStartOffset(delay);view.startAnimation(animation);}public static void animationOut(View view,long delay){RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());animation.setDuration(500);animation.setFillAfter(true);animation.setStartOffset(delay);view.startAnimation(animation);}}

2. MainActivity class:

public class MainActivity extends Activity implements OnClickListener{private boolean isLevel2showed,isLevel3showed;private RelativeLayout level1,level2,level3;private ImageButton home,menu;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);isLevel2showed = false;isLevel3showed = false;initLayout();initImageButton();}public void initLayout() {level1 = (RelativeLayout)findViewById(R.id.relate_level1);level2 = (RelativeLayout)findViewById(R.id.relate_level2);level3 = (RelativeLayout)findViewById(R.id.relate_level3);level2.setVisibility(View.INVISIBLE);level3.setVisibility(View.INVISIBLE);}public void initImageButton() {home = (ImageButton)level1.findViewById(R.id.home);menu = (ImageButton)level2.findViewById(R.id.menu);home.setOnClickListener(this);menu.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch(v.getId()){case R.id.home:if(!isLevel2showed){isLevel2showed = true;MyAnimation.animationIn(level2);}else if(!isLevel3showed){isLevel2showed = false;MyAnimation.animationOut(level2);}else{isLevel2showed = false;isLevel3showed = false;MyAnimation.animationOut(level3);MyAnimation.animationOut(level2,500);}break;case R.id.menu:if(!isLevel3showed){isLevel3showed = true;MyAnimation.animationIn(level3);}else{isLevel3showed = false;MyAnimation.animationOut(level3);}break;}}}

Source code download