ViewPager和Tabhost（tabhostfragment）结合

ViewPager可以使视图滑动起来，Tabhost让布局更加简单，

其实写完这个界面的时候，才感觉自己无非就是蛋疼，Tabhost本身就是就是一个横向的线性布局。

但是作为写教程而言还是要从头开始，一步一步来。

先是主布局界面

<?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"   >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"></android.support.v4.view.ViewPager>    <android.support.v4.app.FragmentTabHost        android:id="@android:id/tabhost"        android:layout_width="match_parent"        android:layout_height="60dp">        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="0dp"            android:layout_height="0dp"></FrameLayout>    </android.support.v4.app.FragmentTabHost></LinearLayout>

毫无疑问，就是上面一个viewpager，底下一个tabhost。

先把viewpager写好，再新建adapter

public class MyFragmentAdapter extends FragmentPagerAdapter {    private static final String TAG = "MyFragmentAdapter";    public MyFragmentAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int position) {        Log.d(TAG, "getItem position----->"+position);        Fragment fragment = null;        switch (position) {            case 0:                fragment = new Fragment1();                break;            case 1:                fragment = new Fragment2();                break;            case 2:                fragment = new Fragment3();                break;            case 3:                fragment = new Fragment4();                break;            case 4:                fragment = new Fragment5();                break;        }        return fragment;    }    @Override    public int getCount() {        return 5;    }}

fragment由于是举例子，写的也非常简单

public class Fragment1 extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view=inflater.inflate(R.layout.fragment1,container,false);        return view;    }}

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"              android:background="#ff1036"              android:orientation="vertical"              android:layout_width="match_parent"              android:layout_height="match_parent">    <TextView        android:textSize="80sp"        android:text="111111111"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

好，到这来万事具备，只欠东风了。

回到我们的activity中

viewPager = (ViewPager) findViewById(R.id.viewpager);adapter = new MyFragmentAdapter(getSupportFragmentManager());viewPager.setAdapter(adapter);

加上这三行，基本就可以执行左右滑动了，

最后绑定tabhost

  fragmentTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.viewpager); for (int i = 0; i < 5; i++) {     TabHost.TabSpec tabSpec = fragmentTabHost.newTabSpec(title[i]).setIndicator(getView(i));     fragmentTabHost.addTab(tabSpec, EmptyFragment.class, null);     View view = fragmentTabHost.getTabWidget().getChildTabViewAt(i);     view.setTag(title[i]);     view.setOnClickListener(this);     mViewList.add(view); } viewPager.addOnPageChangeListener(this);

其实核心代码也就上面的那三行，取出下面的tab，增加点击事件，这也就能处理点击tab时viewpager能够切换item了。

private View getView(int index) {    View view = getLayoutInflater().inflate(R.layout.tab_item_view, null);    ImageView imageView = (ImageView) view.findViewById(R.id.iv);    imageView.setImageResource(pic[index]);    TextView textView = (TextView) view.findViewById(R.id.tv);    textView.setText(title[index]);    return view;}

@Overridepublic void onClick(View v) {   for (int i=0;i<title.length;i++){       View view = mViewList.get(i);       view.setBackgroundColor(Color.WHITE);       if (v.getTag().equals(title[i])){           view.setBackgroundColor(Color.YELLOW);           viewPager.setCurrentItem(i);       }   }}

@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {    for (int i=0;i<title.length;i++){        View view = mViewList.get(i);        view.setBackgroundColor(Color.WHITE);        if (position==i){            view.setBackgroundColor(Color.YELLOW);        }    }}

到这里整个工程都结束了，其实就是这么简单，自己去处理点击事件就可以了，不过我设置了一个tag，为了可以在后面点击时可以分开处理不同的点击事件

公司网络上传不了文件，如有需要请留言