android viewpager+Imagerview的可滑动主界面导航栏

最近在整这个导航栏，但网上找了很多各种各样看得是眼花缭乱。所以最后选了几个综合了一下搞出一个自己感觉还可以的吧。不废话上代码，凑合看吧。

package com.huitouzi.lemon.view.main;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.app.FragmentTransaction;import android.support.v4.view.ViewPager;import android.view.KeyEvent;import android.view.View;import android.widget.ImageButton;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import com.huitouzi.lemon.R;import java.util.ArrayList;import java.util.List;import butterknife.ButterKnife;import butterknife.InjectView;import butterknife.OnClick;public class MainActivity extends FragmentActivity implements View.OnClickListener {    /**     * 用于展示首页的Fragment     */    private FragmentHome homeFragment;    /**     * 用于展示理财产品的Fragment     */    private FragmentFinancing financingFragment;    /**     * 用于展示我的账户的Fragment     */    private FragmentMyAccount myAccountFragment;    /**     * 用于展示更多的Fragment     */    private FragmentMore moreFragment;    /**     * 标题     */    @InjectView(R.id.tv_main_title)    TextView titleTextView;    /**     * 注册按钮     */    @InjectView(R.id.btn_register)    ImageButton registerButton;    /**     * 首页界面布局     */    @InjectView(R.id.home_layout)    RelativeLayout homeLayout;    /**     * 首页viewpager     */    @InjectView(R.id.vp_realtabcontent)    ViewPager mVpContent;    /**     * 理财产品界面布局     */    @InjectView(R.id.financing_layout)    RelativeLayout financingLayout;    /**     * 我的账户界面布局     */    @InjectView(R.id.myaccount_layout)    RelativeLayout myAccountLayout;    /**     * 更多界面布局     */    @InjectView(R.id.more_layout)    RelativeLayout moreLayout;    /**     * 在Tab布局上显示首页图标的控件     */    @InjectView(R.id.home_image)    ImageView homeImage;    /**     * 在Tab布局上显示理财产品图标的控件     */    @InjectView(R.id.financing_image)    ImageView financingImage;    /**     * 在Tab布局上显示我的账户图标的控件     */    @InjectView(R.id.myaccount_image)    ImageView myAccountImage;    /**     * 在Tab布局上显示更多图标的控件     */    @InjectView(R.id.more_image)    ImageView moreImage;    /**     * 在Tab布局上显示首页标题的控件     */    @InjectView(R.id.home_text)    TextView homeText;    /**     * 在Tab布局上显示理财产品标题的控件     */    @InjectView(R.id.financing_text)    TextView financingText;    /**     * 在Tab布局上显示我的账户标题的控件     */    @InjectView(R.id.myaccount_text)    TextView myAccountText;    /**     * 在Tab布局上显示更多标题的控件     */    @InjectView(R.id.more_text)    TextView moreText;    /**     * 用于对Fragment进行管理     */    private FragmentManager fragmentManager;    private List<Fragment> mTabPagers = new ArrayList<Fragment>();    private FragmentPagerAdapter mAdapter;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        ButterKnife.inject(this);        // 初始化布局元素        initViews();        // 第一次启动时选中第0个tab        setTabSelection(0);        mVpContent.setAdapter(mAdapter);        mVpContent.setOnPageChangeListener(myOnpageListener);    }    @Override    protected void onResume() {        super.onResume();    }    /**     * 在这里获取到每个需要用到的控件的实例，并给它们设置好必要的点击事件。     */    private void initViews() {        if (homeFragment == null) {            // 如果MessageFragment为空，则创建一个并添加到界面上            homeFragment = new FragmentHome();            mTabPagers.add(homeFragment);        }        if (financingFragment == null) {            // 如果ContactsFragment为空，则创建一个并添加到界面上            financingFragment = new FragmentFinancing();            mTabPagers.add(financingFragment);        }        if (myAccountFragment == null) {            myAccountFragment = new FragmentMyAccount();            mTabPagers.add(myAccountFragment);        }        if (moreFragment == null) {            moreFragment = new FragmentMore();            mTabPagers.add(moreFragment);        }        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {            @Override            public int getCount() {                return mTabPagers.size();            }            @Override            public Fragment getItem(int arg0) {                return mTabPagers.get(arg0);            }        };        homeLayout.setOnClickListener(this);        financingLayout.setOnClickListener(this);        myAccountLayout.setOnClickListener(this);        moreLayout.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.home_layout:                // 当点击了首页tab时，选中第1个tab                setTabSelection(0);                break;            case R.id.financing_layout:                // 当点击了理财产品tab时，选中第2个tab                setTabSelection(1);                break;            case R.id.myaccount_layout:                // 当点击了我的账户tab时，选中第3个tab                setTabSelection(2);                break;            case R.id.more_layout:                // 当点击了设置tab时，选中第4个tab                setTabSelection(3);                break;            default:                break;        }    }    /**     * 根据传入的index参数来设置选中的tab页。     *     * @param index 每个tab页对应的下标。0表示消息，1表示联系人，2表示动态，3表示设置。     */    private void setTabSelection(int index) {        // 每次选中之前先清楚掉上次的选中状态        clearSelection();        mVpContent.setCurrentItem(index, false);        switch (index) {            case 0:                // 当点击了首页tab时，改变控件的图片和文字颜色                homeImage.setImageResource(R.drawable.tab_home_on);                homeText.setTextColor(getResources().getColor(R.color.blue));                titleTextView.setText("首页");                registerButton.setVisibility(View.VISIBLE);                break;            case 1:                // 当点击了理财产品tab时，改变控件的图片和文字颜色                financingImage.setImageResource(R.drawable.tab_pd_on);                financingText.setTextColor(getResources().getColor(R.color.blue));                titleTextView.setText("产品列表");                registerButton.setVisibility(View.GONE);                break;            case 2:                // 当点击了我的账户tab时，改变控件的图片和文字颜色                myAccountImage.setImageResource(R.drawable.tab_myaccount_on);                myAccountText.setTextColor(getResources().getColor(R.color.blue));                titleTextView.setText("用户名字");                registerButton.setVisibility(View.GONE);                break;            case 3:            default:                // 当点击了更多tab时，改变控件的图片和文字颜色                moreImage.setImageResource(R.drawable.tab_more_on);                moreText.setTextColor(getResources().getColor(R.color.blue));                titleTextView.setText("更多");                registerButton.setVisibility(View.GONE);                break;        }    }    private ViewPager.OnPageChangeListener myOnpageListener = new ViewPager.OnPageChangeListener() {        @Override        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {        }        @Override        public void onPageSelected(int position) {            setTabSelection(position);        }        @Override        public void onPageScrollStateChanged(int state) {        }    };    /**     * 清除掉所有的选中状态。     */    private void clearSelection() {        homeImage.setImageResource(R.drawable.tab_home_no);        homeText.setTextColor(getResources().getColor(R.color.button_background_disabled_start));        financingImage.setImageResource(R.drawable.tab_pd_no);        financingText.setTextColor(getResources().getColor(R.color.button_background_disabled_start));        myAccountImage.setImageResource(R.drawable.tab_myaccount_no);        myAccountText.setTextColor(getResources().getColor(R.color.button_background_disabled_start));        moreImage.setImageResource(R.drawable.tab_more_no);        moreText.setTextColor(getResources().getColor(R.color.button_background_disabled_start));    }    /**     * 将所有的Fragment都置为隐藏状态。     *     * @param transaction 用于对Fragment执行操作的事务     */    private void hideFragments(FragmentTransaction transaction) {        if (homeFragment != null) {            transaction.hide(homeFragment);        }        if (financingFragment != null) {            transaction.hide(financingFragment);        }        if (myAccountFragment != null) {            transaction.hide(myAccountFragment);        }        if (moreFragment != null) {            transaction.hide(moreFragment);        }    }    @OnClick(R.id.btn_register)    public void register(View view) {    }    private long lastExitTime;    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_BACK) {            if (System.currentTimeMillis() - lastExitTime > 2000) {//                Toaster.show("再次点击退出");            } else {                System.exit(0);            }            lastExitTime = System.currentTimeMillis();            return true;        }        return super.onKeyDown(keyCode, event);    }}

上面这是主界面的代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity"    android:orientation="vertical">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/blue"        android:layout_weight="0.93">        <TextView            android:id="@+id/tv_main_title"            android:layout_centerInParent="true"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textSize="@dimen/text_20sp"            android:textColor="@color/white" />        <LinearLayout            android:id="@+id/ll_register"            android:layout_centerVertical="true"            android:layout_marginRight="10dp"            android:layout_alignParentRight="true"            android:layout_width="wrap_content"            android:layout_height="wrap_content">            <ImageButton                android:id="@+id/btn_register"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:background="@drawable/img_email" />        </LinearLayout>    </RelativeLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_realtabcontent"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="0.2" />    <View        android:layout_width="match_parent"        android:layout_height="0.5dp"        android:background="@color/black_e" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="0.9"        >        <RelativeLayout            android:id="@+id/home_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center"                android:orientation="vertical">                <ImageView                    android:id="@+id/home_image"                    android:layout_gravity="center_horizontal"                    android:padding="5dp"                    android:layout_width="48dp"                    android:layout_height="43dp"                    android:focusable="false"                    android:src="@drawable/tab_home_no" />                <TextView                    android:id="@+id/home_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textSize="12sp"                    android:text="91快车"                    android:textColor="@color/gray" />            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/financing_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center"                android:orientation="vertical">                <ImageView                    android:id="@+id/financing_image"                    android:layout_gravity="center_horizontal"                    android:padding="5dp"                    android:layout_width="48dp"                    android:layout_height="43dp"                    android:focusable="false"                    android:src="@drawable/tab_pd_no" />                <TextView                    android:id="@+id/financing_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textSize="12sp"                    android:text="理财产品"                    android:textColor="@color/gray" />            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/myaccount_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center"                android:orientation="vertical">                <ImageView                    android:id="@+id/myaccount_image"                    android:layout_gravity="center_horizontal"                    android:padding="5dp"                    android:layout_width="48dp"                    android:layout_height="43dp"                    android:focusable="false"                    android:src="@drawable/tab_myaccount_no" />                <TextView                    android:id="@+id/myaccount_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textSize="12sp"                    android:text="我的账户"                    android:textColor="@color/gray" />            </LinearLayout>        </RelativeLayout>        <RelativeLayout            android:id="@+id/more_layout"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:gravity="center"                android:orientation="vertical">                <ImageView                    android:id="@+id/more_image"                    android:layout_gravity="center_horizontal"                    android:padding="5dp"                    android:layout_width="48dp"                    android:layout_height="43dp"                    android:focusable="false"                    android:src="@drawable/tab_more_no" />                <TextView                    android:id="@+id/more_text"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:textSize="12sp"                    android:text="更多"                    android:textColor="@color/gray" />            </LinearLayout>        </RelativeLayout>    </LinearLayout></LinearLayout>

这个上面就是布局代码了，时间有限仅供参考勿喷！