饭后Android 第三餐-XUI框架（XUI介绍，使用方法，控件使用（九个Button，导航栏，可伸缩布局，顶部弹出框））

XUI–GitHub开源网址

1.XUI介绍

作者语录：一个简洁而又优雅的Android原生UI框架，解放你的双手！

XUI涵盖了大部分的UI组件，TextView、Button、EditText、ImageView、Spinner、Picker、Dialog、PopupWindow、ProgressBar、LoadingView、StateLayout、FlowLayout、Switch、Actionbar、TabBar、Banner、GuideView、BadgeView、MarqueeView、WebView、SearchView等一系列的组件和丰富多彩的样式主题。

组件图片展示

工具图片展示

拓展图片展示

这些控件在官方文档中并没有一一提到，官方文档只对常用的一些控件进行了讲解，但是这个XUI框架是开源的，所以这些控件在源码中都可以找到使用方法，其实自己挖掘出的知识会更觉得有成就感，所以如果你对哪个控件感兴趣，但是官方文档又没有的话，那就尽情的去探索吧！

2.使用方法

1 添加依赖

1.在项目的 build.gradle 的 repositories 下添加:

maven {
    
     url "https://jitpack.io" }

然后接着在dependencies下添加
（推荐使用）

  //androidx项目
  implementation 'com.github.xuexiangjys:XUI:1.1.5'

  implementation 'androidx.appcompat:appcompat:1.1.0'
  implementation 'androidx.recyclerview:recyclerview:1.1.0'
  implementation 'com.google.android.material:material:1.1.0'
  implementation 'com.github.bumptech.glide:glide:4.11.0'

【注意】如果你的项目目前还未使用androidx，请使用如下配置：

（官方文档给的建议，但是我个人不推荐用这个，一是因为依赖版本低不仅要重构依赖，而且因为这个依赖库缺少一个配置文件会导致运行不了）

//support项目
  implementation 'com.github.xuexiangjys:XUI:1.0.9-support'

  implementation 'com.android.support:appcompat-v7:28.0.0'
  implementation 'com.android.support:recyclerview-v7:28.0.0'
  implementation 'com.android.support:design:28.0.0'
  implementation 'com.github.bumptech.glide:glide:4.8.0'

我这里用的是上面版本高的的依赖包（如图）

2 初始化XUI设置

第一步，新建一个 类
然后继承 Application （application会在activity之前运行）
记得！！！在mainfests里注册（不然不会生效）

        android:name=".Myapplication"

然后再在oncreat（）方法下添加代码

XUI.init(this); //初始化UI框架
XUI.debug(true);  //开启UI框架调试日志

第二步.调整应用的基础主题（必须）

必须设置应用的基础主题，否则组件将无法正常使用！必须保证所有用到XUI组件的窗口的主题都为XUITheme的子类，这非常重要！！
也就是说要给成XUI设定的主题，不然会因为不适配，控件显示不出来或者运行报错

基础主题类型：

• 大平板(10英寸, 240dpi, 1920*1200）：XUITheme.Tablet.Big
• 小平板(7英寸, 320dpi, 1920*1200）：XUITheme.Tablet.Small
• 手机（4.5英寸, 320dpi, 720*1280）：XUITheme.Phone

<style name="AppTheme" parent="XUITheme.Phone">

    <!-- 自定义自己的主题样式 -->

    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>

当然也可以在Activity刚开始时调用如下代码动态设置主题（我比较喜欢用上面那种，直接改了）

@Override
protected void onCreate(Bundle savedInstanceState) {
    
    
    XUI.initTheme(this);
    super.onCreate(savedInstanceState);
    ...
}

3.调整字体库（对字体无要求的可省略）–这里我没有用到就不加了

（1）设置你需要修改的字体库路径（assets下）

//设置默认字体为华文行楷，这里写你的字体库
XUI.getInstance().initFontStyle("fonts/hwxk.ttf");

（2）在项目的基础Activity中加入如下代码注入字体.

注意：1.1.4版本之后使用如下设置注入

@Override
protected void attachBaseContext(Context newBase) {
    
    
    //注入字体
    super.attachBaseContext(ViewPumpContextWrapper.wrap(newBase));
}

注意：1.1.3版本及之前的版本使用如下设置注入

@Override
protected void attachBaseContext(Context newBase) {
    
    
    //注入字体
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

然后运行，会报错，说 minSdkVersion 过低

解决方法：把minSdkVersion改为 23，问题就会解决
（别问为啥是23，因为这是我一个一个试验出来的，乔丹号码）

运行成功，现在添加一个基础控件，在布局文件添加

 <com.xuexiang.xui.widget.button.ButtonView
        android:id="@+id/buttonView"
        style="@style/ButtonView.Green"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="237dp"
        android:layout_marginBottom="69dp"
        app:layout_constraintBottom_toTopOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

OK，到这一步其实你就已经打开了XUI的这个城堡的大门 ，你可以去看各种堡垒的美景。

3.控件使用

官方组件使用文档传送门

官方文档已经很详细的讲了常用控件的布局文件属性，我在这列举按钮篇和几个其他控件。

1.Button

其实大多button的逻辑代码都一样，几个特殊的按钮我在上一讲有讲到，感兴趣的小伙伴可以；了解

饭后Android 第二餐-复选框CheckBox+开关按钮Switch+单选按钮RadioButton

演示

1.Buttonview

布局文件

    <com.xuexiang.xui.widget.button.ButtonView
        android:id="@+id/buttonView"
        style="@style/ButtonView.Green"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

逻辑代码

     mButtonView=findViewById(R.id.buttonView);
        mButtonView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Log.i("Mainactivity","ButtonView按钮点击了一次");            }
        });

2.RippleView-带波纹效果

布局文件

 <com.xuexiang.xui.widget.button.RippleView
        android:id="@+id/rippleView"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/xui_config_content_spacing_horizontal"
        android:layout_marginBottom="561dp"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        app:layout_constraintRight_toRightOf="@id/buttonView"
        app:layout_constraintTop_toBottomOf="@id/buttonView"
        app:layout_goneMarginTop="20dp"

        app:rv_type="simpleRipple">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:layout_marginStart="?attr/xui_config_content_spacing_horizontal"
            android:layout_marginEnd="?attr/xui_config_content_spacing_horizontal"
            android:background="@color/xui_btn_green_normal_color"
            android:gravity="center"
            android:text="单波纹"
            android:textColor="@color/xui_config_color_white"
            android:textSize="20sp" />

    </com.xuexiang.xui.widget.button.RippleView>

逻辑代码

 mRippleView=findViewById(R.id.rippleView);
        mRippleView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Log.i("Mainactivity","RippleView按钮点击了一次");
            }
        });

3.ShineButton-带动画

布局文件

  <com.xuexiang.xui.widget.button.shinebutton.ShineButton
        android:id="@+id/shine_button_1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:src="@android:color/darker_gray"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        app:layout_constraintRight_toRightOf="@id/buttonView"
        app:layout_constraintTop_toBottomOf="@id/rippleView"
        app:sb_allow_random_color="false"
        app:sb_big_shine_color="#FF6666"
        app:sb_checked_color="#FF6666"
        app:sb_click_animation_duration="200"
        app:sb_enable_flashing="false"
        app:sb_icon_image="@mipmap/good1"
        app:sb_normal_color="@android:color/darker_gray"
        app:sb_shine_animation_duration="1500"
        app:sb_shine_count="15"
        app:sb_shine_distance_multiple="1.5"
        app:sb_shine_turn_angle="10"
        app:sb_small_shine_color="#CC9999"
        app:sb_small_shine_offset_angle="20" />

图标资源下载

4.SmoothCheckBox-动画切换

布局文件

  <com.xuexiang.xui.widget.button.SmoothCheckBox
        android:id="@+id/scb"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="5dp"
        android:layout_marginTop="20dp"
        android:paddingTop="10dp"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        app:layout_constraintTop_toBottomOf="@id/shine_button_1"
        app:scb_color_checked="@color/xui_btn_green_normal_color" />

5.SwitchIconView-动画切换

布局文件

    <com.xuexiang.xui.widget.button.SwitchIconView
        android:id="@+id/switchIconView"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:padding="8dp"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        app:layout_constraintRight_toRightOf="@id/buttonView"
        app:layout_constraintTop_toBottomOf="@id/scb"
        app:siv_disabled_alpha=".5"
        app:siv_disabled_color="#dadada"
        app:siv_enabled="false"
        app:siv_tint_color="#11E6ED"
        app:srcCompat="@mipmap/nz"

        />

图标资源下载
逻辑代码

//变量声明
 SwitchIconView mSwitchIconView;
    int i=1;

 mSwitchIconView=findViewById(R.id.switchIconView);
        mSwitchIconView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                if (i>0) {
    
    
                    mSwitchIconView.setIconEnabled(true);
                    i*=-1;
                }else{
    
    
                    mSwitchIconView.setIconEnabled(false);
                    i*=-1;
                }

            }
        });

6.FloatingActionButton-悬浮按钮

布局文件

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        app:layout_constraintRight_toRightOf="@id/buttonView"

        app:layout_constraintTop_toBottomOf="@id/switchIconView" />

7.ShadowButton-点击时背景阴影

布局文件

  <com.xuexiang.xui.widget.button.shadowbutton.ShadowButton
        android:id="@+id/shadowButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="16dp"
        app:layout_constraintTop_toBottomOf="@id/floatingActionButton"
        app:layout_constraintLeft_toLeftOf="@id/buttonView"
        android:layout_marginTop="20dp"
        app:layout_constraintRight_toRightOf="@id/buttonView"
        app:sb_color_unpressed="@color/xui_btn_green_normal_color"
        app:sb_color_pressed="@color/xui_config_color_red"
        app:sb_ripple_color="@color/xui_btn_blue_select_color"
        app:sb_radius="6dp" />

8.RoundButton

布局文件

 <com.xuexiang.xui.widget.button.roundbutton.RoundButton
        android:id="@+id/roundButton"
        style="@style/RoundButton.Auto"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:text="圆角"
        android:textColor="@color/xui_default_round_btn_white_text"
        app:layout_constraintBottom_toTopOf="@+id/countDownButton"
        app:layout_constraintEnd_toEndOf="@+id/buttonView"

        app:layout_constraintStart_toStartOf="@+id/buttonView"
        app:rb_backgroundColor="@color/xui_btn_green_normal_color"
        app:rb_borderColor="@color/xui_btn_gray_normal_color"
        app:rb_radius="100dp" />

逻辑代码

      mRoundButton=findViewById(R.id.roundButton);
        mRoundButton.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Log.i("Mainactivity","RoundButton按钮点击了一次");
            }
        });

9.CountDownButton-带倒计时

布局文件

这个有点意思，可以不在java文件里写代码就可以实现点击倒计时

  <com.xuexiang.xui.widget.button.CountDownButton
        android:id="@+id/countDownButton"
        style="@style/Button.Blue"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="20dp"
        android:text="10s"
        app:cdbt_countDown="10000"
        app:cdbt_countDownInterval="100"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/buttonView"
        app:layout_constraintStart_toStartOf="@+id/buttonView" />

2.导航栏

官方文档给出了几种， 这里讲一种我常用的吧

1.TitleBar

布局文件

 <com.xuexiang.xui.widget.actionbar.TitleBar
        android:id="@+id/titleBar"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/xui_btn_green_normal_color"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tb_actionPadding="10dp"
        app:tb_barHeight="65dp"
        app:tb_leftImageResource="@mipmap/back"
        app:tb_leftText="返回"
        app:tb_sideTextPadding="10dp"
        app:tb_titleText="导航栏"
        app:tb_useThemeColor="false" />

这里视图显示不出来，没关系，运行就会有

点击事件

 mTitleBar=findViewById(R.id.titleBar);
        mTitleBar.setLeftClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    

                Log.i("Mainactvity","点击返回");
            }
        });

演示

3.可伸缩布局

这里我讲到两个伸缩布局，一个是水平伸缩，一个是垂直伸缩

演示

Mainactivity布局文件，很简单就是两个fragment布局

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

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <FrameLayout
        android:id="@+id/frameLayout2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/frameLayout"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

java代码

public class MainActivity extends AppCompatActivity {
    
    


    BlankFragment mBlankFragment=new BlankFragment();
    BlankFragment2 mBlankFragment2=new BlankFragment2();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout,mBlankFragment).commit();
        getSupportFragmentManager().beginTransaction().replace(R.id.frameLayout2,mBlankFragment2).commit();

    }
}

1.ExpandableHorizontalFragment（水平伸缩）

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:layout_marginTop="16dp"
        android:gravity="right"
        android:orientation="horizontal">



        <com.xuexiang.xui.widget.layout.ExpandableLayout
            android:id="@+id/expandable_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal"
            app:el_duration="1000"
            app:el_expanded="false">

            <TextView
                style="@style/TextStyle.Content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FD09ECBD"
                android:gravity="center_vertical"
                android:paddingStart="16dp"
                android:paddingEnd="16dp"
                android:text="hello world~"
                android:textColor="@color/xui_config_color_white" />

        </com.xuexiang.xui.widget.layout.ExpandableLayout>
        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/expand_button"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="?selectableItemBackgroundBorderless"
            android:layout_gravity="center"
            android:layout_marginRight="10dp"
            android:src="@mipmap/back"
            android:tint="?attr/colorAccent" />
    </LinearLayout>

</LinearLayout>

逻辑代码

public class BlankFragment extends Fragment {
    
    

    ExpandableLayout expandableLayout;
    AppCompatImageView expandButton;
    int i=1;


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
    
    

        return inflater.inflate(R.layout.fragment_blank, container, false);
    }
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    
    
        super.onActivityCreated(savedInstanceState);

        expandableLayout=getActivity().findViewById(R.id.expandable_layout);
        expandButton=getActivity().findViewById(R.id.expand_button);
        expandableLayout.setOnExpansionChangedListener((expansion, state) -> {
    
    
            if (expandButton != null) {
    
    
                expandButton.setRotation(expansion * 180);

            }
        });
        expandButton.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    

                if (i>0) {
    
    

                    expandableLayout.toggle();
                    expandButton.setSelected(true);
                    i*=-1;
                }else {
    
    
                    expandableLayout.toggle();
                    expandButton.setSelected(false);
                    i*=-1;
                }
                Log.i("expandButton","--------"+i);
            }
        });
    }
}

这里有个报错

解决方法
如图所示，等待同步一会就解决了

运行

2.ExpandableSimpleFragment（垂直伸缩）

布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.xuexiang.xui.widget.alpha.XUIAlphaTextView
        android:id="@+id/expand_button2"
        style="@style/TextAppearance.AppCompat.Medium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#07D5CE"
        android:gravity="center"
        android:padding="16dp"
        android:text="点击切换伸缩状态" />

    <com.xuexiang.xui.widget.layout.ExpandableLayout
        android:id="@+id/expandable_layout_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:el_duration="1000"
        app:el_expanded="false">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#7AF66C"
            android:clipToPadding="false"
            android:gravity="center"
            android:text="固定高度"
            android:textColor="@color/xui_config_color_white" />

    </com.xuexiang.xui.widget.layout.ExpandableLayout>

    <com.xuexiang.xui.widget.layout.ExpandableLayout
        android:id="@+id/expandable_layout_2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:el_duration="1000"
        app:el_expanded="false"
        app:el_parallax="0.5">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#1892B1"
            android:gravity="center"
            android:text="全填充"
            android:textColor="@color/xui_config_color_white" />

    </com.xuexiang.xui.widget.layout.ExpandableLayout>


</LinearLayout>

逻辑代码

public class BlankFragment2 extends Fragment {
    
    
    XUIAlphaTextView mXUIAlphaTextView;

    ExpandableLayout expandableLayout1;

    ExpandableLayout expandableLayout2;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
    
    
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_blank2, container, false);
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    
    
        super.onActivityCreated(savedInstanceState);
        mXUIAlphaTextView=getActivity().findViewById(R.id.expand_button2);
        expandableLayout2=getActivity().findViewById(R.id.expandable_layout_2);
        expandableLayout1=getActivity().findViewById(R.id.expandable_layout_1);


        mXUIAlphaTextView.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    

                if (expandableLayout1.isExpanded()) {
    
    
                    expandableLayout1.collapse();
                } else if (expandableLayout2.isExpanded()) {
    
    
                    expandableLayout2.collapse();
                } else {
    
    
                    expandableLayout1.expand();
                    expandableLayout2.expand();
                }

            }
        });

    }
    
}

运行

4.顶部弹出框

调用会从顶部弹出一个弹窗
java代码

public class MainActivity extends AppCompatActivity {
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    
        CookieBar.builder(this)
                .setTitle("来自护眼精灵的温馨提示")
                .setMessage("来自Rose-J的提示")
                .setDuration(4000)
                .setBackgroundColor(R.color.xui_btn_green_normal_color)
                .setActionColor(android.R.color.white)
                .setTitleColor(android.R.color.white)
                .setAction(R.string.app_name,View::stopNestedScroll)
                .show();
    }
}

运行

关于XUI就讲到这里啦，还有很多好看的控件，这里就不一一介绍了，感兴趣的小伙伴可以深入了解，也欢迎和博主分享你的新发现哦，感谢您的阅读。
博主为了可以学到更多的Android知识，创建了一个安卓知识交流群，欢迎大佬入群，当然也欢迎和我一样的安卓小白，我们可以一起交流，最重要的是快乐水群，记得定个小目标，冲击bat