android 学习笔记15-项目实战 切换显示动画 底部线条移动

1、设置选项卡文字的颜色

这里是在上面的代码基础上继续分析
需要在MainActivity的initListener方法里里面设置侦听

    @Override
    public void initListener() {
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {//page切换的时候系统调用
                textLightAndScale();
            }
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
            }
        });
    }

再定义一个私有的方法：
    private void textLightAndScale(){
        int item = viewPager.getCurrentItem();
        //4-这样就可以实现了字体的颜色切换
        tv_tab_conversation.setTextColor(item == 0?Color.WHITE:0xaa666666);
        tv_tab_group.setTextColor(item == 1?Color.WHITE:0xaa666666);
        tv_tab_search.setTextColor(item == 2?Color.WHITE:0xaa666666);

        //5-实现动画效果
        ViewPropertyAnimator.animate(tv_tab_conversation).scaleX(item == 0 ?1.2f:1).setDuration(200);
        ViewPropertyAnimator.animate(tv_tab_group).scaleX(item == 1 ?1.2f:1).setDuration(200);
        ViewPropertyAnimator.animate(tv_tab_search).scaleX(item == 2 ?1.2f:1).setDuration(200);
    }

注意：我们在初始化完成的时候去调用一下textLightAndScale方法，或者先在xml定义好当前选中页的文本，不然程序刚启动会显示不对。

2、点击选项卡实现界面切换

a，在initView方法中添加：
    //6-找到tab的view id
    ll_tab_conversation = (LinearLayout) findViewById(R.id.ll_tab_conversation);
    ll_tab_group = (LinearLayout) findViewById(R.id.ll_tab_group);
    ll_tab_search = (LinearLayout) findViewById(R.id.ll_tab_search);

b，在initListener方法中添加：
    //7-给tab设置侦听
    ll_tab_conversation.setOnClickListener(this);
    ll_tab_group.setOnClickListener(this);
    ll_tab_search.setOnClickListener(this);

c，实现processClick方法里面的逻辑处理
    @Override
    public void processClick(View v) {
        //8-实现侦听
        switch (v.getId()) {
        case R.id.ll_tab_conversation:
            viewPager.setCurrentItem(0);
            break;
        case R.id.ll_tab_group:
            viewPager.setCurrentItem(1);
            break;
        case R.id.ll_tab_search:
            viewPager.setCurrentItem(2);
            break;
        }
    }

我们只要架构搭好了，后面的代码只需要按照格式添加就行了

3、计算选项卡底部的线条宽度

计算红线的宽度为屏幕的1/3，都是在MainActivity中操作的
a，在initView方法中添加：
    //9-找到红线的id
    v_indicate_line = findViewById(R.id.v_indicate_line);

b，在initData方法中添加：
    //10-初始化红色宽度的数值,创建一个私有的方法去实现
    computeIndicateLineWidth();

c，创建一个私有方法计算：
    //11-创建一个私有的方法计算底部红线宽度为屏幕的1/3
    private void computeIndicateLineWidth(){
        int width = getWindowManager().getDefaultDisplay().getWidth();
        v_indicate_line.getLayoutParams().width = width/3;
    }

4、实现选项卡底部线条的移动

实现initListener方法中的onPageScrolled，因为在滑动的过程中会不断的调用这个方法。

    //position是前一个的索引,例如第一个和第二个界面同时存在，position就是0
    //positionOffset 百分比
    @Override
    public void onPageScrolled(int position, float positionOffset,int positionOffsetPixels) {
        //12-在滑动的过程中不断的改变底部红线的位置，positionOffsetPixels移动的像素/3就是红线应该移动的宽度
        int distance = positionOffsetPixels/3;//计算红线位移的距离
        //持续时间为0，立刻生效，因为红线的移动需要与用户滑动同步
        ViewPropertyAnimator.animate(v_indicate_line).translationX(distance+position*v_indicate_line.getWidth()).setDuration(0);

    }

到这里就完成了基本上所有的界面切换的效果了