#Android项目#XUI框架的使用

在此送上XUI的GitHub连接：https://github.com/xuexiangjys/XUI

一、框架导入引用

添加Gradle依赖

1.先在项目根目录的 build.gradle 的 repositories 添加:

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

2.然后在dependencies添加:

dependencies {
  ...
  //1.0.5版本后只支持androidx
  implementation 'com.github.xuexiangjys:XUI:1.0.8'

  implementation 'androidx.appcompat:appcompat:1.0.2'
  implementation 'androidx.recyclerview:recyclerview:1.0.0'
  implementation 'com.google.android.material:material:1.1.0-alpha07'
  implementation 'com.github.bumptech.glide:glide:4.8.0'
}

【注意】如果你的项目目前还未使用androidx，那你只能使用1.0.5之前的版本了。

dependencies {
  ...
  implementation 'com.github.xuexiangjys:XUI:1.0.4'

  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'
}

初始化XUI设置

1.在Application最顶部初始化设置（必须）

创建MyApplication继承Application,在Application的onCreate()方法初始化设置（必须）

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

2.调整应用的基础主题（必须）

必须设置应用的基础主题，否则组件将无法正常使用！必须保证所有用到XUI组件的窗口的主题都为XUITheme的子类，这非常重要！！！

基础主题类型：

• 大平板(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>

3.在AndroidManifest中绑定你的Application和主题（必须）

4.调整字体库（对字体无要求的可省略）

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

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

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

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

二、框架的自定义

(一)全局背景颜色

在values——>colors中自定义

<?xml version="1.0" encoding="utf-8"?>
<resources>
    //控件选中颜色
    <color name="colorAccent_select">#65b0dc</color>
    //全局背景颜色
    <color name="xui_config_color_background_phone">#FFF</color>
</resources>

(二)引导页面的“立即体验”按钮距离底部高度

<style name="AppTheme" parent="XUITheme.Phone">
    <!-- 自定义自己的主题样式 -->
    <!-- guide_button距离底部的高度 -->
    <item name="xui_guide_btn_margin_bottom">60dp</item>
</style>

三、框架控件的运用

(一)欢迎界面(SplashActivity)

/**
 * @author  Ben
 * @创建时间 2019/8/28 22:47
 * @描述 欢迎界面,并判断用户是否第一次使用软件
 * */
public class SplashActivity extends BaseSplashActivity {
    public static final String START_MAIN = "start_main";
    public final static String KEY_IS_DISPLAY = "key_is_display";
    public final static String KEY_ENABLE_ALPHA_ANIM = "key_enable_alpha_anim";
    private boolean isDisplay = false;

    /**设置欢迎界面时长*/
    @Override
    protected long getSplashDurationMillis() {
        return 1200;
    }
    /** 欢迎界面被创建 */
    @Override
    public void onCreateActivity() {
        isDisplay = getIntent().getBooleanExtra(KEY_IS_DISPLAY, isDisplay);
        boolean enableAlphaAnim = getIntent().getBooleanExtra(KEY_ENABLE_ALPHA_ANIM, false);
        startSplash(enableAlphaAnim);
    }
 /** 欢迎界面结束时 */
    @Override
    public void onSplashFinished() {
        if (!isDisplay) {
            //判断是否曾经进入过主界面
            boolean isStartMain = CacheUtils.getBoolean(SplashActivity.this, START_MAIN);
            //如果进入过则进入主界面
            if (isStartMain) {
                startActivity(new Intent(SplashActivity.this, MainActivity.class));
                finish();
            } else {
                startActivity(new Intent(SplashActivity.this, GuideActivity.class));
            }
        }
        finish();
    }
    /** 菜单、返回键响应 */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        return KeyboardUtils.onDisableBackKeyDown(keyCode) && super.onKeyDown(keyCode, event);
    }
}

判断是否第一次登录的类

/**
 * @创建者 Ben
 * @创建时间 2019/8/28 22:57
 * @描述 记录用户是否第一次使用软件
 */
class CacheUtils {
    /**得到缓存值
     *
     * @param context
     * @param key
     * @return
     */
    static boolean getBoolean(Context context, String key) {
        SharedPreferences sp = context.getSharedPreferences("volunteer", Context.MODE_PRIVATE);
        return sp.getBoolean(key, false);
    }

    /**
     * 保存缓存
     * @param context
     * @param key
     * @param value
     */
    static void putBoolean(Context context, String key, boolean value) {
        SharedPreferences sp = context.getSharedPreferences("volunteer", Context.MODE_PRIVATE);
        sp.edit().putBoolean(key, value).apply();
    }
}

(二)引导界面

详情请看代码，可以加载网络图片以及本地图片，大家也可以自定义立即体验按钮距离底部的高度，详情请看

/**
 * @author  Ben
 * @创建时间 2019/8/28 22:47
 * @描述 引导界面,引导图尺寸为尺寸1920*1080，可以网络图片也可以本地
 * */
public class GuideActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        //去掉状态栏，实现全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //保存已经进入的主界面的记录
        CacheUtils.putBoolean(GuideActivity.this, SplashActivity.START_MAIN, true);
        sgb();
    }

    private List<Object> getUsertGuides() {
        //尺寸1920*1080，可以网络图片也可以本地
        List<Object> list = new ArrayList<>();
        list.add("http://photocdn.sohu.com/tvmobilemvms/20150907/144160323071011277.jpg");
        list.add(R.drawable.guide_img_2);
        list.add(R.drawable.guide_img_3);
        list.add(R.drawable.guide_img_4);
        return list;
    }

    private void sgb() {
        SimpleGuideBanner sgb = findViewById(R.id.sgb);
        sgb
                //显示器的样式
                .setIndicatorWidth(6)
                .setIndicatorHeight(6)
                .setIndicatorGap(12)
                .setIndicatorCornerRadius(3.5f)
                .setSelectAnimClass(ZoomInEnter.class)
                /*滚动样式 有以下选择
                 DepthTransformer.class,
                 FadeSlideTransformer.class,
                 FlowTransformer.class,
                 RotateDownTransformer.class,
                 RotateUpTransformer.class,
                 ZoomOutSlideTransformer.class, */
             .setTransformerClass(FadeSlideTransformer.class)
                //滚动点
                .barPadding(0, 10, 0, 10)
                //绑定界面
                .setSource(getUsertGuides())
                .startScroll();
        //跳过及立即体验按钮监听
        sgb.setOnJumpClickListener(() -> {
            startActivity(MainActivity.class);
            finish();
        });
    }
}

(三)使用RecyclerView实现的Banner轮播图控件，支持无限轮播。

演示效果

[外链图片转存失败(img-klcPVgEX-1567079277629)(https://github.com/xuexiangjys/XUI/raw/master/art/wiki/bannerlayout.png)]

使用方法：

<com.xuexiang.xui.widget.banner.recycler.BannerLayout    android:id="@+id/bl_horizontal"    android:layout_width="match_parent"    android:layout_height="200dp"   
 app:bl_autoPlaying="true"    
 app:bl_centerScale="1.3"   
 app:bl_interval="2000"    
 app:bl_showIndicator="false"    
 app:bl_itemSpace="10dp"   
 app:bl_moveSpeed="0.7" />

属性表:

属性名	类型	默认值	备注
bl_interval	integer	4000ms4000ms	轮播间隔，单位ms
bl_showIndicator	boolean	true	是否显示轮播索引
bl_orientation	enum	horizontal	轮播的方向
bl_autoPlaying	boolean	true	是否是自动轮播
bl_indicatorSelectedSrc	reference	/	轮播索引选中的效果
bl_indicatorUnselectedSrc	reference	/	轮播索引未选中的效果
bl_indicatorSize	dimension	5dp	轮播索引的大小
bl_indicatorSelectedColor	color	R.color.xui_config _color_red	轮播索引选中的颜色
bl_indicatorUnselectedColor	color	R.color.xui_config _color_gray_2	轮播索引未选中的颜色
bl_indicatorSpace	dimension	4dp	索引器之间的间隔
bl_indicatorMarginLeft	dimension	16dp	索引器的左侧边距
bl_indicatorMarginRight	dimension	0dp	索引器的右侧边距
bl_indicatorMarginBottom	dimension	11dp	索引器的底部边距
bl_indicatorGravity	enum	left	索引器的对齐方式
bl_itemSpace	dimension	10dp	轮播图之间的间距
bl_centerScale	float	1.2F	图片缩放系数
bl_moveSpeed	float	1.0F	轮播速度

public class MainActivity extends Activity {

    @BindView(R.id.bl_horizontal)
    BannerLayout blHorizontal;
    private RecyclerViewBannerAdapter mAdapterHorizontal;
    //640*360 360/640=0.5625
    private  String[] urls = new String[]{
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144160323071011277.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144158380433341332.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144160286644953923.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150902/144115156939164801.jpg",
            "http://photocdn.sohu.com/tvmobilemvms/20150907/144159406950245847.jpg",
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        init();
    }

    private void init() {
        blHorizontal.setAdapter(mAdapterHorizontal = new RecyclerViewBannerAdapter(urls));
        mAdapterHorizontal.setOnBannerItemClickListener(position -> {
            Toast.makeText(this, "点击了第" + (position + 1) + "个", Toast.LENGTH_SHORT).show();
        });
    }
}

(四)倒计时按钮。

演示效果：

[外链图片转存失败(img-bAehJxnf-1567525244569)(https://github.com/xuexiangjys/XUI/raw/master/art/wiki/countdownbutton.png)]

<com.xuexiang.xui.widget.textview.supertextview.SuperButton
                        android:id="@+id/bt_countdown1"
                        style="@style/SuperButton.Blue"
                        android:layout_marginStart="20dp"
                        android:layout_marginTop="10dp"
                        android:text="获取验证码"
                        app:sCornersRadius="18dp"/>

代码实现：

    private CountDownButtonHelper mCountDownHelper;
    //设置时长
  mCountDownHelper = new CountDownButtonHelper(mBtCountDown1, 10);
  //点击事件开始计时
  mCountDownHelper.start();
  //销毁
   @Override
    public void onDestroyView() {
        mCountDownHelper.cancel();
        super.onDestroyView();
    }

（五）自定义按钮样式

演示效果：[外链图片转存失败(img-Gjh4gMzn-1567525244571)(E:\volunteer_project\笔记\picture\XUI_Button.png)]

<com.xuexiang.xui.widget.button.roundbutton.RoundButton
    style="@style/RoundButton.Auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="16dp"
    android:text="登录"
    android:textColor="@color/#FFF"
    android:textStyle="bold"
    app:rb_backgroundColor="@color/button_color"
    app:rb_borderColor="@color/button_color"
    app:rb_radius="15dp" />

当作普通按钮使用即可

(六)提示输入框

//输入框
    new MaterialDialog.Builder(this)
             //图标
            .iconRes(R.drawable.icon_tip)
      		//标题
            .title(title)
      		//内容
            .content(content)
            .inputType(
            		//输入类型文本
                    InputType.TYPE_CLASS_TEXT
                    	//数字
                    	|InputType.TYPE_CLASS_NUMBER
            )
            .input(
            		//hint提示
                    "" ,
                    //默认值
                    "",
                    false,
                    (inputCallback))
            .inputRange(min, max)
            .positiveText("确定")
            .negativeText("取消")
            .cancelable(false)
            .show();

效果图

(七)下拉选择

<com.xuexiang.xui.widget.spinner.materialspinner.MaterialSpinner
    android:id="@+id/ID_Type"
    style="@style/Material.SpinnerStyle"
    android:layout_gravity="center"
    android:layout_marginTop="?attr/xui_config_content_spacing_vertical" />

效果图

后端代码

@BindView(R.id.ID_Type)
    MaterialSpinner IDType;
    IDType.setItems("居民身份证", "护照", "警官证");
        //点击事件
        IDType.setOnItemSelectedListener(new MaterialSpinner.OnItemSelectedListener() {
            @Override
            public void onItemSelected(MaterialSpinner view, int position, long id, Object item) {
            	  //显示点击了哪一个
           		Toast.makeText(Personal_Perfecting.this, item.toString(), Toast.LENGTH_SHORT).show();


            }
        });