Navigation bar at the bottom of the imitation Android Evernote

Navigation bar at the bottom of the imitation Android Evernote

I recently used my Evernote and thought that the navigation bar at the bottom of the android version is quite good. It is useful in many applications and I want to implement it myself. I will not talk about it here. First:

To achieve this effect. You need to customize ViewGroup.
1. onMeasure (measurement process)
2. onLayout)
3. Add an animation

OnMeasure (measurement process)

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        int count = getChildCount();        for (int i = 0; i
  

OnLayout (layout)

 @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { View btn_main = getChildAt(getChildCount()-1); int left = 0;int top = 0; if (changed){ for (int i = getChildCount()-1 ;i >= 0;i--){ View viewChild = getChildAt(i); int width = viewChild.getMeasuredWidth(); int height = viewChild.getMeasuredHeight(); left = getMeasuredWidth()- width; top = getMeasuredHeight() - height-distance; viewChild.layout(left,top,getMeasuredWidth(),getMeasuredHeight()); distance += getDisension(100); } btn_main.setOnClickListener(this); changeState(currentState); } }

Add an animation

public void openTranslateAnimation(View view){ distance = 0; RotateAnimation animation = new RotateAnimation(0f,45f, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF,0.5f); animation.setDuration(500); animation.setFillAfter(true); view.startAnimation(animation); for (int i = getChildCount()-2;i>= 0; i--){ View childView = getChildAt(i); view.setVisibility(View.VISIBLE); TranslateAnimation translate = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0.35f, Animation.RELATIVE_TO_SELF, 0); translate.setDuration(100); translate.setStartOffset(10*offset); translate.setFillAfter(true); childView.startAnimation(translate); offset++; } } public void closeTranslateAnimation(View view){ distance = 0; RotateAnimation animation = new RotateAnimation(45f,0, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF,0.5f); animation.setDuration(500); animation.setFillAfter(true); view.startAnimation(animation); for (int i = getChildCount()-2;i>= 0; i--){ View childView = getChildAt(i); view.setVisibility(View.VISIBLE); TranslateAnimation translate = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0.35f); translate.setDuration(100); translate.setStartOffset(50*offset); childView.startAnimation(translate); offset++; } }

Let's take a look at the main layout:

<Code class = "hljs java"> <code class = "hljs xml"> <com. xby. fm. view. stackmenu android: layout_width = "match_parent" android: layout_height = "match_parent" android: layout_marginright = "20dp" android: layout_marginbottom = "20dp"> <linearlayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: paddingright = "10dp" android: text = "Homepage"> <imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ mipmap/ic_menu_item"> </imageview> </textview> </linearlayout> <linearlayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: paddingright = "10dp" android: text = "My music"> <imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ mipmap/ic_menu_item"> </imageview> </textview> </linearlayout> <linearlayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: paddingright = "10dp" android: text = "My favorites"> <imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ mipmap/ic_menu_item"> </imageview> </textview> </linearlayout> <linearlayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: orientation = "horizontal" android: gravity = "center"> <textview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: paddingright = "10dp" android: text = "personal Center"> <imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ mipmap/ic_menu_item"> </imageview> </textview> </linearlayout> <imageview android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: src = "@ mipmap/ic_main_menu"> </imageview> </com. xby. fm. view. stackmenu> </code>

Relatively simple. Go to the git address: StackMenu