今天发的是TabHost结合ViewPager实现首页底部导航的效果，虽然说网上有很多这样的Demo，不过呢，我还是要把自己练习写的发出来，没错！就是这么任性；
先上效果图，如下：
代码里面有注释，就不过多解释了，说几点需要注意的问题
1：TabHost 、TabWidget、FrameLayout一定添加id这个属性，否则会报错
android:id=”@android:id/tabhost”
android:id=”@android:id/tabcontent”
android:id=”@android:id/tabs”
这个属性是固定的。
2：ViewPager的适配器要继承PagerAdapter，别整错咯；
布局文件xml：
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@android:id/tabhost" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.wgh.tabhostwithviewpager.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1.0"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.0" android:visibility="gone" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#0ff0f0" /> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RadioButton android:id="@+id/radioButton1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/img_draw_money_fail" android:button="@null" android:paddingLeft="10dp" /> <RadioButton android:id="@+id/radioButton2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/img_draw_money_fail" android:button="@null" /> <RadioButton android:id="@+id/radioButton3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/img_draw_money_fail" android:button="@null" /> <RadioButton android:id="@+id/radioButton4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_weight="1" android:background="@drawable/img_draw_money_fail" android:button="@null" /> </RadioGroup> </LinearLayout> </TabHost>
Activity：
package com.example.wgh.tabhostwithviewpager; import android.app.TabActivity; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.widget.RadioButton; import android.widget.RadioGroup; import android.widget.TabHost; import java.util.ArrayList; public class MainActivity extends TabActivity { private TabHost tabHost = null; private ViewPager viewPager = null; private RadioGroup radioGroup = null; private ArrayList<View> list = null; private View view1 = null; private View view2 = null; private View view3 = null; private View view4 = null; private RadioButton radioButton1 = null; private RadioButton radioButton2 = null; private RadioButton radioButton3 = null; private RadioButton radioButton4 = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); //设置初始化默认选项 radioGroup.check(R.id.radioButton1); radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); viewPager.setCurrentItem(0); tabHost.setCurrentTab(0); //getViewPager添加适配器 MyAdapter adapter = new MyAdapter(list); viewPager.setAdapter(adapter); /** * viewPager设置滑动监听,根据viewPager选中页的position，设置tabHost页卡选项的样式 */ viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (position == 0){ radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); }else if(position == 1){ radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_success); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); }else if(position == 2){ radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_success); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); }else if(position == 3){ radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_success); } } @Override public void onPageScrollStateChanged(int state) { } }); /** * 给radioGroup设置监听，以此来改变ViewPager的页面 */ radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup radioGroup, int checkedId) { switch (checkedId){ case R.id.radioButton1: viewPager.setCurrentItem(0); radioButton1.setBackgroundResource(R.drawable.img_draw_money_success); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); break; case R.id.radioButton2: viewPager.setCurrentItem(1); radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_success); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); break; case R.id.radioButton3: viewPager.setCurrentItem(2); radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_success); radioButton4.setBackgroundResource(R.drawable.img_draw_money_fail); break; case R.id.radioButton4: viewPager.setCurrentItem(3); radioButton1.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton2.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton3.setBackgroundResource(R.drawable.img_draw_money_fail); radioButton4.setBackgroundResource(R.drawable.img_draw_money_success); break; } } }); } /** * 初始化数据源 */ private void initData() { list = new ArrayList<View>(); list.add(view1); list.add(view2); list.add(view3); list.add(view4); } /** * 初始化控件 */ private void initView() { tabHost = getTabHost(); viewPager = (ViewPager) findViewById(R.id.viewPager); radioGroup = (RadioGroup) findViewById(R.id.radioGroup); radioButton1 = (RadioButton) findViewById(R.id.radioButton1); radioButton2 = (RadioButton) findViewById(R.id.radioButton2); radioButton3 = (RadioButton) findViewById(R.id.radioButton3); radioButton4 = (RadioButton) findViewById(R.id.radioButton4); /** * 将每页要展示的layout实例出来，添加到list里面，最后通过适配器return回来要展示的相应的layout */ LayoutInflater inflater = LayoutInflater.from(this); view1 = inflater.inflate(R.layout.layout_one,null); view2 = inflater.inflate(R.layout.layout_two,null); view3 = inflater.inflate(R.layout.layout_three,null); view4 = inflater.inflate(R.layout.layout_four,null); } }
ViewPager适配器MyAdapter：
public class MyAdapter extends PagerAdapter { private ArrayList<View> list = null; public MyAdapter(ArrayList<View> list) { this.list = list; } @Override public int getCount() { return list.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); return list.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } }
以上所述是小编给大家介绍的Android 中 TabHost与ViewPager结合实现首页导航效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！