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;
}

@Override
public 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);

       }
   }

}

@Override
public 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，为了可以在后面点击时可以分开处理不同的点击事件

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