首页 > 代码库 > 如何在Fragment中使用tabhost

如何在Fragment中使用tabhost

   最近在做一个仿电商的APP,由于前面使用了Fragment技术,现在想要在一个Fragment中做出TabHost的界面效果,经过查找资料找到了解决办法,特分享出来!(新人勿喷!)


首先要使用的控件是Support V4里面的控件,XML如图

<android.support.v4.app.FragmentTabHost
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/action_fun" >

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

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:orientation="horizontal" >
            </TabWidget>
            <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" 
            android:layout_weight="1" >

            <ImageView
            android:id="@+id/img_scrollbar_fun"
            android:layout_width="match_parent"
            android:layout_height="4dp"
            android:layout_weight="2"
            android:scaleType="fitXY"
            android:src="http://www.mamicode.com/@drawable/scrollbar" />

            <View
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" />
            </LinearLayout>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_weight="0" />

            <FrameLayout
                android:id="@+id/realtabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />
        </LinearLayout>
    </android.support.v4.app.FragmentTabHost>

这个XML是从Support V4中找的控件,多出来的是自定义的动态滚动条。

下面是具体的代码实现,如下

public class FUNFragment extends Fragment implements  OnTabChangeListener {

	public FUNFragment() {
		// Required empty public constructor
	}
	private FragmentTabHost mTabHost_fun;
	private String[] fun_tabs = new String[] { "推荐", "标签","关注"};
	private ImageView mImgScrollbar_fun;
	private float lastoffset_fun;
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View layout = inflater.inflate(R.layout.fragment_fun, container, false);
		mImgScrollbar_fun = (ImageView) layout.findViewById(R.id.img_scrollbar_fun);
		initActionBar();
//		initTabFragment();
		initTabHost(layout);
		return layout;
	}

	private void initActionBar() {
		FragmentManager fm = getChildFragmentManager();
		FragmentTransaction ft = fm.beginTransaction();
		ActionFragment actionFragment = new ActionFragment();
		ft.add(R.id.action_fun, actionFragment);
		actionFragment.setActionName("FUN");
		ft.commit();
	}
	//初始化FragmentTabHost
	public void initTabHost(View layout) {
		mTabHost_fun = (FragmentTabHost)layout.findViewById(android.R.id.tabhost);
		mTabHost_fun.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent);
		mTabHost_fun.setOnTabChangedListener(this);
		for (int i = 0; i < fun_tabs.length; i++) {
			View view = getActivity().getLayoutInflater().inflate(
					R.layout.fun_tabhost_item, null);
			TextView mTextView = (TextView) view.findViewById(R.id.tv_fun_tab);
			mTextView.setText(fun_tabs[i]);
			mTabHost_fun.addTab(mTabHost_fun.newTabSpec("tag" + i).setIndicator(view),
	                RecFragment.class, null);
            
		}
	}

	@Override
	public void onTabChanged(String tabId) {
		int position = mTabHost_fun.getCurrentTab();
		//设置滚动动画条
	    setScrollAnimation(position);
	}
	//设置
	private void setScrollAnimation(int position) {
		//获取屏幕的宽度
		WindowManager mWindowManager = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
		Display display = mWindowManager.getDefaultDisplay();
		@SuppressWarnings("deprecation")
		int width = display.getWidth();
		//获取滚动条的偏移量
		int offset = width/fun_tabs.length;
		//使用开源项目nineold设置滚动动画
		ObjectAnimator ofFloat = ObjectAnimator.ofFloat(mImgScrollbar_fun, "translationX", lastoffset_fun, position*offset);
		
		ofFloat.setInterpolator(new DecelerateInterpolator());
		ofFloat.setDuration(500).start();
		//前一次偏移的位置
		lastoffset_fun = position*offset;
	}


	
}

将此记录下来,也是为自己学习Android做个留念。希望对刚学习Android的朋友有点帮助。

本文出自 “Android=phone+tv+....” 博客,请务必保留此出处http://wangwn.blog.51cto.com/8305590/1431390