仿Android印象笔记底部导航栏

yesiammay 5年前

来自: 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