欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2024-03-05 10:09:24
今天发的是tabhost结合viewpager实现首页底部导航的效果,虽然说网上有很多这样的demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性; 先...

今天发的是tabhost结合viewpager实现首页底部导航的效果,虽然说网上有很多这样的demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性;

先上效果图,如下:

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

代码里面有注释,就不过多解释了,说几点需要注意的问题

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结合实现首页导航效果,希望对大家有所帮助