XUI之TabBar指示器实现页面切换

第一步：新建Fragment。
第二步：实现页面切换功能。
- 第一步：先在xml文件中加入如下组件。
- 第二步，设置activity处代码。
最后，分享一下配色和找矢量图的地方。

如果不知道怎么加入XUI框架的，可以看我们一篇博客加入XUI框架
过程还算详细，如果有什么问题可以问我。还是一样的，建议测试的时候自己先新建一个页面，或者项目，避免发生其他因素而导致实现结果不了。

第一步：新建Fragment。

因为我主要是起到测试作用，就用那个最简单的BlankFragment吧。如果找不到的话，如下图。

记得创建的时候不要如下图红圈的地方，虽然选了也没事，就是删起来比较麻烦，不过上面那个勾不要取消掉哦，那样的话就没有xml文件了。

然后我们创建三个Fragment就行了，因为我这里用三个页面之间进行测试。
加入和删除如图中代码，
加入代码如下：

 @Overridepublic 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.EasyIndicatorandroid: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.ViewPagerandroid: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;@Overrideprotected 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);}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic CharSequence getPageTitle(int position) {return tab[position];}@Overridepublic int getCount() {return list.size();}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {super.destroyItem(container, position, object);}}}

代码解析：

恭喜你，终于可以了。

如果有什么问题的话，可以评论或者私聊探讨了一下，因为每个人遇到的问题都不相同。

如果你琢磨的够仔细的话也可以实现下图功能。

最后，分享一下配色和找矢量图的地方。

你是不是要配色不好看而苦恼呢，这可不是打广告，这个网站真的还不错，而且免费。Color Hunt，如图

矢量图的网站是：
阿里云矢量图，这个应该挺多人知道的。阿里云矢量图

如果想了解更多关于XUI框架的知识：
XUI框架之Button按钮的使用，简化你的倒计时功能？
XUI框架之FlowTagLayout流标签的使用，实现原生android没有的功能？
XUI框架实现比原生框架更好看并且功能更齐全的EditText框？，以及如何获取EditText的值？

XUI框架实现自带的tablayout（TabBar指示器）+viewpage实现页面切换？相关推荐

XUI框架实现比原生框架更好看并且功能更齐全的EditText框？，以及如何获取EditText的值
XUI之EditText文本输入框第一步:配置XUI环境第二步:编写EditText的xml页面. 第三步:如何获取EditText里面的值呢? 1.不要忘记初始化XUI 2.获取文本框的值还是 ...
Android MVVM框架搭建（九）TabLayout、ViewPager、城市地图天气切换
Android MVVM框架搭建(九)TabLayout.ViewPager.城市地图切换前言正文一.父Fragment加载子Fragment ① Fragment适配器 ② TabLayout ...
mvc identity连接mysql_asp.net MVC5，如何使用mysql数据库，使用MVC框架中自带的identity用户验证体系...
问题如题现在很多时候,即使是.net项目,我们用的数据库也未必时是 SQL Server了. 但很多VS 自带的框架(如MVC .WebAPI等框架)中的示例自带的仍然是默认Sql Server的, ...
android 最新框架组合,android 官方mvp框架优化：lifecycle-mvp，像前端那样组合式写页面...
目录 1 前言虽然在标题上,自己很随意的起了这么一个名字.其实并不是说它起个英文名就牛逼了.说白了,它其实就是mvp的思想加了lifecycle-component,然后加入了分层的思想,最后用Ty ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
fragment中文网_Android使用Fragment打造万能页面切换框架
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
Android使用Fragment打造万能页面切换框架
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
Android使用Fragment打造万能页面切换框架（一）
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
Android TabLayout修改指示器宽度方案汇总
目录前言 TabLayout的视图结构 TabLayout绘制指示器的过程 1.从获取tabSelectedIndicator边界着手 1.1 默认情况下的指示器宽度 1.2 tabIndicato ...
【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）
目录前言一.tabBar 介绍二.实操(创建 tabBar ) 2.1 基本配置 2.2 详细配置总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...

XUI框架实现自带的tablayout（TabBar指示器）+viewpage实现页面切换？