底部导航栏-----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 
}