ViewPager跟FragmentTabHost结合起来使用

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




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

ViewPager跟FragmentTabHost结合起来使用_第1张图片






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




ViewPager跟FragmentTabHost结合起来使用_第2张图片







思路 

1.定义一个FragmentTabost


2.其中一个Fragment上面放ViewPager


3.ViewPager上面放多个Fragment


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







步骤


1  布局


A  TabHost布局

 


    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


   


            android:id="@+id/view_tabhost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
   
   


            android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" android:background="#00BFFF">


                    android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" >
       
   



B  ViewPager布局

 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


            android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
   



C  TabHost 内容布局



    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


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


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






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;


}
}


你可能感兴趣的:(布局)