Android基于2.3 底部平滑导航

 

 

今天给大家分享一个实现底部背景图片平滑切换动画效果

来看看主要代码：

 

public void init(){
        //tabHost = (TabHost) this.findViewById(R.id.tabHost);
        tabHost = this.getTabHost();
        TabSpec indexTab = tabHost.newTabSpec("index").setIndicator("index");
        indexTab.setContent(new Intent(this, IndexActivity.class));
        tabHost.addTab(indexTab);

        TabSpec messageTab = tabHost.newTabSpec("message").setIndicator("message");
        messageTab.setContent(new Intent(this, MessageActivity.class));
        tabHost.addTab(messageTab);

        TabSpec newTab = tabHost.newTabSpec("new").setIndicator("new");
        newTab.setContent(new Intent(this, NewActivity.class));
        tabHost.addTab(newTab);

        TabSpec goodTab = tabHost.newTabSpec("good").setIndicator("good");
        goodTab.setContent(new Intent(this, GoodActivity.class));
        tabHost.addTab(goodTab);

        tabHost.setCurrentTabByTag("index");

        layout_bottom = (RelativeLayout) this.findViewById(R.id.layout_bottom);
        layout_index = (RelativeLayout) this.findViewById(R.id.layout_index);
        layout_message = (RelativeLayout) this.findViewById(R.id.layout_message);
        layout_new = (RelativeLayout) this.findViewById(R.id.layout_new);
        layout_good = (RelativeLayout) this.findViewById(R.id.layout_good);
        tv_index = (TextView) this.findViewById(R.id.tv_index);
        tv_message = (TextView) this.findViewById(R.id.tv_message);
        tv_new = (TextView) this.findViewById(R.id.tv_new);
        tv_good = (TextView) this.findViewById(R.id.tv_good);

        layout_index.setOnClickListener(this);
        layout_message.setOnClickListener(this);
        layout_new.setOnClickListener(this);
        layout_good.setOnClickListener(this);

        ImageView backgroud = new ImageView(this);
        backgroud.setTag("default");
        backgroud.setImageResource(R.drawable.bottom_backgroud); //设置选中Tab的背景图片


        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); //设置特性

        switch (mCurrentTab) {
        case 0:
            layout_index.addView(backgroud, 0, rl);
            break;
        case 1:
            layout_message.addView(backgroud, 0, rl);
            break;
        case 2:
            layout_new.addView(backgroud, 0, rl);
            break;
        case 3:
            layout_good.addView(backgroud, 0, rl);
            break;

        default:
            break;
        }

    }

    //替换背景
    public void replace(){
        switch (mCurrentTab) {
        case 0:
            toggleTop(layout_index);
            break;
        case 1:
            toggleTop(layout_message);
            break;
        case 2:
            toggleTop(layout_new);
            break;
        case 3:
            toggleTop(layout_good);
            break;

        default:
            break;
        }
    }

    //切换背景图片
    public void toggleTop(RelativeLayout relativeLayout ){
        ImageView tag = (ImageView) relativeLayout.findViewWithTag("default");
        mWidth = tag.getWidth();//获取背景背景的宽
        mHeight = tag.getHeight();//获取背景背景的高

        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(mWidth, mHeight);
        rl.addRule(RelativeLayout.CENTER_VERTICAL);//设置布局垂直居中
        rl.leftMargin = tag.getLeft()+ ((RelativeLayout) tag.getParent()).getLeft();//设置左边距
        rl.topMargin = tag.getTop()+ ((RelativeLayout) tag.getParent()).getTop();//设置顶边距

        // 获取起始位置
        firstLeft = tag.getLeft()+ ((RelativeLayout) tag.getParent()).getLeft();

        ImageView iv = new ImageView(this);
        iv.setTag("move");
        iv.setImageResource(R.drawable.bottom_backgroud);//设置平滑移动时的背景图片

        layout_bottom.addView(iv, 0, rl);//把rl添加到是外面的RelativeLayout中
        relativeLayout.removeView(tag);
    }

    //移动Tab
    public void moveToTab(int position){
        if(!isTag){
            replace(); // 初次使用移除TAG添加新的top_select为RelativeLayout所使用
            isTag = true;
        }

        iv_tag = (ImageView) layout_bottom.findViewWithTag("move");
        int tabLeft;
        int endLeft = 0;
        boolean run = false;
        switch (position) {
        case 0:
            if(mCurrentTab != 0){
                // 中心位置
                tabLeft = ((RelativeLayout) tv_index.getParent()).getLeft()+ tv_index.getLeft() + tv_index.getWidth() / 2;
                // 最终位置
                endLeft = tabLeft - mWidth / 2;
                mCurrentTab = 0;
                tabHost.setCurrentTabByTag("index");
                run = true;
            }
            break;
        case 1:
            if(mCurrentTab != 1){
                if (mCurrentTab != 1) {
                    tabLeft = ((RelativeLayout) tv_message.getParent()).getLeft() + tv_message.getLeft() + tv_message.getWidth() / 2;
                    endLeft = tabLeft - mWidth / 2;
                    tabHost.setCurrentTabByTag("message");
                    mCurrentTab = 1;
                    run = true;
                }
            }
            break;
        case 2:
            if(mCurrentTab != 2){
                tabLeft = ((RelativeLayout)tv_new.getParent()).getLeft()+ tv_new.getLeft()+ tv_new.getWidth() / 2;
                endLeft = tabLeft - mWidth / 2;
                mCurrentTab = 2;
                tabHost.setCurrentTabByTag("new");
                run = true;
            }
            break;
        case 3:
            if(mCurrentTab != 3){
                tabLeft = ((RelativeLayout) tv_good.getParent()).getLeft()+ tv_good.getLeft() + tv_good.getWidth() / 2;
                endLeft = tabLeft - mWidth / 2;
                mCurrentTab = 3;
                tabHost.setCurrentTabByTag("good");
                run = true;
            }
            break;
        default:
            break;
        }
        if (run) {
            TranslateAnimation animation = new TranslateAnimation(startLeft,endLeft - firstLeft, 0, 0);
            startLeft = endLeft - firstLeft; // 重新设定起始位置
            animation.setDuration(400);
            animation.setFillAfter(true);
            iv_tag.startAnimation(animation);
        }

    }

@Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.layout_index:
            moveToTab(0);
            break;
        case R.id.layout_message:
            moveToTab(1);
            break;
        case R.id.layout_new:
            moveToTab(2);
            break;
        case R.id.layout_good:
            moveToTab(3);
            break;
        default:
            break;
        }

    }

附件以上传