Bottom navigation bar ----- FragmentTabHost

[explanation]

1. Add parent container on the main interface: FragmentTabHost

Belongs to v4 compatible package
You need to specify the id as android:id/tabhost, which cannot be modified. It means that the android system will host the id.
Itself is a subclass of FrameLayout

2. Display content area

As each navigation button is selected, the content corresponding to the navigation will be displayed. This content area needs to be represented by a container.
You must set the id of this container as android:id/tabcontent

3. Navigation area

Navigation element needs to be specified -- TabWidget

[notice]

1. android:id/tabhost when specifying ID, and android.R.id.tabhost when binding

2. The Fragment corresponding to each Tab will be filled in the tabcontext

 

[effect]

   

 

 

[steps]

① modify 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>

 

② create a single layout for the bottom navigation of main tab item.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="match_parent"
 5     android:layout_weight="1"
 6     android:layout_height="wrap_content"
 7     android:orientation="vertical"
 8     android:background="@color/blackBg">
 9 
10     <ImageView
11         android:id="@+id/ivTab"
12         android:layout_width="40dp"
13         android:layout_height="40dp"
14         android:layout_gravity="center"
15         android:padding="5sp"
16         android:scaleType="fitCenter"
17         android:src="@mipmap/ic_launcher"
18         />
19     <TextView
20         android:id="@+id/tvTab"
21         android:layout_width="match_parent"
22         android:layout_height="wrap_content"
23         android:gravity="center"
24         android:textColor="@color/writeTx"
25         android:text="chat"
26         android:textSize="12sp"/>
27 
28 </LinearLayout>

 

🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂🌂

  

  

④ put in four corresponding pictures for use( https://www.iconfont.cn/)

    

 

🈚 MainActivity.class (core code)

 1 public class MainActivity extends AppCompatActivity {
 2 
 3 
 4     @BindView(android.R.id.tabs)
 5     TabWidget tabs;
 6     @BindView(android.R.id.tabhost)
 7     FragmentTabHost tabhost;
 8 
 9     int[] ivTabs;
10     String[] tvTabs;
11 
12     @Override
13     protected void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         setContentView(R.layout.activity_main);
16         ButterKnife.bind(this);
17 
18         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 
25         ivTabs = new int[]{R.drawable.chat,R.drawable.contact,R.drawable.find,R.drawable.me};
26         tvTabs = new String[]{"chat","Mail list","find","My"};
27 
28         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 
33         tabhost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
34             @Override
35             public void onTabChanged(String s) {
36                 TabChange(s);
37             }
38         });
39 
40     }
41 
42 //Tab Select an event to select the Tab Layout icon is displayed in green
43     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 
57         }
58 
59     }
60 
61 //Get current Tab Layout
62         private View getIndicatorView(int i) {
63 
64         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 
68         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 
77 }

Tags: Android xml encoding Fragment

Posted on Sun, 01 Dec 2019 13:53:06 -0500 by molave