仿Android印象笔记底部导航栏
yesiammay
9年前
来自: http://blog.csdn.net/u013598660/article/details/50620239
最近用上了印象笔记,觉得android 版的底部导航栏挺不错的,好多应用里面都有用到,想着自己动手实现一下,不多说,先上图:
要完成这样的效果。需要自定义ViewGroup.
1、onMeasure(测量过程)
2、onLayout(布局)
3、添加动画
onMeasure(测量过程)
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int count = getChildCount(); for (int i = 0; i<count;i++){ View viewChild = getChildAt(i); measureChild(viewChild,widthMeasureSpec,heightMeasureSpec); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); }
onLayout(布局)
@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); } }
添加动画
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++; } }
看一下主布局:
<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="首页" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_menu_item" /> </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="我的音乐" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_menu_item" /> </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="我的收藏" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_menu_item" /> </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="个人中心" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_menu_item" /> </LinearLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_main_menu" /> </com.xby.fm.view.StackMenu>
比较简单,上一下git地址:StackMenu