Implementation idea:

1. Interface design
2. Code logic design
3. Interaction design between user and interface

Interface design

The interface is mainly divided into three areas

1. Top area
   Display title
2. Content area
   Display content
3. Label bar area
   Content switching ID

Top area

The top area only needs to set a textView control
Layout settings:

Layout using ConstraintLayout
Fix the anchors in the upper, left and right directions at the layout boundary
layout_ Set width to match_parent,layout_height can set the appropriate height by itself

Content area

Set up four interfaces
Each interface is the content to be displayed
A textView is set for each interface to display the effect

Bottom area

Create a horizontal linear layout
Layout settings:

The left and right anchors on the horizontal layout are fixed at the boundary of the parent layout, with gravity set to center and width set to match_parent and height can be set appropriately

Create four vertical linear sublayouts in a horizontal layout
Layout settings:

gravity is set to center and height and width are set to match_parent
At this time, pay attention to setting layout_ Weight (all 1 equally divided space), otherwise all space will be occupied by the first child control

Add imageView and textView to each vertical layout

imageView selects a color changeable VecotrImage
textView content customization

Integrate three regions

Add the above three areas to MainActivity.xml
Add FragmentLayout to the content area
The top and bottom areas are imported using include

Code design

Build class

Tab class

Tab class integrates the controls that generate behavior during page switching and uniformly deploys them. Its members are as follows:

private static class Tab{
        private Fragment fragment;
        private LinearLayout linearLayout;
        private TextView textView;
        private ImageView imageView;
        private int getFocusedColor;
        private int lostFocusedColor;
        ···
}

• fragment
  Content body container (binding presentation content to tags)
• linerLayout
  Get the selected tab event
• textView
  tab text
• imageView
  tab Icon
• getFocusColor
  Color when tab is selected
• lostFocusColor
  Remove selected color (default color)

ManagerTab class

Used to control deployment tab behavior

    private static class ManagerTab{
        private FragmentManager fragmentManager;
        private int content;
        private List<Tab> tablist;
        private Tab currentTab;
        ···
}

• fragmentManger
  Content regulation
• content
  Container ID (container used to display fragment)
• tabList
  Tab set (unified control tab)
• currentTab
  Currently selected tab

MainActiviy class

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Tab message,contact,find,config;
    private ManagerTab managerTab;

    private int currentID;
	···
}

• Tab *
  Four tab objects for fragment content
• managerTab
  tab Manager
• currentID
  ID of the currently selected tab's linearLayout

Implement control logic

The main methods in Tab are:

        /**
         * checked 
         * @param fragmentManager The fragmentManager where the incoming tab is located
         */
        private void getFocused(FragmentManager fragmentManager){
            FragmentTransaction transaction= fragmentManager.beginTransaction();
            transaction.show(fragment);
            transaction.commit();
            switchColor(getFocusedColor);
        }
        
       /**
         * Remove selected
         * @param fragmentManager The fragmentManager where the incoming tab is located
         */
        private void lostFoucs(FragmentManager fragmentManager){
            FragmentTransaction transaction= fragmentManager.beginTransaction();
            transaction.hide(fragment);
            transaction.commit();
            switchColor (lostFocusedColor);
        }

Used to control the tab to get or lose the selection

The main methods of ManagerTab are:

        /**
         * Initialize manager < br / >
         * Must be called, otherwise the manager will not work
         */
        private void initManagerTab() {
            FragmentTransaction transaction=fragmentManager.beginTransaction();
            for(Tab tab:tablist){
                transaction.add(content,tab.fragment);
            }
            transaction.commit();
            hideAllTab();
            showTab(tablist.get(0));
        }
        /**
         * Convert the selected tab
         * @param tab Select the tab
         */
        private void switchTab(Tab tab) {
            currentTab.lostFoucs(fragmentManager);
            tab.getFocused(fragmentManager);
            currentTab=tab;
        }

Used to initialize managerTab and control tab focus conversion

MainActivity's main methods are:

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Construct tab object
        message =new Tab(new fragment_message() ,findViewById(R.id.tab_message),findViewById(R.id.txt_tab_message) ,findViewById(R.id.icon_message),R.color.selected,R.color.common);
        contact =new Tab(new fragment_contact() ,findViewById(R.id.tab_contact),findViewById(R.id.txt_tab_contact) ,findViewById(R.id.icon_contact),R.color.selected,R.color.common);
        find    =new Tab(new fragment_find()    ,findViewById(R.id.tab_find)   ,findViewById(R.id.txt_tab_find)    ,findViewById(R.id.icon_find)   ,R.color.selected,R.color.common);
        config  =new Tab(new fragment_config()  ,findViewById(R.id.tab_config) ,findViewById(R.id.txt_tab_config)  ,findViewById(R.id.icon_config) ,R.color.selected,R.color.common);

        // Monitor tab (essentially monitor the linerlayout of tab)
        message .linearLayout.setOnClickListener(this);
        contact .linearLayout.setOnClickListener(this);
        find    .linearLayout.setOnClickListener(this);
        config  .linearLayout.setOnClickListener(this);

        // Initialize tab Manager
        managerTab =new ManagerTab(R.id.content, Arrays.asList(message,contact,find,config),getSupportFragmentManager());
        managerTab.initManagerTab();
    }

Used to initialize tab and managerTab

User interface interaction

Monitoring is used as the interface for real-time interaction between the user and the interface

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
	···
    public void onClick(View view) {
        // Throw away redundant events
        if(view.getId()==currentID) return;
        switch (view.getId()){
            case R.id.tab_message:
            	// Conversion tab
                managerTab.switchTab(message);
                // Save status information
                currentID=R.id.tab_message;
                break;
            case R.id.tab_contact:
                managerTab.switchTab(contact);
                currentID=R.id.tab_contact;
                break;
            case R.id.tab_find:
                managerTab.switchTab(find);
                currentID=R.id.tab_find;
                break;
            case R.id.tab_config:
                managerTab.switchTab(config);
                currentID=R.id.tab_config;
                break;
        }
    }
    ···
}

GItHub project