Fragment和ViewPager的简单使用

先上效果图

四个页面对应4个Fragment，通过ViewPager展示在主Activity中，支持最有滑动切换以及底部按钮点击切换Fragment。

一、创建fragment

以MessageFragment为例，继承下面方法设置布局

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.message_layout, container, false);
    }

布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/message_selected"/>
        <TextView
            android:padding="10dp"
            android:text="这是消息界面"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"/>
    </LinearLayout>
</RelativeLayout>

二、主Activity布局

主布局包括ViewPage展示和底部按钮：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context="com.example.fragment2.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_weight="1"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"></android.support.v4.view.ViewPager>
    <LinearLayout
        android:background="@drawable/tab_bg"
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <RelativeLayout
            android:id="@+id/message_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_centerVertical="true"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/message_image"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/message_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/message_txt"
                    android:text="消息"
                    android:textColor="#82858b"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/contacts_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_centerVertical="true"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/contacts_image"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/message_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/contacts_txt"
                    android:text="联系人"
                    android:textColor="#82858b"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/news_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_centerVertical="true"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/news_image"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/message_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/news_txt"
                    android:text="动态"
                    android:textColor="#82858b"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/setting_layout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_centerVertical="true"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/setting_image"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/message_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/setting_txt"
                    android:text="设置"
                    android:textColor="#82858b"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

三、绑定Fragment和ViewPager

        messageFragment = new MessageFragment();
        newsFragment = new NewsFragment();
        contactsFragment = new ContactsFragment();
        settingFragment = new SettingFragment();
        fragmentlist = new ArrayList<Fragment>();
        fragmentlist.add(messageFragment);
        fragmentlist.add(contactsFragment);
        fragmentlist.add(newsFragment);
        fragmentlist.add(settingFragment);

m_viewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));

private class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter {

        public MyFrageStatePagerAdapter(android.support.v4.app.FragmentManager fm) {
            super(fm);
        }

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

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

        @Override
        public void finishUpdate(ViewGroup container) {
            super.finishUpdate(container);
            int currentItem=m_viewPager.getCurrentItem();
            if (currentItem==currenttab) return;
            setTabSelection(currentItem); //滑动时更新底部按钮背景
            currenttab=currentItem;
        }
    }

m_viewPager.setCurrentItem(desTab); 点击按钮切换画面

demo地址：http://download.csdn.net/detail/u013795543/9706876