首页 > 代码库 > Fragment+FragmentTabHost组件实现常见主页面(仿微信新浪)

Fragment+FragmentTabHost组件实现常见主页面(仿微信新浪)

采取的方法是Fragment+FragmentTabHost组件来实现这种常见的app主页面的效果

首先给出main.xml文件

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <FrameLayout 6         android:id="@+id/realtabcontent" 7         android:layout_width="fill_parent" 8         android:layout_height="0dip" 9         android:layout_weight="1"10         android:background="@color/white" />11 12 13     <LinearLayout14         android:layout_width="match_parent"15         android:layout_height="wrap_content"16         android:layout_gravity="bottom"17         android:orientation="vertical">18 19         <View20             android:layout_width="match_parent"21             android:layout_height="1px"22             android:background="@color/color_home_tab_line" />23 24         <android.support.v4.app.FragmentTabHost25             android:id="@android:id/tabhost"26             android:layout_width="fill_parent"27             android:layout_height="wrap_content"28             android:background="@color/et_divider_disable">29 30             <FrameLayout31                 android:id="@android:id/tabcontent"32                 android:layout_width="0dp"33                 android:layout_height="0dp"34                 android:layout_weight="0" />35         </android.support.v4.app.FragmentTabHost>36 37     </LinearLayout>38 </LinearLayout>

主代码:

 1 public class MainActivity 2 {  @ViewInject(android.R.id.tabhost) 3     private FragmentTabHost mTabHost; 4 private LayoutInflater layoutInflater; 5  6 private int mImageViewArray[] = {R.drawable.home_tab1, R.drawable.home_tab2, R.drawable.home_tab3, R.drawable.home_tab4}; 7     private String mTextviewArray[] = {"首页", "圈子", "资讯","个人中心"}; 8     private Class fragmentArray[] = {Fragment1.class, Fragment2.class, Fragment3.class,Fragment4.class}; 9 10  protected void onCreate(Bundle savedInstanceState) {11         super.onCreate(savedInstanceState);12         init();13     }14 15 @Override16     protected void init() {17 //        list=new JSONArray();18         layoutInflater=LayoutInflater.from(this);19         initTabHost();//初始化底部菜单20 }21 22  /**23      * 初始化底部工具栏24      */25     private void initTabHost() {26         mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);27         mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);28         int count = fragmentArray.length;29         for (int i = 0; i < count; i++) {30             TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i])31                     .setIndicator(getTabItemView(i));32             mTabHost.addTab(tabSpec, fragmentArray[i], null);33             mTabHost.getTabWidget().getChildAt(i)34                     .setBackgroundResource(R.color.white);35         }36         mTabHost.setCurrentTabByTag(mTextviewArray[0]);37         mTabHost.getTabWidget().setDividerDrawable(null);38 }39 40   /**41      * 项的样式42      * @param index 第几个43      * @return 每一个Tab样式44      */45     private View getTabItemView(int index) {46         View view = layoutInflater.inflate(R.layout.tab_home_item, null);47         ImageView imageView = (ImageView) view.findViewById(R.id.icon);48         imageView.setImageResource(mImageViewArray[index]);49         TextView textView = (TextView) view.findViewById(R.id.name);50         textView.setText(mTextviewArray[index]);51         return view;52     }53 54 55 56 57 }

就ok啦!

Fragment+FragmentTabHost组件实现常见主页面(仿微信新浪)