仿Android印象笔记底部导航栏

最近用上了印象笔记，觉得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

更多相关文章

随机推荐