ViewPager和TabHost结合

最新推荐文章于 2021-05-27 00:30:24 发布
转载 最新推荐文章于 2021-05-27 00:30:24 发布 · 8.4k 阅读 · 0

本文介绍了一种将TabHost用于切换Activity，同时使用ViewPager进行界面切换的方法，以实现美观且流畅的页面过渡效果。通过XML布局定义Tab栏和ViewPager，以及Java代码实现页面之间的动态跳转和动画效果，使得用户能够在不同页面间平滑过渡，提高用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前几天看了网上关于ViewPager实现滑动切换的效果。回来试了一下，发现效果确实不错，但是切换的几个页面只是调用了不同的layout，实际上还是在一个Activity里面，对功能编写就不方便了。所以，我想到了TabHost和ViewPager结合，使用TabHost切换Activity，使用ViewPager切换界面，从而晚上切换效果。废话少说，直接看代码吧。
首先是布局的xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@android:id/tabhost"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent" >

  7.     <LinearLayout
  8.         android:id="@+id/linearLayout1"
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="fill_parent"
  11.         android:orientation="vertical" >

  13.         <TabWidget
  14.             android:id="@android:id/tabs"
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="0dip" >
  17.         </TabWidget>

  19.         <LinearLayout
  20.         android:id="@+id/linearLayout1"
  21.         android:layout_width="fill_parent"
  22.         android:layout_height="40dip"
  23.         android:background="@drawable/title" >

  25.         <TextView
  26.             android:id="@+id/text1"
  27.             android:layout_width="fill_parent"
  28.             android:layout_height="fill_parent"
  29.             android:layout_weight="1.0"
  30.             android:gravity="center"
  31.             android:text="@string/black"
  32.             android:textColor="#FFFFFF"
  33.             android:textSize="22.0dip" />

  35.         <TextView
  36.             android:id="@+id/text2"
  37.             android:layout_width="fill_parent"
  38.             android:layout_height="fill_parent"
  39.             android:layout_weight="1.0"
  40.             android:gravity="center"
  41.             android:text="@string/gray"
  42.             android:textColor="#FFFFFF"
  43.             android:textSize="22.0dip" />

  45.         <TextView
  46.             android:id="@+id/text3"
  47.             android:layout_width="fill_parent"
  48.             android:layout_height="fill_parent"
  49.             android:layout_weight="1.0"
  50.             android:gravity="center"
  51.             android:text="@string/white"
  52.             android:textColor="#FFFFFF"
  53.             android:textSize="22.0dip" />
  54.     </LinearLayout>
  55.     
  56.     <ImageView
  57.         android:id="@+id/cursor"
  58.         android:layout_width="fill_parent"
  59.         android:layout_height="wrap_content"
  60.         android:scaleType="matrix"
  61.         android:src="@drawable/a" />

  63.     <android.support.v4.view.ViewPager
  64.         android:id="@+id/vPager"
  65.         android:layout_width="wrap_content"
  66.         android:layout_height="wrap_content"
  67.         android:layout_gravity="center"
  68.         android:layout_weight="1.0"
  69.         android:background="#000000"
  70.         android:flipInterval="30"
  71.         android:persistentDrawingCache="animation" />

  73.         <FrameLayout
  74.             android:id="@android:id/tabcontent"
  75.             android:layout_width="wrap_content"
  76.             android:layout_height="wrap_content"
  77.             android:visibility="gone" >
  78.         </FrameLayout>
  79.     </LinearLayout>

  81. </TabHost>
复制代码
然后是java文件
  1. package com.wcs233;

  3. import java.util.ArrayList;
  4. import java.util.List;

  6. import android.app.LocalActivityManager;
  7. import android.app.TabActivity;
  8. import android.content.Context;
  9. import android.content.Intent;
  10. import android.graphics.BitmapFactory;
  11. import android.graphics.Matrix;
  12. import android.os.Bundle;
  13. import android.os.Parcelable;
  14. import android.support.v4.view.PagerAdapter;
  15. import android.support.v4.view.ViewPager;
  16. import android.support.v4.view.ViewPager.OnPageChangeListener;
  17. import android.util.DisplayMetrics;
  18. import android.util.Log;
  19. import android.view.View;
  20. import android.view.Window;
  21. import android.view.animation.Animation;
  22. import android.view.animation.TranslateAnimation;
  23. import android.widget.ImageView;
  24. import android.widget.TabHost;
  25. import android.widget.TextView;

  27. public class ConfigTabActivity extends TabActivity {

  29.         //页卡内容
  30.         private ViewPager mPager;
  31.         // Tab页面列表
  32.         private List<View> listViews; 
  33.         // 动画图片
  34.         private ImageView cursor;
  35.         // 页卡头标
  36.         private TextView t1, t2, t3;
  37.         // 动画图片偏移量
  38.         private int offset = 0;
  39.         // 当前页卡编号
  40.         private int currIndex = 0;
  41.         // 动画图片宽度
  42.         private int bmpW;
  43.         private LocalActivityManager manager = null;
  44.         private final static String TAG = "ConfigTabActivity";
  45.         private final Context context = ConfigTabActivity.this;
  46.         private TabHost mTabHost;

  48.     /** Called when the activity is first created. */
  49.     @Override
  50.     public void onCreate(Bundle savedInstanceState) {
  51.         super.onCreate(savedInstanceState);
  52.         
  53.         Log.d(TAG, "---onCreate---");
  54.                 
  55.                 requestWindowFeature(Window.FEATURE_NO_TITLE);
  56.         setContentView(R.layout.config);
  57.         
  58.         mTabHost = getTabHost();  
  59.         mTabHost.addTab(mTabHost.newTabSpec("A").setIndicator(  
  60.                 "").setContent(  
  61.                 new Intent(this, A.class)));  
  62.         mTabHost.addTab(mTabHost.newTabSpec("B").setIndicator(  
  63.                 "").setContent(  
  64.                 new Intent(this, B.class))); 
  65.         mTabHost.addTab(mTabHost.newTabSpec("C").setIndicator(  
  66.                 "").setContent(  
  67.                 new Intent(this, C.class)));  
  68.         mTabHost.setCurrentTab(0);  
  69.         
  70.         manager = new LocalActivityManager(this, true);
  71.                 manager.dispatchCreate(savedInstanceState);
  72.         
  73.         InitImageView();
  74.                 InitTextView();
  75.                 InitViewPager();
  76.     }
  77.     
  78.     /**
  79.          * 初始化头标
  80.          */
  81.         private void InitTextView() {
  82.                 t1 = (TextView) findViewById(R.id.text1);
  83.                 t2 = (TextView) findViewById(R.id.text2);
  84.                 t3 = (TextView) findViewById(R.id.text3);

  86.                 t1.setOnClickListener(new MyOnClickListener(0));
  87.                 t2.setOnClickListener(new MyOnClickListener(1));
  88.                 t3.setOnClickListener(new MyOnClickListener(2));
  89.         }
  90.         
  91.         /**
  92.          * 初始化ViewPager
  93.          */
  94.         private void InitViewPager() {
  95.                 mPager = (ViewPager) findViewById(R.id.vPager);
  96.                 listViews = new ArrayList<View>();
  97.                 MyPagerAdapter mpAdapter = new MyPagerAdapter(listViews);
  98.                 Intent intent = new Intent(context, A.class);
  99.                 listViews.add(getView("Black", intent));
  100.                 Intent intent2 = new Intent(context, B.class);
  101.                 listViews.add(getView("Gray", intent2));
  102.                 Intent intent3 = new Intent(context, C.class);
  103.                 listViews.add(getView("White", intent3));
  104.                 mPager.setAdapter(mpAdapter);
  105.                 mPager.setCurrentItem(0);
  106.                 mPager.setOnPageChangeListener(new MyOnPageChangeListener());
  107.         }
  108.         
  109.         /**
  110.          * 初始化动画
  111.          */
  112.         private void InitImageView() {
  113.                 cursor = (ImageView) findViewById(R.id.cursor);
  114.                 bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
  115.                                 .getWidth();// 获取图片宽度
  116.                 DisplayMetrics dm = new DisplayMetrics();
  117.                 getWindowManager().getDefaultDisplay().getMetrics(dm);
  118.                 int screenW = dm.widthPixels;// 获取分辨率宽度
  119.                 offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
  120.                 Matrix matrix = new Matrix();
  121.                 matrix.postTranslate(offset, 0);
  122.                 cursor.setImageMatrix(matrix);// 设置动画初始位置
  123.         }
  124.         
  125.         /**
  126.          * ViewPager适配器
  127.          */
  128.         public class MyPagerAdapter extends PagerAdapter {
  129.                 public List<View> mListViews;

  131.                 public MyPagerAdapter(List<View> mListViews) {
  132.                         this.mListViews = mListViews;
  133.                 }

  135.                 @Override
  136.                 public void destroyItem(View arg0, int arg1, Object arg2) {
  137.                         ((ViewPager) arg0).removeView(mListViews.get(arg1));
  138.                 }

  140.                 @Override
  141.                 public void finishUpdate(View arg0) {
  142.                 }

  144.                 @Override
  145.                 public int getCount() {
  146.                         return mListViews.size();
  147.                 }

  149.                 @Override
  150.                 public Object instantiateItem(View arg0, int arg1) {
  151.                         ((ViewPager) arg0).addView(mListViews.get(arg1), 0);
  152.                         return mListViews.get(arg1);
  153.                 }

  155.                 @Override
  156.                 public boolean isViewFromObject(View arg0, Object arg1) {
  157.                         return arg0 == (arg1);
  158.                 }

  160.                 @Override
  161.                 public void restoreState(Parcelable arg0, ClassLoader arg1) {
  162.                 }

  164.                 @Override
  165.                 public Parcelable saveState() {
  166.                         return null;
  167.                 }

  169.                 @Override
  170.                 public void startUpdate(View arg0) {
  171.                 }
  172.         }

  174.         /**
  175.          * 头标点击监听
  176.          */
  177.         public class MyOnClickListener implements View.OnClickListener {
  178.                 private int index = 0;

  180.                 public MyOnClickListener(int i) {
  181.                         index = i;
  182.                 }

  184.                 @Override
  185.                 public void onClick(View v) {
  186.                         mPager.setCurrentItem(index);
  187.                 }
  188.         };

  190.         /**
  191.          * 页卡切换监听
  192.          */
  193.         public class MyOnPageChangeListener implements OnPageChangeListener {

  195.                 int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
  196.                 int two = one * 2;// 页卡1 -> 页卡3 偏移量

  198.                 @Override
  199.                 public void onPageSelected(int arg0) {
  200.                         Animation animation = null;
  201.                         Intent intent = new Intent();
  202.                         switch (arg0) {
  203.                         case 0:
  204.                                 
  205.                                 Log.d(TAG, "---0---");
  206.                                 mTabHost.setCurrentTab(0);  
  207.                                 if (currIndex == 1) {
  208.                                         animation = new TranslateAnimation(one, 0, 0, 0);
  209.                                 } else if (currIndex == 2) {
  210.                                         animation = new TranslateAnimation(two, 0, 0, 0);
  211.                                 }
  212.                                 break;
  213.                         case 1:
  214.                                 
  215.                                 Log.d(TAG, "---1---");
  216.                                 mTabHost.setCurrentTab(1);
  217.                                 if (currIndex == 0) {
  218.                                         animation = new TranslateAnimation(offset, one, 0, 0);
  219.                                 } else if (currIndex == 2) {
  220.                                         animation = new TranslateAnimation(two, one, 0, 0);
  221.                                 }
  222.                                 break;
  223.                         case 2:
  224.                                 
  225.                                 Log.d(TAG, "---2---");
  226.                                 mTabHost.setCurrentTab(2);
  227.                                 if (currIndex == 0) {
  228.                                         animation = new TranslateAnimation(offset, two, 0, 0);
  229.                                 } else if (currIndex == 1) {
  230.                                         animation = new TranslateAnimation(one, two, 0, 0);
  231.                                 }
  232.                                 break;
  233.                         }
  234.                         currIndex = arg0;
  235.                         animation.setFillAfter(true);// True:图片停在动画结束位置
  236.                         animation.setDuration(300);
  237.                         cursor.startAnimation(animation);
  238.                 }

  240.                 @Override
  241.                 public void onPageScrolled(int arg0, float arg1, int arg2) {
  242.                 }

  244.                 @Override
  245.                 public void onPageScrollStateChanged(int arg0) {
  246.                 }
  247.         }
  248.         
  249.         private View getView(String id,Intent intent)
  250.         {
  251.                 return manager.startActivity(id, intent).getDecorView();
  252.         }
  253. }
复制代码
至于每个单独页面的layout和java，大家就根据自己的需求写吧。
ViewPager和Tabhost结合，可滑动的tabhost
钱进的专栏
07-26 2万+
可滑动的Tabhost,借助了surporrtV13,V4也差不多，一样的。 二者结合，当tabhost的tabbar点击的时候，viewPager滑动，滑动viewPager的时候，tabbar切换。tabbar的样式进行了重新布局，当然，你也可以自己定义自己的，详情看代码吧（下面有源码下载的地址）。 首先你要先在项目下建个libs把surporrtV13的jar包放进去。 效果图：
【Android应用源码】ViewPager和Tabhost结合，可滑动的tabhost.zip
最新发布
07-30
总结而言，本套【Android应用源码】ViewPager和Tabhost结合，可滑动的tabhost资源，为Android应用开发者提供了一个功能丰富、实用性强的学习和开发工具。它不仅有助于提高开发效率，还可以帮助开发者更好地理解...
ViewPager+TabHost 实现选项卡页面间滑动，组件不能动态更改UI问题的解决！
flycatdeng
11-29 156
一、现象： 通过ViewPager+TabHost可以实现点击选项卡滑动，或者通过手势拖动滑动。因为考虑到组件比较多，不能将所有的组件监听响应写在一个类，所以需要既可以在ViewPager中的视图“点击”（以一个按钮为例）响应又能在TabHost中的activity“点击”响应的效果。 很幸运，按钮能响应，但是将按钮组件的监听方法写到onResume方法中的时候，按钮就不能响应了，但是能够...
TabHost和ViewPager
jingshanjushi的专栏
04-04 948
TabHost和ViewPager的联用
安卓Android源码——ViewPager和Tabhost结合，可滑动的tabhost.rar
10-10
这个压缩包"安卓Android源码——ViewPager和Tabhost结合，可滑动的tabhost.rar"提供了将两者结合使用的示例代码，帮助开发者创建一个可以滑动的`TabHost`，增强用户体验。 `ViewPager` 是Android SDK中的一个强大...
ViewPager和Tabhost结合，可滑动的tabhost.zip
04-19
在`ViewPager`和`TabHost`结合的场景下，我们可以实现一种动态、可滑动的标签栏，提升应用的用户体验。 首先，`ViewPager`是Android支持库中的一个组件，它允许用户通过手势左右滑动来切换页面。每个页面都是`...
android viewpager 底部tabhost,TabHost+ViewPager实现底部导航效果
weixin_35830006的博客
05-27 517
一：摘要这篇文章主要为大家介绍了使用ViewPager+TabHost实现底部导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。下面我们先来看一下要实现的效果吧!二：具体实现过程1.新建一个project,把主布局改为TabHost，id为tab_host2.主布局添加一个相对布局，相对布局里加一个id为view_pager的 ViewPager布局。加一个id为@android:id/...
TabHost和Viewpager结合的使用方案
03-17
TabHost和Viewpager结合的使用方案
viewpager + tabhost的结合使用
08-27
可根据需求自定义tabhost,带信息提示，viewpager左右滑动，底部tab跟随。现在有个问题，每次进入应用都会加载所有的activity,我想改成每次进入只加载第一个，其他activity页面是滑动或点击tab的时候动态加载数据。能解决的mm
android FragmentTabhost+ViewPager实现可滑动的标签页
08-28
android实现可滑动标签页有很多方法，这里给大家介绍一种官方推荐，性能最高，并且代码最少的方式，就是利用FragmentTabhost+ViewPager+FragmentPagerAdapter来实现。
非常棒的TabHost+ViewPager实现的UI框架
04-16
NULL 博文链接：https://zhelong111.iteye.com/blog/1772285
Android底部导航栏——FragmentTabHost+ViewPager+Fragment
08-14
Android底部导航栏——FragmentTabHost+ViewPager+Fragment
ViewPager和TabHost结合学习心得
weixin_34249678的博客
12-04 119
刚开始做项目，有一个页面上面是三个标签, 下面三个页面可以左右滑动，刚开始挺抓狂的，怎么让它们标签与页面关联起来呢？我想到了TabHost和ViewPager结合，使用TabHost切换Activity，使用ViewPager切换界面，废话少说，直接看代码吧。 先看看布局文件：<?xml version="1.0" encoding="utf-8"?&gt...
ViewPager跟FragmentTabHost结合起来使用
空城丶的博客
02-25 441
ViewPager + FragmentTabHost 组合 让用户体验更好了
ViewPager与Tabhost结合实现可滑动的Android界面
当ViewPager和TabHost结合时，不仅可以利用ViewPager滑动的流畅特性，还可以通过TabHost的标签页让用户知晓当前所在页面，提高用户交互体验。 在具体实现ViewPager和TabHost结合的过程中，需要掌握以下几个关键知识...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值