ViewPager+Fragment打造滑动切换界面

最近项目有个功能需要用到滑动切换，并且导航条也要有动画，所以现在网上找了一些素材写了一个demo，素材不搭，感觉很影响整体效果，所以请无视素材。先看效果吧

布局内容

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <!-- 导航按钮 -->

    <LinearLayout
        android:id="@+id/ll_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_one"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@drawable/desk1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_two"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@drawable/desk2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_three"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@drawable/desk3" />
        </LinearLayout>
    </LinearLayout>

    <!-- 覆盖在导航按钮上的图片，表示选中项 -->

    <ImageView
        android:id="@+id/imgv_overtab"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/circle1" />
    <!-- ViewPager 主要是加载内容的 -->

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ll_tabs" />

</RelativeLayout>

ViewPager+Fragmeng的实现

初始化控件

public class MainActivity extends FragmentActivity implements OnClickListener {
    private Button buttonOne;
    private Button buttonTwo;
    private Button buttonThree;
    private ViewPager mViewPager;
    private List<Fragment> fragmentList;
    private OneFragment oneFragment;
    private TwoFragment twoFragment;
    private ThreeFragment threeFragment;
    private ImageView imageviewOvertab;
    private int screenWidth;
    private int currenttab = -1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        buttonOne = (Button) findViewById(R.id.btn_one);
        buttonTwo = (Button) findViewById(R.id.btn_two);
        buttonThree = (Button) findViewById(R.id.btn_three);
        buttonOne.setOnClickListener(this);
        buttonTwo.setOnClickListener(this);
        buttonThree.setOnClickListener(this);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        fragmentList = new ArrayList<Fragment>();
        oneFragment = new OneFragment();
        twoFragment = new TwoFragment();
        threeFragment = new ThreeFragment();
        fragmentList.add(oneFragment);
        fragmentList.add(twoFragment);
        fragmentList.add(threeFragment);
        screenWidth = getResources().getDisplayMetrics().widthPixels;
        buttonTwo.measure(0, 0);
        imageviewOvertab = (ImageView) findViewById(R.id.imgv_overtab);
        mViewPager.setAdapter(new MyFrageStatePagerAdapter(
                getSupportFragmentManager()));
    }
}

创建适配器

/**
     * 定义自己的ViewPager适配器。 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。
     */
    class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter {

        public MyFrageStatePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        /**
         * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
         */
        @Override
        public void finishUpdate(ViewGroup container) {
            super.finishUpdate(container);// 这句话要放在最前面，否则会报错
            // 获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置
            int currentItem = mViewPager.getCurrentItem();
            if (currentItem == currenttab) {
                return;
            }
            imageMove(mViewPager.getCurrentItem());
            currenttab = mViewPager.getCurrentItem();
        }

    }

移动覆盖层图片并初始化动画

/**
     * 移动覆盖层图片 初始化动画
     * 
     * @param moveToTab
     *            目标Tab，也就是要移动到的导航选项按钮的位置 第一个导航按钮对应0，第二个对应1，以此类推
     */
    private void imageMove(int moveToTab) {
        switch (moveToTab) {
        case 0:
            initAnimator(buttonOne);
            break;
        case 1:
            initAnimator(buttonTwo);
            break;
        case 2:
            initAnimator(buttonThree);
            break;
        default:
            break;
        }
        anim.start();
        int startPosition = 0;
        int movetoPosition = 0;

        startPosition = (currenttab * (screenWidth / 3)) + (((screenWidth / 3) - dip2px(this,80)) / 2) - dip2px(this,10);
        movetoPosition = moveToTab * (screenWidth / 3) + (((screenWidth / 3) - dip2px(this,80)) / 2) - dip2px(this,10);
        // 平移动画
        TranslateAnimation translateAnimation = new TranslateAnimation(
                startPosition, movetoPosition, 0, 0);
        translateAnimation.setFillAfter(true);
        translateAnimation.setDuration(200);
        imageviewOvertab.startAnimation(translateAnimation);
    }

    public static int dip2px(Context context,float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

创建按钮监听

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_one:
            changeView(0);
            break;
        case R.id.btn_two:
            changeView(1);
            break;
        case R.id.btn_three:
            changeView(2);
            break;
        default:
            break;
        }
    }

    // 手动设置ViewPager要显示的视图
    private void changeView(int desTab) {
        mViewPager.setCurrentItem(desTab, true);
    }

动画定义

    private AnimatorSet anim;

    private void initAnimator(View view) {
        ObjectAnimator anim1 = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.3f);
        ObjectAnimator anim3 = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.3f);
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(view, "scaleX", 0.3f, 1f);
        ObjectAnimator anim4 = ObjectAnimator.ofFloat(view, "scaleY", 0.3f, 1f);
        ObjectAnimator anim11 = ObjectAnimator
                .ofFloat(view, "scaleX", 1f, 0.8f);
        ObjectAnimator anim33 = ObjectAnimator
                .ofFloat(view, "scaleY", 1f, 0.8f);
        ObjectAnimator anim22 = ObjectAnimator
                .ofFloat(view, "scaleX", 0.8f, 1f);
        ObjectAnimator anim44 = ObjectAnimator
                .ofFloat(view, "scaleY", 0.8f, 1f);
        anim = new AnimatorSet();
        anim.play(anim1).with(anim3);
        anim.play(anim2).with(anim4);
        anim.play(anim2).after(anim1);
        anim.play(anim11).with(anim33);
        anim.play(anim22).with(anim44);
        anim.play(anim22).after(anim11);
        anim.play(anim11).after(anim2);
        anim.setDuration(100);
    }

Fragment的创建

剩下的就是一些Fragment类的创建了，大家自行创建吧。在此贴出来demo中的例子，在OneFragment.java中

package com.maxi.updatatest.fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.maxi.updatatest.R;

public class OneFragment extends Fragment{
    private View carView;
    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        carView = inflater.inflate(R.layout.fragment_one, container, false);
        return carView;
    }

}

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright"
    android:orientation="vertical" >

</LinearLayout>

大家可以在Fragment中放入大家想要的一些界面。
由于代码很简单，每个功能块也都有标注，在此就不详述了。希望能对初学者有所帮助。
下载地址：demo