ViewPager+Fragment实现顶部导航栏左滑

实现左滑右滑切换不同的界面第一想到的就是ViewPager，ViewPager在Android应用开发中已经会被使用到，如开屏广告、新手指导和不同Fragment界面的切换。ViewPager常和PagerTabStrip、PagerTitleStrip一起搭配使用，实现底部或者底部导航。

这里主要介绍的是ViewPager和Fragment搭配实现顶部导航，底部导航也类似，读者可以根据个人需求进行更改。

先看一下效果图

1、先看Activity的布局activity_main:

?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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="10dp"
        android:background="@color/colorFFF"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tvNormalLogin"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="普通登录"
                android:textColor="@color/colorCa1"
                android:textStyle="bold"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/tvSMSLogin"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="短信登录"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="2dp"
            android:orientation="horizontal">
	    <!--实现顶部标题的横线指示器-->
            <ImageView
                android:id="@+id/ivTitleIndicator"
                android:layout_width="100dp"
                android:layout_height="2dp"
                android:src="@color/colorCa1" />
        </LinearLayout>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vpLogin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

这里id为ivTitleIndicator的ImageView主要是为了实现标题底部的横线指示器。

2、activity的实现代码：

public class LoginActivity extends FragmentActivity {
    private List<Fragment> fragments;

    private ViewPager vpContent;
    //顶部导航栏横线指示器
    private ImageView ivTitleIndicator;

    private TextView tvNormalLogin, tvSMSLogin;

    private int screenWidth;
    //ViewPager当前选择项
    private int currentIndex;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initVariable();
        initView();
        initData();
    }

    private void initVariable() {
        fragments = new ArrayList<>();

        Fragment normalFragment = new LoginNormalFragment();
        Fragment smsFragment = new LoginSMSFragment();

        fragments.add(normalFragment);
        fragments.add(smsFragment);
    }

    private void initView() {
        setContentView(R.layout.activity_login);

        vpContent = (ViewPager) findViewById(R.id.vpLogin);
        ivTitleIndicator = (ImageView) findViewById(R.id.ivTitleIndicator);
        tvNormalLogin = (TextView) findViewById(R.id.tvNormalLogin);
        tvSMSLogin = (TextView) findViewById(R.id.tvSMSLogin);

        initIndicator(fragments.size());
        initListener();
    }

    private void initListener() {
        tvNormalLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                vpContent.setCurrentItem(0);
            }
        });

        tvSMSLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                vpContent.setCurrentItem(1);
            }
        });

        vpContent.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float offSet, int positionOffsetPixels) {
                changeIndicator(position, offSet);
            }

            @Override
            public void onPageSelected(int position) {
                currentIndex = position;
                switch (position) {
                    case 0:
                        selectedNormalLogin();
                        break;
                    case 1:
                        selectedSMSLogin();
                        break;
                }

            }

            @Override
            public void onPageScrollStateChanged(int position) {
            }
        });
    }

    //选中普通登录
    private void selectedNormalLogin() {
        //设置标题的对应提示颜色
        tvNormalLogin.setTextColor(getResources().getColor(R.color.colorCa1));
        tvSMSLogin.setTextColor(getResources().getColor(R.color.color666));
        //选择普通登录时设置文本字体为粗体
        TextPaint paint = tvNormalLogin.getPaint();
        paint.setFakeBoldText(true);
        TextPaint paint1 = tvSMSLogin.getPaint();
        paint1.setFakeBoldText(false);
    }

    //选中短信登录
    private void selectedSMSLogin() {
        tvNormalLogin.setTextColor(getResources().getColor(R.color.color666));
        tvSMSLogin.setTextColor(getResources().getColor(R.color.colorCa1));
        TextPaint paint = tvNormalLogin.getPaint();
        paint.setFakeBoldText(false);
        //选择短信登录时设置文本字体为粗体
        TextPaint paint1 = tvSMSLogin.getPaint();
        paint1.setFakeBoldText(true);
    }

    //标题指示器改变,这里通过改变ivTitleIndicator的左外边距来改变其显示状态
    private void changeIndicator(int position, float offset) {
        LinearLayout.LayoutParams lp =
                (LinearLayout.LayoutParams) ivTitleIndicator.getLayoutParams();
        if (currentIndex == 0 && position == 0) {
            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 2)
                    + position * (screenWidth / 2));
        } else if (currentIndex == 1 && position == 0) {
            lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 2)
                    + position * (screenWidth / 2));
        }
        ivTitleIndicator.setLayoutParams(lp);
    }

    private void initData() {
        LoginAdapter adapter = new LoginAdapter(getSupportFragmentManager(), fragments);
        vpContent.setAdapter(adapter);
    }

    /**
     * 初始顶部导航栏横线指示器的宽度，这里为屏幕的一半
     *
     * @param count 标题数目
     */
    private void initIndicator(int count) {
        DisplayMetrics dpMetrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics);
        screenWidth = dpMetrics.widthPixels;
        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ivTitleIndicator.getLayoutParams();
        lp.width = screenWidth / count;
        ivTitleIndicator.setLayoutParams(lp);
    }
}

需要注意一点的是，这里Activity必须要继承FragmentActivity;

3、LoginAdapter的实现非常简单，只要继承FragmentPagerAdapter即可，代码实现如下：

public class LoginAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public LoginAdapter(FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

需要注意一点的是，这里Activity必须要继承FragmentActivity;

public class LoginAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

    public LoginAdapter(FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

4、两个Fragment和其对应的布局的代码实现，大家可以根据自己的业务需求去撰写。这样简单的实现了左滑右滑效果，单击标题也能进行对应的切换界面。