Implementation idea:
- Interface design
- Code logic design
- Interaction design between user and interface
Interface design
The interface is mainly divided into three areas
- Top area
Display title - Content area
Display content - 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; } } ··· }