底部導航欄-----FragmentTabHost

【說明】

　　1、主界面上添加父容器：FragmentTabHost

　　　　屬於v4兼容包

　　　　需要指定該id為android:id/tabhost,不能修改，表示由android系統來托管這個id。

　　　　本身是一個FrameLayout的子類

　　2、顯示內容區域

　　　　作為每選一個導航按鈕，將顯示導航對應的內容。這個內容區域需要使用一個容器來表示。

　　　　必須設定這個容器的id為android:id/tabcontent

　　3、導航區域　　

　　　　需要指定導航元素——TabWidget

【注意】

　　1、指定id時為android:id/tabhost，綁定時使用android.R.id.tabhost.

　　2、每一個Tab對應的Fragment的會填充到tabcontext上

 

【效果】

 　　

 

 【項目結構】

　　

 

【步驟】

　　①修改activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:id="@android:id/tabhost">

    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
        <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1">

        </FrameLayout>

        <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom">

        </TabWidget>
    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

 

　　②創建main_tab_item.xml底部導航的單個布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  3     xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_weight="1"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:background="@color/blackBg">

    <ImageView 11         android:id="@+id/ivTab"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"
 android:padding="5sp"
 android:scaleType="fitCenter"
 android:src="@mipmap/ic_launcher"
        />
    <TextView 20         android:id="@+id/tvTab"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:textColor="@color/writeTx"
 android:text="聊天"
 android:textSize="12sp"/>

</LinearLayout>

 

　　🌂創建四個Fragment的，並在是個頁面設置不同的標識

　　

　　

　　④放入四張相應圖片待使用 （https://www.iconfont.cn/）

 　　　

 

　　🈚MainActivity.class（核心代碼）

public class MainActivity extends AppCompatActivity {  2 

 @BindView(android.R.id.tabs)  5  TabWidget tabs;  6  @BindView(android.R.id.tabhost)  7  FragmentTabHost tabhost;  8 
    int[] ivTabs; 10  String[] tvTabs; 11 
 @Override 13     protected void onCreate(Bundle savedInstanceState) { 14         super.onCreate(savedInstanceState); 15  setContentView(R.layout.activity_main); 16         ButterKnife.bind(this); 17 
        List<Class> fragmentList = new ArrayList<>(); 19         fragmentList.add(ChatFragment.class); 20         fragmentList.add(ContactFragment.class); 21         fragmentList.add(FindFragment.class); 22         fragmentList.add(MeFragment.class); 23         tabhost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent); 24 
        ivTabs = new int[]{R.drawable.chat,R.drawable.contact,R.drawable.find,R.drawable.me}; 26         tvTabs = new String[]{"聊天","通訊錄","發現","我的"}; 27 
        for (int i = 0; i < 4; i++) { 29             TabHost.TabSpec tabSpec = tabhost.newTabSpec(i + "").setIndicator(getIndicatorView(i)); 30             tabhost.addTab(tabSpec,fragmentList.get(i),null); 31  } 32 
        tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { 34  @Override 35             public void onTabChanged(String s) { 36  TabChange(s); 37  } 38  }); 39 
 } 41 
//Tab選擇事件，將選中的Tab布局圖標顯示為綠色
    private void TabChange(String s) { 44         int tabIndex = tabhost.getCurrentTab(); 45         for (int i = 0; i < 4; i++) { 46             View view = tabhost.getTabWidget().getChildAt(i); 47             ImageView ivTab=view.findViewById(R.id.ivTab); 48             TextView tvTab=view.findViewById(R.id.tvTab); 49             if (i==tabIndex){ 50  ivTab.setColorFilter(Color.GREEN); 51  tvTab.setTextColor(Color.GREEN); 52             }else { 53  ivTab.setColorFilter(Color.WHITE); 54  tvTab.setTextColor(Color.WHITE); 55  } 56 
 } 58 
 } 60 
//獲取當前Tab的布局
        private View getIndicatorView(int i) { 63 
        View view = LayoutInflater.from(this).inflate(R.layout.main_tab_item, null, false); 65         ImageView ivTab=view.findViewById(R.id.ivTab); 66         TextView tvTab=view.findViewById(R.id.tvTab); 67 
 ivTab.setImageResource(ivTabs[i]); 69  tvTab.setText(tvTabs[i]); 70         if (i==0){ 71  ivTab.setColorFilter(Color.GREEN); 72  tvTab.setTextColor(Color.GREEN); 73  } 74         return view; 75  } 76 
}