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();
         * Remove selected
         * @param fragmentManager The fragmentManager where the incoming tab is located
        private void lostFoucs(FragmentManager fragmentManager){
            FragmentTransaction transaction= fragmentManager.beginTransaction();
            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){
         * Convert the selected tab
         * @param tab Select the tab
        private void switchTab(Tab tab) {

Used to initialize managerTab and control tab focus conversion

MainActivity's main methods are:

    protected void onCreate(Bundle savedInstanceState) {

        // 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());

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
                // Save status information
            case R.id.tab_contact:
            case R.id.tab_find:
            case R.id.tab_config:

GItHub project

Tags: Android android-studio

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