ViewPager跟FragmentTabHost结合起来使用

今天跟大家来分享很实用的东西，基本大多数APP开发都能用到，ViewPager + FragmentTabHost 结合起来，相信很多人都接触过 ，一个界面 可以通过滑动来跳转界面 还可以通过点击事件来跳转界面。两者相结合给用户一个不错的体验，废话不多说，效果图先上。

点击按钮1的时候 会出现有ViewPager 效果的界面  

点击按钮2的时候 会 出现 碎片1的界面

思路 

1.定义一个FragmentTabost

2.其中一个Fragment上面放ViewPager

3.ViewPager上面放多个Fragment

在Fragment中使用ViewPager，必须通过getChildFragmentManager()为FragmentPageAdapter提供Fragment管理器。

步骤

1  布局

A  TabHost布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <!-- 这里面的ID 自己定义 -->


    <FrameLayout
        android:id="@+id/view_tabhost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>
    <!-- 这里面的ID 必须是这样 系统给的 不然会报错 -->


    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:background="#00BFFF">


        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" >
        </FrameLayout>
    </android.support.v4.app.FragmentTabHost>


</LinearLayout>

B  ViewPager布局

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="match_parent" >
    </android.support.v4.view.ViewPager>


</LinearLayout>

C  TabHost 内容布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <TextView
        android:id="@+id/text_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:text="按钮1" />


    <TextView
        android:id="@+id/text_eng"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="10dp"
        android:text="button1" />


</LinearLayout>

2 创建ViewPager适配器

package tabhost_viewpager;


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


public class BaseAdapterViewPager extends FragmentPagerAdapter {
private Fragment[] fragments = { new Fragment1(), new Fragment2(),
new Fragment3() };


public BaseAdapterViewPager(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}


@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragments[arg0];
}


@Override
public int getCount() {
// TODO Auto-generated method stub
return fragments.length;
}


}

3  创建ViewPager

package tabhost_viewpager;


import com.xcl.tabhost_viewpager.R;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class ViewPagerFragment extends Fragment {
private BaseAdapterViewPager adater;
private ViewPager viewpager;


@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
// TODO Auto-generated method stub
View pager = inflater.inflate(R.layout.viewpager_main, null);
ID(pager);
Adapter();
return pager;
}


/**
* 找到ID
* 
* @param view
*/
public void ID(View view) {
viewpager = (ViewPager) view.findViewById(R.id.viewpager);
}


/**
* 设置适配器
*/
public void Adapter() {
adater = new BaseAdapterViewPager(getChildFragmentManager());
viewpager.setAdapter(adater);
}
}

4  创建FragmentTabHost

package tabhost_viewpager;


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.view.View;
import android.widget.TabHost.TabSpec;
import android.widget.TabWidget;
import android.widget.TextView;


import com.xcl.tabhost_viewpager.R;


public class TabHost_ViewPagerAcitviy extends FragmentActivity {
private Class[] classs = { ViewPagerFragment.class,Fragment4.class,Fragment5.class};
private String[] text_names = { "按钮1", "按钮2", "按钮3" };
private String[] text_engs = { "button1", "button2", "button3" };
private String[] text_colors = { "#33FF99", "#CCCC99", "#FFCC99" };
private FragmentTabHost tabhost;


@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.tabhost_main);
ID();
TabHost();
}


/**
* 找到ID
*/
public void ID() {
tabhost = (FragmentTabHost) findViewById(android.R.id.tabhost);
}


/**
* 设置TabHost
*/
public void TabHost() {
// TabHost 关联 实际要展示的碎片
tabhost.setup(this, getSupportFragmentManager(), R.id.view_tabhost);
for (int i = 0; i < text_names.length; i++) {
// 每一个TabHost设置一个标题
TabSpec spec = tabhost.newTabSpec(text_names[i]);
spec.setIndicator(this.TabHostState(i));


// 每一个TabHost关联一个碎片
tabhost.addTab(spec, classs[i], null);


}
// 去掉TabHost分割线
TabWidget tabwid = tabhost.getTabWidget();
tabwid.setDividerDrawable(null);
}


/**
* TabHost样式
* 
* @param index
* @return
*/
private View TabHostState(int index) {
View view = getLayoutInflater().inflate(R.layout.tabhost_view, null);


TextView text = (TextView) view.findViewById(R.id.text_name);
TextView texteng = (TextView) view.findViewById(R.id.text_eng);
text.setText(text_names[index]);
texteng.setText(text_engs[index]);
return view;


}
}