【ViewPager学习3】Fragment配合ViewPager

原CSDN博客已弃用，文章会逐渐迁移过来。

一、Fragment配合ViewPager
fragment_test.xml

<?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">  

    <TextView  
        android:id="@+id/text_view"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:textSize="36sp"  
        android:text="@string/app_name"  
        android:layout_centerInParent="true"  
        android:gravity="center"/>  
</RelativeLayout>  

activity_tab_viewpager.xml

package com.administrator.viewpagerproject;  

import android.os.Bundle;  
import android.support.annotation.Nullable;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentPagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v7.app.AppCompatActivity;  

/**  
 * Created by Administrator on 2018/5/17.  
 */  

public class TabViewPagerActivity extends AppCompatActivity{  
    private ViewPager mViewPager;  
    @Override  
    protected void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_tab_viewpager);  
        mViewPager = findViewById(R.id.viewpager);  

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  
            @Override  
            public Fragment getItem(int position) {  
                return TestFragment.newInstance(position);  
            }  

            @Override  
            public int getCount() {  
                return 4;  
            }  
        });  
    }  
}  

TestFragment.java

package com.administrator.viewpagerproject;  

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 android.widget.TextView;  
import android.widget.Toast;  

import org.w3c.dom.Text;  

/** 
 * Created by Administrator on 2018/5/17. 
 */  

public class TestFragment extends Fragment {  
    private String mPosition;  
    private static final String POSITION = "position";  

    public static TestFragment newInstance(int position){  
        TestFragment fragment = new TestFragment();  
        Bundle bundle = new Bundle();  
        bundle.putInt(POSITION,position);  
        fragment.setArguments(bundle);  
        return fragment;  
    }  

    @Override  
    public void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        if (getArguments()!= null){  
            mPosition = String.valueOf(getArguments().getInt(POSITION));  
        }  
    }  

    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.fragment_test,null);  
        TextView textView = (TextView) view.findViewById(R.id.text_view);  
        textView.setText(mPosition);  
        return view;  
    }  
}  

TabViewPagerActivity.java

package com.administrator.viewpagerproject;  

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 android.widget.TextView;  
import android.widget.Toast;  

import org.w3c.dom.Text;  

/** 
 * Created by Administrator on 2018/5/17. 
 */  

public class TestFragment extends Fragment {  
    private String mPosition;  
    private static final String POSITION = "position";  

    public static TestFragment newInstance(int position){  
        TestFragment fragment = new TestFragment();  
        Bundle bundle = new Bundle();  
        bundle.putInt(POSITION,position);  
        fragment.setArguments(bundle);  
        return fragment;  
    }  

    @Override  
    public void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        if (getArguments()!= null){  
            mPosition = String.valueOf(getArguments().getInt(POSITION));  
        }  
    }  

    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.fragment_test,null);  
        TextView textView = (TextView) view.findViewById(R.id.text_view);  
        textView.setText(mPosition);  
        return view;  
    }  
}  

二、ViewPager+Fragment实现滑动控制底部Tab标签，点击标签控制ViewPager滑动

图片资源文件请下载底部Demo获取。

drawable文件夹下添加三个文件

main_tab_icon_home.xml

<?xml version="1.0" encoding="utf-8"?>  

<selector xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:state_pressed="true"  android:drawable="@mipmap/tabbar_home_pressed" />  
    <item android:state_selected="true" android:drawable="@mipmap/tabbar_home_pressed" />  
    <item android:drawable="@mipmap/tabbar_home" />  
</selector>  

main_tab_icon_me.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_selected="true" android:drawable="@mipmap/tabbar_my_pressed"/>  
    <item android:state_pressed="true" android:drawable="@mipmap/tabbar_my_pressed"/>  
    <item android:drawable="@mipmap/tabbar_my"/>  
</selector>  

main_tab_icon_message.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <item android:state_selected="true" android:drawable="@mipmap/tabbar_msg_pressed"/>  
    <item android:state_pressed="true" android:drawable="@mipmap/tabbar_msg_pressed"/>  
    <item android:drawable="@mipmap/tabbar_msg"/>  
</selector>  

layout文件夹下

main_tab_layout.xml

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/tab_bg"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#4dd0c8">  

    <LinearLayout  
        android:id="@+id/main_content"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:gravity="center"  
        android:layout_centerInParent="true"  
        android:orientation="vertical">  

        <ImageView  
            android:id="@+id/main_tab_icon"  
            android:layout_width="30dp"  
            android:layout_height="30dp"  
            android:layout_marginTop="4dp"  
            android:scaleType="centerInside"  
            android:src="@drawable/main_tab_icon_home"/>  

        <TextView  
            android:id="@+id/main_tab_txt"  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:layout_marginTop="5dp"  
            android:textColor="#32CD32"  
            android:text="@string/home"/>  
    </LinearLayout>  

    <ImageView  
        android:visibility="gone"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"/>  

</RelativeLayout>  

fragment_text.xml

<?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">  

    <TextView  
        android:id="@+id/text_view"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:textSize="36sp"  
        android:text="@string/app_name"  
        android:layout_centerInParent="true"  
        android:gravity="center"/>  
</RelativeLayout>  

activity_tab_viewpager.xml

<?xml version="1.0" encoding="utf-8"?>  
<TabHost  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/tab_host"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#f8f8f8"  
    android:orientation="vertical">  

    <RelativeLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent">  

        <android.support.v4.view.ViewPager  
            android:id="@+id/view_pager"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:layout_above="@+id/tab_divider"  
            />  

        <FrameLayout  
            android:id="@android:id/tabcontent"  
            android:layout_width="match_parent"  
            android:layout_height="match_parent"  
            android:visibility="gone"  
            android:layout_above="@+id/tab_divider"  
            >  

        </FrameLayout>  

        <View  
            android:id="@+id/tab_divider"  
            android:layout_width="match_parent"  
            android:layout_height="1dp"  
            android:layout_above="@android:id/tabs"  
            android:background="#dfdfdf"  
            />  

        <TabWidget  
            android:id="@android:id/tabs"  
            android:layout_width="match_parent"  
            android:layout_height="60dp"  
            android:layout_alignParentBottom="true"  
            android:showDividers="none"  
            >  

        </TabWidget>  

    </RelativeLayout>  


</TabHost>  

activity_image_view_adapter.xml

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/activity_main"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:paddingBottom="@dimen/activity_vertical_margin"  
    android:paddingLeft="@dimen/activity_horizontal_margin"  
    android:paddingRight="@dimen/activity_horizontal_margin"  
    android:paddingTop="@dimen/activity_vertical_margin">  

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

    <LinearLayout  
        android:id="@+id/dot_layout"  
        android:layout_width="120dp"  
        android:layout_height="30dp"  
        android:gravity="center"  
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"  
        android:layout_marginBottom="30dp"  
        android:orientation="horizontal">  

    </LinearLayout>  

</RelativeLayout>  

TestFragment.java

package com.administrator.viewpagerproject;  


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 android.widget.TextView;  

/** 
 * Function: 
 * Create date on 16/9/28. 
 * 
 * @author Conquer 
 * @version 1.0 
 */  

public class TestFragment extends Fragment {  


    public static final String TITLE = "title";  
    private String mTitle;  

    public static TestFragment newInstance(String title) {  
        TestFragment fragment = new TestFragment();  
        Bundle bundle = new Bundle();  
        bundle.putString(TITLE, title);  
        fragment.setArguments(bundle);  
        return fragment;  
    }  


    @Override  
    public void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        if (getArguments() != null) {  
            mTitle = getArguments().getString(TITLE);  
        }  
    }  

    @Nullable  
    @Override  
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
        View view = inflater.inflate(R.layout.fragment_test, null);  

        TextView textView = (TextView) view.findViewById(R.id.text_view);  
        textView.setText(mTitle);  

        return view;  

    }  
}  

TabViewPagerActivity.java

package com.administrator.viewpagerproject;  
import android.os.Bundle;  
import android.support.annotation.Nullable;  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentPagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.support.v7.app.AppCompatActivity;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.TabHost;  
import android.widget.TextView;  

/** 
 * Function: 
 * Create date on 16/9/28. 
 * 
 * @author Conquer 
 * @version 1.0 
 */  

public class TabViewPagerActivity extends AppCompatActivity implements TabHost.TabContentFactory{  


    private TabHost mTabHost;  

    @Override  
    protected void onCreate(@Nullable Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_tab_viewpager);  

        // 初始化总布局  
        mTabHost = (TabHost) findViewById(R.id.tab_host);  
        mTabHost.setup();  

        // 三个Tab 做处理  

        // 1. init data  
        int[] titleIDs = {  
                R.string.home,  
                R.string.message,  
                R.string.me  
        };  
        int[] drawableIDs = {  
                R.drawable.main_tab_icon_home,  
                R.drawable.main_tab_icon_message,  
                R.drawable.main_tab_icon_me  
        };  
        // data < -- > view  

        for (int index = 0; index < titleIDs.length; index++) {  

            View view = getLayoutInflater().inflate(R.layout.main_tab_layout, null, false);  

            ImageView icon = (ImageView) view.findViewById(R.id.main_tab_icon);  
            TextView title = (TextView) view.findViewById(R.id.main_tab_txt);  
            View tab = view.findViewById(R.id.tab_bg);  

            icon.setImageResource(drawableIDs[index]);  
            title.setText(getString(titleIDs[index]));  

            tab.setBackgroundColor(getResources().getColor(R.color.white));  

            mTabHost.addTab(  
                    mTabHost.newTabSpec(getString(titleIDs[index]))  
                            .setIndicator(view)  
                            .setContent(this)  
            );  




        }  


        // 三个fragment组成的viewpager  

        final Fragment[] fragments = new Fragment[]{  
                TestFragment.newInstance("home"),  
                TestFragment.newInstance("message"),  
                TestFragment.newInstance("me")  
        };  
        final ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);  
        viewPager.setOffscreenPageLimit(fragments.length);  
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  
            @Override  
            public Fragment getItem(int position) {  
                return fragments[position];  
            }  

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

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
            @Override  
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  

            }  

            @Override  
            public void onPageSelected(int position) {  
                if(mTabHost != null){  
                    mTabHost.setCurrentTab(position);  
                }  
            }  

            @Override  
            public void onPageScrollStateChanged(int state) {  

            }  
        });  

        mTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {  
            @Override  
            public void onTabChanged(String s) {  
                if (mTabHost != null) {  
                    int position = mTabHost.getCurrentTab();  
                    viewPager.setCurrentItem(position);  
                }  

            }  
        });  



    }  

    @Override  
    public View createTabContent(String s) {  
        View view = new View(this);  
        view.setMinimumHeight(0);  
        view.setMinimumWidth(0);  
        return view;  
    }  
}  

values文件夹下

colors.xml

<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <color name="colorPrimary">#3F51B5</color>  
    <color name="colorPrimaryDark">#303F9F</color>  
    <color name="colorAccent">#FF4081</color>  
    <color name="white">#FFFFFF</color>  
</resources>  

dimens.xml

<resources>  
    <!-- Default screen margins, per the Android Design guidelines. -->  
    <dimen name="activity_horizontal_margin">16dp</dimen>  
    <dimen name="activity_vertical_margin">16dp</dimen>  
</resources>  

strings.xml

<resources>  
    <string name="app_name">ViewPagerProject</string>  
    <string name="home">首页</string>  
    <string name="message">消息</string>  
    <string name="me">我</string>  
</resources>  

styles.xml

<resources>  

    <!-- Base application theme. -->  
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
        <!-- Customize your theme here. -->  
        <item name="colorPrimary">@color/colorPrimary</item>  
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
        <item name="colorAccent">@color/colorAccent</item>  
    </style>  

</resources>  

运行效果：

如果需要底部Tab标签出现竖直分割线，找到activity_tab_viewpager.xml

TabWidget这个控件，即id=”@android:id/tabs”的这个控件

设置android:showDividers=”middle”这条属性，如图：

即可出现竖直分割线。

项目效果图如下

android:showDividers属性可以设置如下4个值：
none：不显示分隔线；
beginning：在LinearLayout的开始处显示分隔线；
end：在Linearlayout的结尾处显示分隔线；

middle：在LinearLayout中的每两个组件间显示分隔线；

项目Demo下载：

https://download.csdn.net/download/weimeig/10421301