码迷,mamicode.com
首页 > 移动开发 > 详细

仿Android印象笔记底部导航栏

时间:2016-02-02 15:14:43      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

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

仿Android印象笔记底部导航栏

标签:

原文地址:http://blog.csdn.net/u013598660/article/details/50620239

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!