Android 中 TabHost与ViewPager结合实现首页导航效果

今天发的是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结合实现首页导航效果，希望对大家有所帮助