Does the XUI framework implement its own tablayout (TabBar indicator) + viewpage to switch between pages?

If you don’t know how to join the XUI framework, you can read our blog. The process of joining the XUI framework
is fairly detailed. If you have any questions, you can ask me. Still the same, it is recommended that you create a new page or project yourself when testing, to avoid other factors that may cause the results to fail.

The first step: Create a new Fragment.

Because I mainly play a test role, just use the simplest BlankFragment. If you can't find it, as shown below.

Remember to do not place the red circle in the following figure when creating it. Although it is fine if you select it, it is more troublesome to delete it, but don't cancel the check above. In that case, there will be no xml file.

Then we create three Fragments, because I use three pages to test.
Add and delete the code in the figure,
add the code as follows:

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
    
    
        super.onActivityCreated(savedInstanceState);
    }

If the same operation is achieved on the three pages, then we will do the main part.

Step 2: Realize the page switching function.

Step 1: First add the following components to the xml file.

The xml code is as follows

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.xuexiang.xui.widget.tabbar.EasyIndicator
        android:id="@+id/easy_indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:indicator_bottom_line_color="#000000"
        app:indicator_height="60dp"
        app:indicator_line_color="#03DAC5"
        app:indicator_line_show="true"
        app:indicator_normal_color="#9C9C9C"
        app:indicator_select_textSize="16sp"
        app:indicator_selected_color="#03DAC5"
        app:indicator_textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/easy_indicator">

    </androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

The following is the role of some of the main attributes, the main components are mentioned, if you are not familiar with it, you can go to the official website to see, that is more detailed.

A screenshot of the official website is attached below:

you can try it yourself and test it.
You can also put it on the attribute you wrote, there will be an explanation of the attribute above, the most important is the Chinese version, as shown in the figure.

The second step is to set the activity code.

Because for everyone's convenience, I took the direct expression method for the code without splitting the code.
code show as below:

import android.os.Bundle;
import android.view.ViewGroup;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import com.xuexiang.xui.XUI;
import com.xuexiang.xui.widget.tabbar.EasyIndicator;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    
    
    private List<Fragment> list;
    private String[] tab={
    
    "注册","快捷登录","密码登录"};
    private FragmentManager manager;
    private MyFragmentPageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        XUI.initTheme(this);
        setContentView(R.layout.activity_main);
        list = new ArrayList<Fragment>();
        BlankFragment f1 = new BlankFragment();
        BlankFragment2 f2 = new BlankFragment2();
        BlankFragment3 f3=new BlankFragment3();
        list.add(f1);
        list.add(f3);
        list.add(f2);
        manager = getSupportFragmentManager();
        adapter = new MyFragmentPageAdapter(manager);
        EasyIndicator easyIndicator=findViewById(R.id.easy_indicator);
        easyIndicator.setTabTitles(tab);
        ViewPager viewPager=findViewById(R.id.view_pager1);
        easyIndicator.setViewPager(viewPager,adapter);
    }


    class MyFragmentPageAdapter extends FragmentPagerAdapter {
    
    

        public MyFragmentPageAdapter(FragmentManager fm) {
    
    
            super(fm);
        }

        @Override
        public Fragment getItem(int arg0) {
    
    
            return list.get(arg0);
        }

        @Override
        public CharSequence getPageTitle(int position) {
    
    
            return tab[position];
        }

        @Override
        public int getCount() {
    
    
            return list.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
    
    
            super.destroyItem(container, position, object);
        }

    }

}

Code analysis:


Congratulations, it is finally possible.

If you have any questions, you can comment or discuss it in a private chat, because everyone encounters different problems.

If you think carefully enough, you can also implement the functions shown in the figure below.

Finally, share the color scheme and the place to find the vector diagram.

Do you want to worry about the color matching is not good, this is not advertising, this website is really good, and free. Color Hunt , as shown in the

picture. The vector website is:
Alibaba Cloud Vector. This should be known to many people. Alibaba cloud vector