仿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

仿Android印象筆記底部導覽列