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结合实现首页导航效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android 利用ViewPager+GridView实现首页导航栏布局分页效果

    最近我尝试使用ViewPager+GridView实现的,看起来一切正常,废话不多说,具体代码如下: 如图是效果图 首先分析下思路 1.首先是怎么布局:整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中,下方是圆点 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)

    ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet

  • Android动态给ViewPager添加Indicator导航

    先看下效果 小圆点的形状和颜色都是可以自己定义的,看需求 首先第一步,滑2个圆点,一个是选中后的圆点,一个是未选中的圆点,看选中的圆点shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > &l

  • ViewPager顶部导航栏联动效果(标题栏条目多)

    如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&

  • Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

  • Android ViewPager导航小圆点实现无限循环效果

    之前用View Pager做了一个图片切换的推荐栏(就类似与淘宝.头条客户端顶端的推荐信息栏),利用View Pager很快就能实现,但是一次无意间使用淘宝APP的时候,突然发现它的效果和我做的还不一样,淘宝APP的推荐栏可以左右无限循环切换,而ViewPager自身其实并没有支持这个功能. 其实实现这个无限循环不难,只需要在数据源的首尾各添加一张多余的图片,在onPagerChangeListener()中监听position<1和position>(总数据条目-1)就可以了.另外一点需要注

  • Android ViewPager制作新手导航页(动态加载)

    我们来讲个老生常谈的话题,估计大家都用过的->ViewPager,用它来做新手导航页面,虽然这次也是讲这个,但是和以往的用法可能有些不同,大家都看到标题进来的,应该知道的是:动态加载指示器. 什么叫动态加载呢,是不是感觉很高大上呢,其实呢就是动态的去加载指示器的数量的,而不是在布局文件中写死.希望看了这篇文章大家对ViewPager有新的认识. 看到这个效果大家应该都很不屑吧,今天讲这个就是为了让大家有新的认识.好了,好好听,开始了. 这个动态加载就是为了动态的加载下面的灰色圆点指示器和红色圆点

  • Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果

    BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退.于是就用这种方式实现了,效果还不错.github有详细说明,多余的就不说了. 这个roughike是这个项目的所有者(大神致敬). 我用的是Android studio开发,fragment全部导的V4的包(以为最开始就支持的是v4的,后面也支持了app.fragment). 首先是dependen

  • Android使用ViewPager实现导航

    首先先了解ViewPager实现的出效果是能够使视图左右滑动. ViewPager在XML文件中的声明和其他一些控件的声明有点儿不一样 而android.support.v4.view是Android界面特殊效果的第三方加载的jar包,能够向下兼容. <android.support.v4.view.ViewPager ... ... > </android.support.v4.view.ViewPager> 加载显示的页卡:需要将layout布局文件转型为View对象 (1)

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

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就不过多解释了,说几点需要注意的问题 1:TabHost .TabWidget.FrameLayout一定添加id这个属性,否则会报错 android:id="@android:id/tabhost" android:id="@android:id/tabcontent"

  • 详解Android中fragment和viewpager的那点事儿

    在之前的博文<Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果>和<详解Android中Fragment的两种创建方式>以及<Android中fragment与activity之间的交互(两种实现方式)>中我们介绍了ViewPager以及Fragment各自的使用场景以及不同的实现方式. 那如果将他们两结合起来,会不会擦出点火花呢,答案是肯定的.之前在介绍ViewPager时,我们实现了多个ImageView的切换,并配合更新导航原点的状态.那我

  • Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法

    Android 中SwipeRefreshLayout与ViewPager滑动事件冲突解决方法 问题描述: 开发中发现,SwipeRefreshLayout的下拉刷新,与ViewPager开发的banner的左右滑动事件有一点冲突,导致banner的左右滑动不够顺畅.很容易在banner的左右滑动的过程中,触发SwipeRefreshLayout的下拉刷新,从而导致banner左右滑动的体验很差. 解决方案: 可以在ViewPager的滑动时候设置SwipeRefreshLayout暂时不可用,

  • Android 中基于TabLayout+ViewPager实现标签卡效果

    代码已经上传至Github:https://github.com/YanYoJun/ViewPagerDemo 先看效果 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.andro

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android 中从屏幕左下角弹出Dialog动画效果的实现代码

    MainActivity代码: import android.app.Dialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.Window; import androi

  • Android中ListView + CheckBox实现单选、多选效果

    还是先来看看是不是你想要的效果: 不废话,直接上代码,很简单,代码里都有注释 1 单选 public class SingleActivity extends AppCompatActivity { private ListView listView; private ArrayList<String> groups; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta

  • Android实现腾讯新闻的新闻类别导航效果

    效果图如下所示:  1.在Adapter中加入如下代码 <pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:'OCR A Std';font-size:10.2pt;"><span style="color:#cc7832;">private int </span><span style="color:#9876aa;">cl

  • 灵活使用Android中ActionBar和ViewPager切换页面

    本文实例讲述了Android使用ActionBar和ViewPager切换页面,分享给大家供大家参考.具体如下: 运行效果截图如下: 项目布局如下: 具体代码如下: MainActivity.java代码 import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.

随机推荐