标签:
最近用上了印象笔记,觉得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
标签:
原文地址:http://blog.csdn.net/u013598660/article/details/50620239