XUI之TabBar指示器實現頁面切換
如果不知道怎麼加入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);
}
}
}
代碼解析：
恭喜你，終於可以了。
如果有什麼問題的話，可以評論或者私聊探討了一下，因爲每個人遇到的問題都不相同。
如果你琢磨的夠仔細的話也可以實現下圖功能。
最後，分享一下配色和找矢量圖的地方。
你是不是要配色不好看而苦惱呢，這可不是打廣告，這個網站真的還不錯，而且免費。Color Hunt，如圖
矢量圖的網站是：
阿里雲矢量圖，這個應該挺多人知道的。阿里雲矢量圖
