FragmentTabHost+Fragment+ViewPager实现内外层嵌套Tab

最新推荐文章于 2020-02-05 19:58:28 发布
最新推荐文章于 2020-02-05 19:58:28 发布
阅读量1w 收藏 31
点赞数 6
分类专栏： android 控件使用技巧 android 功能实现技巧 文章标签： android 嵌套Tab ViewPager FragmentTabHost
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangxue336/article/details/22804971
版权

    今天介绍现在比较流行的一种app布局方式：内外层嵌套Tab，子Tab可以实现滑动切换。

    实现原理：FragmentTabHost+Fragment实现第一层Tab。

                    在Fragment里利用ViewPaper，实现第二层Tab，也就是子Tab。

    从原理可以看出，这两层Tab是完全解耦的，没有任何事件和数据联系，那么先介绍第一层怎么实现，由于google对FragmentTabHost+Fragment封装的比较好，实现过程无非是FragmentTabHost+Fragment的使用过程。

    可以用一句话来说明过程：就是给FragmentTabHost设置一定数量的按钮背景。

   public static  Context context;
    /**
     * 中间内容的fragment
     */
    private Fragment frg_content;

    /**
     * fragmentTabHost
     */
    private FragmentTabHost frg_tabHost;

    /**
     * 定义数组来存放按钮图片
     */
    private int intImageViewArray[] = {
            R.drawable.selector_bt_bookstore_featured, R.drawable.selector_bt_bookstore_top,
            R.drawable.selector_bt_bookstore_category, R.drawable.selector_bt_bookstore_search
    };

    /**
     * 定义数组来存放Fragment界面
     */
    private Class fragmentArray[] = {
            BookstoreFeaturedFragment.class, BookstoreTopFragment.class,
            BookstoreCategoryFragment.class, BookstoreSearchFragment.class
    };

    /**
     * Tab选项卡的文字
     */
    private String txt_Array[] = {
            "精选", "排行", "分类", "搜索"
    };


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
	overridePendingTransition(R.anim.slide_right_in, R.anim.slide_mid_left_out);
			
	setContentView(R.layout.ac_bookstore_main);


        // 得到fragment的个数
        int count = intImageViewArray.length;

        // 实例化TabHost对象，得到TabHost
        frg_tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        frg_tabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        for (int i = 0; i < count; i++) {
            // 为每一个Tab按钮设置图标、文字和内容
              ImageView imageView = new ImageView(this);
//          imageView.setImageResource(intImageViewArray[i]);
            imageView.setImageDrawable(skinContext.getResources().getDrawable(intImageViewArray[i]));
            imageView.setScaleType(ScaleType.CENTER_CROP);
            TabSpec tabSpec = frg_tabHost.newTabSpec(txt_Array[i]).setIndicator(imageView);
            // 将Tab按钮添加进Tab选项卡中
              frg_tabHost.addTab(tabSpec, fragmentArray[i], null);
        }

        frg_tabHost.setCurrentTab(0);
        getSlidingMenu().setSlidingEnabled(false);

    }

这样就实现了点击哪个按钮，就显示哪个fragment。

这样就存在一个问题，就是tab布局问题，显示在上面还是下面：

tab显示在底部的布局：

  <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />

        <android.support.v4.app.FragmentTabHost
            android:id="@android:id/tabhost"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />
        </android.support.v4.app.FragmentTabHost>

     
    </LinearLayout>

tab显示在顶部的布局：

  <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <android.support.v4.app.FragmentTabHost
            android:id="@android:id/tabhost"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />
        </android.support.v4.app.FragmentTabHost>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1" />
    </LinearLayout>

对比可以看出：realtabcontent是fragment显示的位置，一般是竖向填充：layout_weight="1"
                       tabhost是tab按钮放置位置，一般是横向填充，高度根据背景自适应。

                       tabcontent是干什么用的呢？看下代码：

 

 public void switchContent(Fragment fragment) {

        getSupportFragmentManager().beginTransaction().replace(android.R.id.tabcontent, fragment)
                .commit();

    }

这行代码的作用是 显示frament页，所以我认为tabcontent指的是当前frament页面，可以用于页面的刷新。

这样第一层tab就实现了。

我们在实现第二层tab，其实即使ViewPaper的使用方法：

ViewPager的使用比较简单，完全可以当做一个listview使用：

viewpager_featured.setAdapter(viewPagerAdapter);// 设置ViewPager的适配器
viewpager_featured.setCurrentItem(0);

还可以设置缓存页面个数：viewpager_featured.setOffscreenPageLimit(2);用来防止页面刷新，这个数值越大会占用越多内存。所以放置数据刷新的方法是设置绑定数据的状态，根据数据状态觉得是否要刷新。

主要讲解下ViewPager和tab结合的时候的使用，特别是有动画效果的时候的使用。

这里介绍一种tab实现方式：1.tab 个数可删减。2、焦点tab显示在可见位置

这里tab按钮用textview来实现，先动态的初始化tab个数，以及根据显示字数多少设置宽度：

/**
	 * 设置侧滑数据
	 */
	private void setSlideMenu() {
		// 包含TextView的LinearLayout

		int two_width = 60;
		int three_width = 90;
		int four_width = 104;

		if ((Integer.parseInt(DeviceInfoUtils.getWidth(activity)) * Integer.parseInt(DeviceInfoUtils
				.getHeight(activity))) >= 1080 * 1720) {
			two_width = 120;
			three_width = 180;
			four_width = 200;

		} else if ((Integer.parseInt(DeviceInfoUtils.getWidth(activity)) * Integer.parseInt(DeviceInfoUtils
				.getHeight(activity))) > 600 * 1280) {
			two_width = 90;
			three_width = 135;
			four_width = 156;

		} else if ((Integer.parseInt(DeviceInfoUtils.getWidth(activity)) * Integer.parseInt(DeviceInfoUtils
				.getHeight(activity))) == 640 * 960) {

			two_width = 80;
			three_width = 125;
			four_width = 135;

		} else {
			two_width = 60;
			three_width = 90;
			four_width = 100;
		}

		// 参数设置
		LinearLayout.LayoutParams menuLinerLayoutParames = new LinearLayout.LayoutParams(four_width,
				LinearLayout.LayoutParams.MATCH_PARENT);
		menuLinerLayoutParames.gravity = Gravity.CENTER;
		menuLinerLayoutParames.leftMargin = 5;
		menuLinerLayoutParames.rightMargin = 5;

		LinearLayout.LayoutParams menuLinerLayoutParames1 = new LinearLayout.LayoutParams(two_width,
				LinearLayout.LayoutParams.MATCH_PARENT);
		menuLinerLayoutParames1.gravity = Gravity.CENTER;
		menuLinerLayoutParames1.leftMargin = 5;
		menuLinerLayoutParames1.rightMargin = 5;

		LinearLayout.LayoutParams menuLinerLayoutParames3 = new LinearLayout.LayoutParams(three_width,
				LinearLayout.LayoutParams.MATCH_PARENT);
		menuLinerLayoutParames3.gravity = Gravity.CENTER;
		menuLinerLayoutParames3.leftMargin = 5;
		menuLinerLayoutParames3.rightMargin = 5;

		// 添加TextView控件
		for (int i = 0; i < listChannelMenu.size(); i++) {
			TextView tvMenu = new TextView(activity);
			tvMenu.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
					LinearLayout.LayoutParams.MATCH_PARENT));
			tvMenu.setText(listChannelMenu.get(i).getChannelTypeName());
			tvMenu.setGravity(Gravity.CENTER);
			tvMenu.setTypeface(Typeface.SERIF);
			tvMenu.setTextSize(15);
			// tvMenu.setBackgroundResource(R.drawable.selector_bt_channel);

			tvMenu.setBackgroundDrawable((BookstoreActivity.context).getResources().getDrawable(
					R.drawable.selector_bt_channel));

			tvMenu.setOnClickListener(this);

			if (tvMenu.getText().toString().trim().length() == 2) {
				linearLayout_menu.addView(tvMenu, menuLinerLayoutParames1);
			} else if (tvMenu.getText().toString().trim().length() == 3) {
				linearLayout_menu.addView(tvMenu, menuLinerLayoutParames3);
			} else {
				linearLayout_menu.addView(tvMenu, menuLinerLayoutParames);
			}

			// 当点击上面的导航菜单时下方的控件的内容
			tvMenu.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					if (v.isClickable()) {
						TextView textMenu = (TextView) v;

						for (int i = 0; i < listChannelMenu.size(); i++) {
							if (textMenu.getText().toString().trim()
									.equals(listChannelMenu.get  (i).getChannelTypeName())) {
								// 选中菜单栏的菜单
								setSelectedState(i);
								// 点击菜单时改变内容
								viewpager_featured.setCurrentItem(i);
							}
						}
					}
				}
			});

		}

		viewPagerAdapter.addItem(listChannelMenu, true);

	}


根据屏幕大小动态计算了，textview按钮的属性。并且设置了点击监听，根据tab的数量给adapter绑定数据。

设置适配器：

                           setSlideMenu();
			TextView mTextView = (TextView) linearLayout_menu.getChildAt(0);
			mTextView.setSelected(true);

			viewpager_featured.setAdapter(viewPagerAdapter);// 设置ViewPager的适配器
			viewpager_featured.setCurrentItem(0);


这样点击tab，ViewPaper可以自动切换了，那滑动ViewPapert，tab调整显示位置实现：

	viewpager_featured.setOnPageChangeListener(new OnPageChangeListener() {

			@SuppressLint("NewApi")
			@Override
			public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
				// if (blnFlag) {
				getMenuXPosition();
			}

			@Override
			public void onPageSelected(int position) {

				if (listMenuPosition == null || listMenuPosition.size() <= 0) {
					getMenuXPosition();
				}

				int moveLeft = (int) listMenuPosition.get(position) - (int) listMenuPosition.get(1);
				hScroll_menu.smoothScrollTo(moveLeft, 0);

				setSelectedState(position);

			}

			@Override
			public void onPageScrollStateChanged(int state) {

			}
		});
/**
	 * 存放菜单栏的位置
	 */
	private List<Integer> listMenuPosition;
	private void getMenuXPosition() {

		for (int i = 0; i < linearLayout_menu.getChildCount(); i++) {
			TextView textView = (TextView) linearLayout_menu.getChildAt(i);
			listMenuPosition.add(textView.getLeft());
		}

	}


是通过记录每个textview的左侧位置，每次滑动的时候都都让scrollview滑动一定位置，保证焦点textview 的tab可见。最后给出布局文件：

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/bookstore_featured_menu_height"
        android:orientation="horizontal" >

        <HorizontalScrollView
            android:id="@+id/scrollview_menu"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scrollbars="none" >

            <LinearLayout
                android:id="@+id/linearLayout_menu"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:background="@drawable/bookstore_featured_navigation_bg"
                android:gravity="center_vertical"
                android:orientation="horizontal" >
            </LinearLayout>
        </HorizontalScrollView>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/relativelayout_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_featured_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </android.support.v4.view.ViewPager>

        <ProgressBar
            android:id="@+id/progressBar_loading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>

和ViewPaper配合实现tab的方式有很多，关键根据需求不同来选择实现方式，textview、button、radiobutton、iamgeview都可以用来实现tab。

 


 

张向学
关注
  • 6
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
专栏目录
Android--FragmentTabHost+ViewPager+Fragment实现底部tab菜单栏
超宇的博客
01-08 2664
activity_main.xml <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tool
FragmentTabHost+Fragment+ViewPager（选中当前页面加载布局。）
04-19
绝对物有所值。所以大都会用到ViewPager+Fragment，但是Fragment有个不好或者太好的地方。例如你在ViewPager中添加了三个Fragment，当加载ViewPager中第一个Fragment时，它会默认帮你预先加载了第二个Fragment，当你加载第二个Fragment时，它会帮你加载第三个Fragment。这样虽然有时很好，但是用户只需看一个Fragment时，我们就做了一些多余工作加载了第二个Fragment。在这只需要取消Fragment的预加载即可，只有当用户切换到某个Fragment才加载..
Carson带你学Android：手把手教你优雅实现首页-底部Tab导航(菜单栏)
热门推荐
Carson带你学Android
05-30 1万+
前言Android开发中使用底部菜单栏的频次非常高，这篇文章主要讲解的是用FragmentTabHost+ViewPager+Fragment实现首页底部Tab菜单栏
FragmentTabHost嵌套ViewPager，Fragment第二次点击不显示的问题
传臣、的博客
05-11 860
FragmentTabHost嵌套ViewPager，Fragment第二次点击不显示的主要原因是第二次加载的时候重复调用了onCreateView()这个方法，问题的解决方法就是在onCreateView()方法里面加入以下代码if (view != null) { ViewGroup parent = (ViewGroup) view.getParent();
Android FragmentTabHost嵌套（ViewPager+Fragment）问题
Meyu
05-11 1486
昨天就开始在困惑一个问题，那就是FragmentTabHost嵌套（ViewPager+Fragment）后，通FragmentTabHost切换到含有（ViewPager+Fragment）的fragment的时候，第一次会正常的显示界面，而切换带其他的tab fragment在切回来，viewpage里面的fragment就没有显示界面了如图：  图片标记的不是很好，大概的意思就是Fragm
Android 多层嵌套后的 Fragment 懒加载实现示例
08-27
2. 多层ViewPager嵌套的懒加载： 当Fragment嵌套在多层ViewPager中，情况会变得更复杂。在这种情况下，我们不仅需要关注上述的生命周期方法，还需要处理Fragment之间的交互和状态传递。可以通过自定义`...
ViewPager结合Fragment实现Tab页面切换以及ViewPager实现Banner图循环
09-29
总体的架构是ViewPager结合Fragment实现顶部Tab页切换，在其中一个Fragment实现了ViewPager的Banner图。
viewpager2 tablayout fragment, tab自定义
05-17
viewpager2 tablayout fragment, tab自定义，嵌套
安卓FragmentTab选项卡相关-DemoFragment中嵌套Viewpager.zip
07-29
Demo_Fragment中嵌套Viewpager.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
使用Tablayout和RadioGroup实现底部导航
05-25
使用Tablayout和RadioGroup两种方式实现底部导航，使用Tablayout实现顶部导航
Android两级导航菜单栏--FragmentTabHost嵌套FragmentTabHost的使用
03-29
Android两级导航菜单栏--FragmentTabHost嵌套FragmentTabHost的使用，http://blog.csdn.net/yalinfendou博客中有详细介绍……
Android最火的Framment实现tabhost效果
05-05
Framment实现tabhost效果
FragmentTabHost动态加载TAB页签实现
09-03
FragmentTabHost动态加载fragment的TAB页签，提高响应速度，类activityhost的另一种实现方式
FragmentTabHost和viewPager实现仿微信主界面
10-22
FragmentTabHost和viewPager实现仿微信主界面,详见博客http://blog.csdn.net/elinavampire/article/details/40374011
tabhost + fragment + viewpager +actionbar
10-09
1、实现tabhost 底部导航拦,并嵌入顶部导航栏,类似于 应用宝的上下导航 2、actionbar 的标签模式,屏幕上部导航 3、新控件NetworkImageView 的使用
FragmentTabHost切换Fragment时避免重复加载UI（ViewPager切换Fragment时也适用）
tasty
10-31 765
使用FragmentTabHost时，Fragment之间切换时每次都会调用onCreateView方法，导致每次Fragment的布局都重绘，无法保持Fragment原有状态。         解决办法：在Fragment onCreateView方法中缓存View（此方法也适用 ViewPager切换Fragment的场景，切换时仍可以保存Fragment的状态） [j
Fragment中嵌套FragmentTabHost出错问题
小俊的专栏
08-12 1472
刚做android也没多长时间，作为一个成长的菜鸟，也要开始记录自己xiangm
Fragment嵌套Fragment实现多tab页面的效果
tasty
10-17 3635
摘要: 看现在很多app都是有像tab页嵌套tab页的效果，本来就是用的Fragment实现的，然后大神指点用TabHost的，但因为Fragment的出现已被代替。    纠结了两天，还是一个帖子让我猛然想起如何实现，帖子地址： http://zhidao.baidu.com/link?url=IiA_kE2VmpJuI6jrIhaLJuLvdFqkXiklh1VOeDU4pmZ
Android之Viewpager结合Fragment使用（一）
qq_39438055的博客
02-05 625
效果图： 加上了位置position后： 一、activity_tab_view_pager.xml：ViewPager用于滑动View <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android...
viewpager+fragment嵌套不显示
最新发布
05-20
如果您在使用ViewPager和Fragment嵌套时出现了无法显示的问题，可以尝试以下几个步骤： 1. 确认Fragment已经被正确添加到ViewPager中。可以在Fragment的onCreateView方法中添加一些测试代码，例如显示一个Toast，来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值