Fragment嵌套Fragment实现多tab页面的效果

纠结了两天,还是一个帖子让我猛然想起如何实现,帖子地址:

http://zhidao.baidu.com/link?url=IiA_kE2VmpJuI6jrIhaLJuLvdFqkXiklh1VOeDU4pmZ24iO5ipNWudBeU7IIcghO6tn7wfmf0nuCs9Fvy3BV4Zf6I7SEzz90dsok2bUxZF_

效果图:

          

图片的测试布局用了俩张图片

如果说代码底部菜单代码已经实现的话,那就好整了,直接把已经实现的代码拷一份只需要把内页里面的getSupportFragmentManager()换成用getChildFragmentManager(),这样就不用担心子页也继承FragmentActivity问题了,这样直接继承Fragment就可以了

这里我就上子页面切换的代码吧,因为主页里面差不多就是getSupportFragmentManager()

这个是底部菜单的首页显示的布局

public class HomeMainFragment extends Fragment implements OnClickListener{
	private View view;
	private ViewPager mPaper;
	private FragmentPagerAdapter mAdapter;
	private List<Fragment> mFragments = new ArrayList<Fragment>();
	private TextView tv_footable,tv_midfield,tv_forward,tv_guard;

	private Display display;
	private int itemWidth;
	private VideoAdapter videoAdapter_hot,videoAdapter_new;
	private GridView gridView_newVideo,gridView_hotVideo;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		view = inflater.inflate(R.layout.activity_home_main, container,false);

		initLayout();	

		mAdapter = new FragmentPagerAdapter(getChildFragmentManager()) {

			@Override
			public int getCount() {
				return mFragments.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				return mFragments.get(arg0);
			}
		};
		mPaper.setAdapter(mAdapter);
		mPaper.setOnPageChangeListener(new OnPageChangeListener() {

			private int currentIndex;

			@Override
			public void onPageSelected(int position) {
				resetColor();
				switch (position) {
				case 0:
					tv_footable.setTextColor(Color.rgb(87,153,8));
					break;
				case 1:
					tv_midfield.setTextColor(Color.rgb(87,153,8));
					break;
				case 2:
					tv_forward.setTextColor(Color.rgb(87,153,8));

					break;
				case 3:
					tv_guard.setTextColor(Color.rgb(87,153,8));
					break;
				default:
					tv_footable.setTextColor(Color.rgb(87,153,8));
					break;
				}
				currentIndex = position;
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {

			}
		});
		return view;
	}

	/**
	 * 初始化控件
	 */
	public void initLayout(){
		tv_footable = (TextView)view.findViewById(R.id.tv_youngfootable);
		tv_midfield = (TextView)view.findViewById(R.id.tv_midfield);
		tv_forward = (TextView)view.findViewById(R.id.tv_forward);
		tv_guard = (TextView)view.findViewById(R.id.tv_guard);

		mPaper = (ViewPager)view.findViewById(R.id.view_pager);

		tv_footable.setOnClickListener(this);
		tv_midfield.setOnClickListener(this);
		tv_forward.setOnClickListener(this);
		tv_guard.setOnClickListener(this);

		FragmentPage1 f1 = new FragmentPage1();
    	        FragmentPage2 f2 = new FragmentPage2();
    	        FragmentPage3 f3 = new FragmentPage3();
    	        FragmentPage4 f4 = new FragmentPage4();
    
    	        mFragments.add(f1);
    	        mFragments.add(f2);
    	        mFragments.add(f3);
    	        mFragments.add(f4);
	}

	public void resetColor(){
		tv_footable.setTextColor(Color.rgb(56,56,56));
		tv_midfield.setTextColor(Color.rgb(56,56,56));
		tv_forward.setTextColor(Color.rgb(56,56,56));
		tv_guard.setTextColor(Color.rgb(56,56,56));
	}
	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.tv_youngfootable:
			resetColor();
			tv_footable.setTextColor(Color.rgb(87,153,8));
			mPaper.setCurrentItem(0);
			break;
		case R.id.tv_midfield:
			resetColor();
			tv_midfield.setTextColor(Color.rgb(87,153,8));
			mPaper.setCurrentItem(1);
			break;
		case R.id.tv_forward:
			resetColor();
			tv_forward.setTextColor(Color.rgb(87,153,8));
			mPaper.setCurrentItem(2);
			break;
		case R.id.tv_guard:
			resetColor();
			tv_guard.setTextColor(Color.rgb(87,153,8));
			mPaper.setCurrentItem(3);
			break;

		default:
			break;
		}
	}
	/**
     * ViewPager适配器
    */ 
    public class MyPagerAdapter extends PagerAdapter { 
        public List<Activity> mListViews; 
 
        public MyPagerAdapter(List<Activity> mListViews) { 
            this.mListViews = mListViews; 
        } 
 
       
        @Override 
        public void finishUpdate(View arg0) { 
        } 
 
        @Override 
        public int getCount() { 
            return mListViews.size(); 
        } 
 
      
 
        @Override 
        public boolean isViewFromObject(View arg0, Object arg1) { 
            return arg0 == (arg1); 
        } 
 
        @Override 
        public void restoreState(Parcelable arg0, ClassLoader arg1) { 
        } 
 
        @Override 
        public Parcelable saveState() { 
            return null; 
        } 
 
        @Override 
        public void startUpdate(View arg0) { 
        } 
    } 
}

下面对应的布局代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ScrollView
        android:id="@+id/MySearchScroll"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <RelativeLayout
            android:id="@+id/linear_all"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/linear_top"
                android:layout_width="match_parent"
                android:layout_height="58dp"
                android:background="@drawable/pic_back_logo"
                android:gravity="center"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/text1"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1.0"
                    android:gravity="center"
                    android:text="LOGO"
                    android:textColor="#000000"
                    android:textSize="30dip" />
                <!--
                     <ImageView
                    android:id="@+id/iv_logo"
                    android:layout_width="wrap_content"
                    android:layout_height="65dp"
                    android:layout_marginBottom="12dp"
                    android:layout_marginTop="12dp"
                    android:src="@drawable/logo" />
                -->
            </LinearLayout>

            <LinearLayout
                android:id="@+id/category_layout"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/linear_top"
                android:background="#FFFFFF"
                android:orientation="vertical" >

                <LinearLayout
                    android:id="@+id/linearLayout1"
                    android:layout_width="fill_parent"
                    android:layout_height="50.0dip"
                    android:background="#FFFFFF" >

                    <TextView
                        android:id="@+id/tv_youngfootable"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:gravity="center"
                        android:text="青年足球"
                        android:textColor="#579908"
                        android:textSize="15.0dip" />

                    <TextView
                        android:id="@+id/tv_midfield"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:gravity="center"
                        android:text="中场"
                        android:textColor="#000000"
                        android:textSize="15.0dip" />

                    <TextView
                        android:id="@+id/tv_forward"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:gravity="center"
                        android:text="前锋"
                        android:textColor="#000000"
                        android:textSize="15.0dip" />

                    <TextView
                        android:id="@+id/tv_guard"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:layout_weight="1.0"
                        android:gravity="center"
                        android:text="后卫"
                        android:textColor="#000000"
                        android:textSize="15.0dip" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linear_bg"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:background="@drawable/pic_bottom_xian"
                    android:orientation="vertical" >
                </LinearLayout>
            </LinearLayout>       
            <android.support.v4.view.ViewPager
		        android:id="@+id/view_pager"
		        android:layout_width="fill_parent"
		        android:layout_height="500dp"
		        android:layout_below="@+id/category_layout" />

        </RelativeLayout>
    </ScrollView>
</LinearLayout>

然后那个主布局页面引用了四个Fragment页,分别是FragmentPage1~FragmentPage4

这里就贴一个的代码,哈哈,偷下懒

public class FragmentPage1 extends Fragment{

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		return inflater.inflate(R.layout.fragment_1, null);
	}
}

然后是布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/pic_01" >
    </ImageView>

</LinearLayout>

写这篇博客的目的就是想说明嵌套的时候注意FragmentManager的管理调用,子布局的主布局里面要写成getChildFragmentManager(),希望能帮到你吧~

时间: 2024-09-29 04:59:56

Fragment嵌套Fragment实现多tab页面的效果的相关文章

Android fragment嵌套fragment问题解决方案

都说fragment好用,duang~~,又遇到问题了,记录一下,分享给遇到这个问题的同学! 1.fragment嵌套fragment时出现getActivity()为null activity A嵌套fragment B,B嵌套fragment C,C跳转到activity D,当activity D被finish掉之后,C中容易爆出getActivity为空.如果你的activity被回收了,那你需要在bundle中保存一下fragment信息,我的解决方法:fragment实例化之后会到a

Fragment嵌套Fragment要用getChildFragmentManager

Fragment嵌套Fragment要用getChildFragmentManager. 遇到一个问题,Fragment放ViewPager,ViewPager里面是fragment.第一次进入没问题,再次进入ViewPager的fragment时里面内容就没了,数据丢失. 用的FragmentPagerAdapter.打Log发现FragmentPagerAdapter的getItem也不会调用,一直找不出原因.翻网上的回复终于找到答案. 本来里面的fragment用的还是getFragmen

[Jquery]tab页面切换效果

思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个,中间每个内容都会相继显示出来.比较好的用户体验是,从某个标签迅速移到另一个标签,中间不想看的内容不显示出来.这就需要延迟切换效果(每次划每次加载信息,必将影响性能) 使用定时器:setTimeout(500毫秒),每次鼠标滑过的时候,先判断定时器存不存在,存在的话先清除定时器,然后开启定时器,执行

用Fragment实现Tab页面切换效果初步总结

前言: 最近在Android项目中需要在活动中实现多页面切换的功能,第一次是实现的过程中,是让Activity同时去加载三个界面的,通过点击tab按钮对页面设置隐藏和显示,实现页面切换效果,但是后面发现这种实现方式其实存在很多问题: 首先,同时去加载三个页面,切换Activity的速度会变慢,尤其是布局中如果有很多ImageView,ImageButton等使用到图片资源的控件时,切换效果非常不好: 其次,由于使用了很多图片资源,在退出Activity的时候,像Drawable,Bitmap等一

Fragment嵌套ViewPager切换后数据消失ViewPager空白问题

先描述一下现象 如图 解决后如图 之前先在网上找了很多的解决办法,有的网友说要继承FragmentStatePagerAdapter替换掉FragmentPagerAdapter我试了试没管用.后来在解决如下 此方法为初始化ViewPager private void init() { fragmentsList = new ArrayList(); manager = getFragmentManager(); fragmentsList = new ArrayList<Fragment>(

Fragment嵌套

当我们从一个Activity启动了一个Fragment,然后在这个Fragment中又去实例化了一些子Fragment,在子Fragment中去有返回的启动了另外一个Activity,即通过startActivityForResult方式去启动,这时候造成的现象会是,子Fragment接收不到OnActivityResult,如果在子Fragment中是以getActivity.startActivityForResult方式启动,那么只有Activity会接收到OnActivityResult

浅谈Android Fragment嵌套使用存在的一些BUG以及解决方法

自从Android3.0引入了Fragment之后,使用Activity去嵌套一些Fragment的做法也变得更加流行,这确实是Fragment带来的一些优点,比如说:Fragment可以使你能够将activity分离成多个可重用的组件,每个都有它自己的生命周期和UI,更重要的是Fragment解决了Activity间的切换不流畅,实现了一种轻量及的切换,但是在官方提供的android.support.v4包中,Fragment还是或多或少的存在一些BUG,今天就与大家分享一下这些BUG和解决方

Fragment嵌套使用存在的一些BUG以及解决方法

Case 1:当使用Fragment去嵌套另外一些子Fragment的时候,我们需要去管理子Fragment,这时候需要调用ChildFragmentManager去管理这些子Fragment,由此可能产生的Exception主要是: java.lang.IllegalStateException: No activity 首先我们来分析一下Exception出现的原因: 通过DEBUG发现,当第一次从一个Activity启动Fragment,然后再去启动子Fragment的时候,存在指向Act

【FastDev4Android框架开发】HorizontalScrollView,Fragment,FragmentStatePagerAdapter打造网易新闻Tab及滑动页面效果(三十六)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50145759 本文出自:[江清清的博客] (一).前言: 仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现.要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现,不过查看了源码发现