Android典型界面設計——FragmentTabHost+Fragment實現底部tab切換

時間 2020-07-10

標籤 android 典型界面設計 fragmenttabhost+fragment fragmenttabhost fragment 實現底部 tab 切換欄目 Android 简体版

原文原文鏈接

1、問題描述

　　在上次博文中，咱們使用RadioGroup+ViewPage+Fragmen實現了頂部滑動導航（查看文章：http://www.cnblogs.com/jerehedu/p/4607599.html#dxjmsj ），接下來咱們使用FragmentTabHost+Fragment實現底部tab切換，效果如圖所示html

2、案例主要組件

一、MainActivity佈局

　　把整個Activity分紅兩部TabHost和TabContent，TabHost包含各個tab，tab之間切換將在TabContent所關聯的FrameLayout區域中顯示各自板塊的內容android

<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <FrameLayout  android:id="@+id/contentLayout"
         android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"> 
    </FrameLayout>
     <android.support.v4.app.FragmentTabHost
         android:id="@android:id/tabhost"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="#F6F6F6"
         >
         <FrameLayout android:id="@android:id/tabcontent"
             android:layout_height="0dp" android:layout_width="0dp"
             />
     </android.support.v4.app.FragmentTabHost>
</LinearLayout>

二、MainActivity代碼

public class MainActivity extends FragmentActivity
 implements OnTabChangeListener{
    private FragmentTabHost tabHost;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabHost=(FragmentTabHost)super.findViewById(android.R.id.tabhost);
        tabHost.setup(this,super.getSupportFragmentManager()
                ,R.id.contentLayout);
        tabHost.getTabWidget().setDividerDrawable(null);
        tabHost.setOnTabChangedListener(this);
        initTab();

    }
    private void initTab(){
        String tabs[]=TabDb.getTabsTxt();
        for(int i=0;i<tabs.length;i++){
            TabSpec tabSpec=tabHost.newTabSpec(tabs[i]).setIndicator(getTabView(i));
            tabHost.addTab(tabSpec,TabDb.getFragments()[i],null);
            tabHost.setTag(i);
        }
    }
    private View getTabView(int idx){
        View view=LayoutInflater.from(this).inflate(R.layout.footer_tabs,null);
        ((TextView)view.findViewById(R.id.tvTab)).setText(TabDb.getTabsTxt()[idx]);
        if(idx==0){
            ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);
    ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImgLight()[idx]);
        }else{
            ((ImageView)view.findViewById(R.id.ivImg)).setImageResource(TabDb.getTabsImg()[idx]);
        }
        return view;
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    @Override
    public void onTabChanged(String tabId) {
        // TODO Auto-generated method stub
        updateTab();
    }
    private void updateTab(){
        TabWidget tabw=tabHost.getTabWidget();
        for(int i=0;i<tabw.getChildCount();i++){
            View view=tabw.getChildAt(i);
            ImageView iv=(ImageView)view.findViewById(R.id.ivImg);
            if(i==tabHost.getCurrentTab()){
                ((TextView)view.findViewById(R.id.tvTab)).setTextColor(Color.RED);
                iv.setImageResource(TabDb.getTabsImgLight()[i]);
            }else{        ((TextView)view.findViewById(R.id.tvTab)).setTextColor(getResources().getColor(R.color.foot_txt_gray));
                iv.setImageResource(TabDb.getTabsImg()[i]);
            }
            
        }
    }

}

三、TabDb組件

提供界面設計所需的tab文本、tab圖片和Fragment類型數據web

public class TabDb {
    public static String[] getTabsTxt(){
        String[] tabs={"新聞","閱讀","試聽","發現"," 我"};
        return tabs;
    }
    public static int[] getTabsImg(){
        int[] ids={R.drawable.foot_news_normal,R.drawable.foot_read_normal,R.drawable.foot_vdio_normal,R.drawable.foot_fond_normal,R.drawable.foot_out_normal};
        return ids;
    }
    public static int[] getTabsImgLight(){
        int[] ids={R.drawable.foot_news_light,R.drawable.foot_read_light,R.drawable.foot_vdio_light,R.drawable.foot_found_light,R.drawable.foot_out_light};
        return ids;
    }
    public static Class[] getFragments(){
        Class[] clz={NewsFragment.class,ReadFragment.class,VideoFragment.class,FoundFragment.class,OwnerFragment.class};
        return clz;
    }
}

四、每一個tab各自對應的Fragment組件

　　共5個Fragment爲NewsFragment、ReadFragment、FoundFragment、OwnerFragment、VideoFragment,根據不一樣板塊各自設計界面，這裏重點是如何實現底部tab切換，簡單佈局一下便可，以NewsFragment爲例代碼以下：app

public class NewsFragment extends Fragment {
    @Override
    public void onAttach(Activity activity) {
        // TODO Auto-generated method stub
        super.onAttach(activity);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        TextView tvTitle=new TextView(super.getActivity());
        tvTitle.setText("新聞");
        tvTitle.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
        tvTitle.setGravity(Gravity.CENTER);
        tvTitle.setTextSize(30);
        return tvTitle;
    }
    @Override
    public void setArguments(Bundle args) {
        // TODO Auto-generated method stub
        super.setArguments(args);
    }

}

五、tab佈局樣式（footer_tabs.xml）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    android:gravity="center"
    android:padding="5dp"
    android:background="#F6F6F6"
    >
    <ImageView
        android:id="@+id/ivImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
       />
    <TextView
        android:id="@+id/tvTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/ivImg"
          android:textColor="#AEAEAE"
        android:text="新聞" android:layout_marginTop="2dp"/>