今天跟大家来分享很实用的东西,基本大多数APP开发都能用到,ViewPager + FragmentTabHost 结合起来,相信很多人都接触过 ,一个界面 可以通过滑动来跳转界面 还可以通过点击事件来跳转界面。两者相结合给用户一个不错的体验,废话不多说,效果图先上。
点击按钮1的时候 会出现有ViewPager 效果的界面
点击按钮2的时候 会 出现 碎片1的界面
思路
1.定义一个FragmentTabost
2.其中一个Fragment上面放ViewPager
3.ViewPager上面放多个Fragment
在Fragment中使用ViewPager,必须通过getChildFragmentManager()为FragmentPageAdapter提供Fragment管理器。
步骤
1 布局
A TabHost布局
android:layout_height="match_parent"
android:orientation="vertical" >
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#00BFFF">
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" >
B ViewPager布局
android:layout_height="match_parent"
android:orientation="vertical" >
android:layout_width="match_parent"
android:layout_height="match_parent" >
C TabHost 内容布局
android:layout_height="match_parent"
android:orientation="vertical" >
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="按钮1" />
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;
}
}