TabHost+ViewPager+Fragment实现页面的滑动
大家都知道TabHost是标签窗口控件需要放在layout的最外层，内部控件需要FrameLayout和widget标签栏，点击不同的标签，显示不同的标签页。TabHost有个好处就是标签页不仅可以放fragment，还可以放activity。当然这次的文章讲述是通过fragment来完成的。
如果我们在做项目中，在加入ViewPager这个控件实现标签栏和ViewPager的联动，就可以实现类似微信界面的滑动显示。
我们可以先看看ViewPager
ViewPager在app中经常看见，引导页的广告可以滑动，显示不同的内容，在主界面里的广告页也可以提高用户体验，所以这个控件非常重要。
我们可以看看ViewPager的控件内容
.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/viewline"
>
.support.v4.view.ViewPager>ViewPager是用到android v4包下的内容，v4包下有很多内容，经常用到的Fragment类不是用系统给的类而是V4包的Fragment比较常用。
ViewPager 需要数据源和对应的适配器
List< view> 和 PagerAdapter； List< Fragment> FragmentPagerAdapter2种放进视图页的形式
这次我们用第二种，定义好适配器。
public class viewpageradapter extends FragmentPagerAdapter {
List list;
public viewpageradapter(FragmentManager fm,List list) {
super(fm);
this.list=list;
}
@Override
public Fragment getItem(int position) {
Object fragment= list.get(position);
return (Fragment) fragment;
}
@Override
public int getCount() {
return list.size();
}
}
初始化好数据源
private void addFragment() {
list.add(new testFragment());
list.add(new test_twofragment());
list.add(new test_threefragment());
}然后实例化适配器，并用ViewPager建立适配器
viewpageradapter=new viewpageradapter(getSupportFragmentManager(),list);
viewPager.setAdapter(viewpageradapter);这样ViewPager就做好了
之后定义三个Fragment类
public class testFragment extends android.support.v4.app.Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view= inflater.inflate(R.layout.layout,container,false);
return view;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
}第二个frament
package com.example.administrator.okio;
import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Administrator on 2018/6/12 0012.
*/
public class test_twofragment extends android.support.v4.app.Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.layouttwo,null);
return view;
}
}
第三个fragment
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;
/**
* Created by Administrator on 2018/6/12 0012.
*/
public class test_threefragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.layoutthree,null);
return view;
}
}对应的布局都很简单，就一个TextView，就不一一粘贴了。
主界面的布局文件
<TabHost
android:id="@+id/tabhost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/viewline"
>
android.support.v4.view.ViewPager>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
FrameLayout>
<View
android:id="@+id/viewline"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#cccccc"
android:layout_above="@android:id/tabs"/>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
>
TabWidget>
RelativeLayout>
TabHost>用到TabHost控件，里面要有widget标签栏 ，而且对应的id是用系统提供的id，还需要加入FrameLayout，作为标签页的内容容器，但因为这次我们是用ViewPager，所以不需要它，把它Gone了。
进行widget标签栏的标签添加
private void initwidget() {
String [] tab_name=new String[]{"主页","点餐","我的"};
int [] tab_icon=new int[]{R.drawable.home_changed,R.drawable.msg_changed,R.drawable.me_changed};
for (int index = 0; index
View view= LayoutInflater.from(MainActivity.this).inflate(R.layout.unit_tab,null,false);
ImageView imageView=view.findViewById(R.id.tab_icon);
TextView textView=view.findViewById(R.id.tab_txt);
textView.setText(tab_name[index]);
View views=view.findViewById(R.id.tab_bg);
views.setBackgroundColor(Color.WHITE);
imageView.setImageResource(tab_icon[index]);
tabHost.addTab(tabHost.newTabSpec(tab_name[index]).setIndicator(view).setContent((MainActivity.this)));//设置标签内容，因为内容是放在framelayout里面的，因为不需要，但是必须要带入这个参数，就随便加入一个view，反正也不显示。
}
} 标签栏每个标签都是一个视图单元，需要对单元布局进行定义，设置内容，最后通过TabHost对象的addTab方法加入标签，完成标签的添加。
最后设置ViewPager的监听事件和TabHost的监听事件
private void setListern() {
tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
@Override
public void onTabChanged(String tabId) {
int position= tabHost.getCurrentTab();
viewPager.setCurrentItem(position);
}
});
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
tabHost.setCurrentTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}那么联动效果就可以达成了
作者:何钰莹
原文地址：[点击这里] (https://blog.csdn.net/qq_38952132/article/details/80668517)