XUI之TabBar指示器實作頁面切換

第一步：新建Fragment，
第二步：實作頁面切換功能，
- 第一步：先在xml檔案中加入如下組件，
- 第二步，設定activity處代碼，
最后，分享一下配色和找矢量圖的地方，

如果不知道怎么加入XUI框架的，可以看我們一篇博客加入XUI框架
程序還算詳細，如果有什么問題可以問我，還是一樣的，建議測驗的時候自己先新建一個頁面，或者專案，避免發生其他因素而導致實作結果不了，

第一步：新建Fragment，

因為我主要是起到測驗作用，就用那個最簡單的BlankFragment吧，如果找不到的話，如下圖，
在這里插入圖片描述
記得創建的時候不要如下圖紅圈的地方，雖然選了也沒事，就是刪起來比較麻煩，不過上面那個勾不要取消掉哦，那樣的話就沒有xml檔案了，

然后我們創建三個Fragment就行了，因為我這里用三個頁面之間進行測驗，
加入和洗掉如圖中代碼，
加入代碼如下：

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

在這里插入圖片描述
三個頁面實作相同的操作了的話，然后我們就做最主要的部分了，

第二步：實作頁面切換功能，

第一步：先在xml檔案中加入如下組件，

xml代碼如下

<?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>

在這里插入圖片描述
下面是主要的一些屬性的作用，主要的組件都說到了，如果還不熟悉可以去官網看，那個比較詳細，

下面附上一張官網截圖：

可以自己多多嘗試一下，測驗一下，
你也可以放到你寫的屬性上面，上面會有屬性的解釋，最主要是中文版的，如圖，
在這里插入圖片描述

第二步，設定activity處代碼，

因為為了大家看起來方便點，代碼我就采取直接表達的方法，就沒有把代碼拆分了，
代碼如下：

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);
        }

    }

}