Android主页导航：fragment+viewpager

简单实现Fragment+ViewPager实现主页导航控制，效果如下：

一、activity_main.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:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7" />

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

        <RelativeLayout
            android:id="@+id/rel_signin"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/tab_select_bg"
            android:layout_weight="1" >

            <Button
                style="@style/tab_style"
                android:id="@+id/tab_signin"
                android:drawableTop="@drawable/my"
                android:text="@string/signin"/>
        </RelativeLayout>

        <RelativeLayout
             android:id="@+id/rel_contact"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/tab_contact"
                style="@style/tab_style"
                android:drawableTop="@drawable/my"
                android:text="@string/contact"></Button>
        </RelativeLayout>

        <RelativeLayout
             android:id="@+id/rel_search"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/tab_search"
                style="@style/tab_style"
                android:drawableTop="@drawable/my"
                android:text="@string/searrch"></Button>
        </RelativeLayout>

        <RelativeLayout
             android:id="@+id/rel_earning"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                android:id="@+id/tab_earning"
                style="@style/tab_style"
                android:drawableTop="@drawable/my"
                android:text="@string/earning"
                 />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rel_my"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <Button
                 android:id="@+id/tab_my"
                 style="@style/tab_style"
                android:drawableTop="@drawable/my"
                android:text="@string/my"
                 />
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

二、MainActivity主文件:

package com.fragmentviewpagerdemo;

import java.util.ArrayList;
import java.util.List;

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.view.ViewPager;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;

import com.fragmentviewpagerdemo.fragment.MyFragment;

public class MainActivity extends FragmentActivity {
    ViewPager viewpager_main;
    RelativeLayout rel_signin;
    RelativeLayout rel_contact;
    RelativeLayout rel_search;
    RelativeLayout rel_earning;
    RelativeLayout rel_my;
    Button tab_signin;
    Button tab_contact;
    Button tab_search;
    Button tab_earning;
    Button tab_my;

    private int currentPage = 0;
    private MyFragment signInFragment;
    private MyFragment searchFragment;
    private MyFragment contactFragment;
    private MyFragment earningFragment;
    private MyFragment myFragment;

    private List<RelativeLayout> mRelTabs;
    private List<Fragment> fragments;
    private List<Button> mTabs;// 按钮

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        controlViewPager();
    }

    // 控制viewpager
    private void controlViewPager() {
        FragmentManager fm = getSupportFragmentManager();
        viewpager_main.setAdapter(new ViewPagerAdapter(fm));
        viewpager_main.setOnPageChangeListener(new pageChangeListener());
        for (int i = 0; i < mTabs.size(); i++) {
            final int index = i;
            mTabs.get(i).setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    setcurrent(index);
                    viewpager_main.setCurrentItem(index);
                }
            });
        }
    }

    private void init() {
        viewpager_main = (ViewPager) findViewById(R.id.viewpager_main);
        rel_signin = (RelativeLayout) findViewById(R.id.rel_signin);
        rel_contact = (RelativeLayout) findViewById(R.id.rel_contact);
        rel_search = (RelativeLayout) findViewById(R.id.rel_search);
        rel_earning = (RelativeLayout) findViewById(R.id.rel_earning);
        rel_my = (RelativeLayout) findViewById(R.id.rel_my);
        tab_signin = (Button) findViewById(R.id.tab_signin);
        tab_contact = (Button) findViewById(R.id.tab_contact);
        tab_search = (Button) findViewById(R.id.tab_search);
        tab_earning = (Button) findViewById(R.id.tab_earning);
        tab_my = (Button) findViewById(R.id.tab_my);

        currentPage = 0;
        mTabs = new ArrayList<Button>();
        mTabs.add(tab_signin);
        mTabs.add(tab_contact);
        mTabs.add(tab_search);
        mTabs.add(tab_earning);
        mTabs.add(tab_my);
        mRelTabs = new ArrayList<RelativeLayout>();
        mRelTabs.add(rel_signin);
        mRelTabs.add(rel_contact);
        mRelTabs.add(rel_search);
        mRelTabs.add(rel_earning);
        mRelTabs.add(rel_my);

        signInFragment = new MyFragment("考勤", getResources().getColor(
                R.color.fragment_1));
        searchFragment = new MyFragment("通讯录", getResources().getColor(
                R.color.fragment_2));
        contactFragment = new MyFragment("查单", getResources().getColor(
                R.color.fragment_3));
        earningFragment = new MyFragment("收入", getResources().getColor(
                R.color.fragment_4));
        myFragment = new MyFragment("我的", getResources().getColor(
                R.color.fragment_5));
        fragments = new ArrayList<Fragment>();
        fragments.add(signInFragment);
        fragments.add(contactFragment);
        fragments.add(searchFragment);
        fragments.add(earningFragment);
        fragments.add(myFragment);

    }

    /**
     * 设置导航图标均为未选中
     */
    private void setTabNotSelect() {
        rel_signin.setBackgroundColor(getResources().getColor(R.color.white));
        rel_contact.setBackgroundColor(getResources().getColor(R.color.white));
        rel_search.setBackgroundColor(getResources().getColor(R.color.white));
        rel_earning.setBackgroundColor(getResources().getColor(R.color.white));
        rel_my.setBackgroundColor(getResources().getColor(R.color.white));

    }

    // viewpager适配器
    class ViewPagerAdapter extends FragmentPagerAdapter {

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

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

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

    }

    // viewpager监听器
    class pageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int arg0) {
            setcurrent(arg0);

        }
    }

    // viewpager改变后更改其他控件
    private void setcurrent(int position) {
        currentPage = position;
        setTabNotSelect();
        mRelTabs.get(position).setBackgroundColor(
                getResources().getColor(R.color.tab_select_bg));
    }
}

三、百度云下载地址：http://pan.baidu.com/s/1gdyFGKb