WeChat v0.01 - frame implementation of main interface

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

Tags: Android android-studio

Posted on Sat, 09 Oct 2021 02:12:40 -0400 by Ali_baba