【Kevin Learn QMUI】--＞ QMUISpan

不斷學習，做更好的自己！💪

視訊号	CSDN	簡書
歡迎打開微信，關注我的視訊号：KevinDev	點我	點我

簡介

• QMUIAlignMiddleImageSpan

  繼承自

  ImageSpan

  ，在此基礎上實作讓

  span

  垂直居中的效果。

• QMUIMarginImageSpan

  繼承自

  QMUIMarginImageSpan

  ，在此基礎上支援設定圖檔的左右間距。

• QMUIBlockSpaceSpan

  通過在段落之間設定該

  span

  ，實作段間距的效果。

• QMUICustomTypefaceSpan

  支援以

  Typeface

  的方式設定

  span

  的字型，實作自定義字型的效果。

開始使用

qmui

1. 引入庫

   請確定配置了 JCenter 倉庫源，然後直接引用:

   implementation

   "com.qmuiteam:qmui:2.0.0-alpha10"

   至此，QMUI 已被引入項目中。

2. 配置主題

   把項目的 theme 的 parent 指向 QMUI.Compat，至此，QMUI 可以正常工作。

   <style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>

QMUIAlignMiddleImageSpan

1. 效果圖

   

2. 代碼

// 支援垂直居中的 ImageSpan
        int alignMiddleIconLength = QMUIDisplayHelper.dp2px(this, 20);
        final float spanWidthCharacterCount = 2f;
        SpannableString spannable = new SpannableString("[icon]" + "這是一行示例文字，前面的 Span 設定了和文字垂直居中并占 " + spanWidthCharacterCount + " 個中文字的寬度");
        Drawable iconDrawable = QMUIDrawableHelper.createDrawableWithSize(getResources(), alignMiddleIconLength, alignMiddleIconLength, QMUIDisplayHelper.dp2px(this, 4), ContextCompat.getColor(this, R.color.app_color_theme_3));
        if (iconDrawable != null) {
            iconDrawable.setBounds(0, 0, iconDrawable.getIntrinsicWidth(), iconDrawable.getIntrinsicHeight());
        }
        ImageSpan alignMiddleImageSpan = new QMUIAlignMiddleImageSpan(iconDrawable, QMUIAlignMiddleImageSpan.ALIGN_MIDDLE, spanWidthCharacterCount);
        spannable.setSpan(alignMiddleImageSpan, 0, "[icon]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        mAlignMiddleTextView.setText(spannable);

           

QMUIMarginImageSpan

1. 效果圖

   

2. 代碼

// 支援增加左右間距的 ImageSpan
        int marginImageLength = QMUIDisplayHelper.dp2px(this, 20);
        Drawable marginIcon = QMUIDrawableHelper.createDrawableWithSize(getResources(), marginImageLength, marginImageLength, QMUIDisplayHelper.dp2px(this, 4), ContextCompat.getColor(this, R.color.app_color_theme_5));
        marginIcon.setBounds(0, 0, marginIcon.getIntrinsicWidth(), marginIcon.getIntrinsicHeight());
        CharSequence marginImageTextOne = "左側内容";
        SpannableString marginImageText = new SpannableString(marginImageTextOne + "[margin]右側内容");
        QMUIMarginImageSpan marginImageSpan = new QMUIMarginImageSpan(marginIcon, QMUIAlignMiddleImageSpan.ALIGN_MIDDLE, QMUIDisplayHelper.dp2px(this, 10), QMUIDisplayHelper.dp2px(this, 10));
        marginImageText.setSpan(marginImageSpan, marginImageTextOne.length(), marginImageTextOne.length() + "[margin]".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        mMarginImageTextView.setText(marginImageText);
           

QMUIBlockSpaceSpan

1. 效果圖

   

2. 代碼

// 整行的空白 Span，可用來用于制作段間距
        String paragraphFirst = "這是第一段比較長的段落，示範在段落之間插入段落間距。\n";
        String paragraphSecond = "這是第二段比較長的段落，示範在段落之間插入段落間距。";
        String spaceString = "[space]";
        SpannableString paragraphText = new SpannableString(paragraphFirst + spaceString + paragraphSecond);
        QMUIBlockSpaceSpan blockSpaceSpan = new QMUIBlockSpaceSpan(QMUIDisplayHelper.dp2px(this, 6));
        paragraphText.setSpan(blockSpaceSpan, paragraphFirst.length(), paragraphFirst.length() + spaceString.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        mBlockSpaceTextView.setText(paragraphText);
           

QMUICustomTypefaceSpan

1. 效果圖

   

2. 代碼

// 自定義部分文字的字型
        SpannableString customTypefaceText = new SpannableString(getResources().getString(R.string.spanUtils_rmb) + "100， 前面的人民币符号使用自定義字型特殊處理，對比這個普通的人民币符号: " + getResources().getString(R.string.spanUtils_rmb));
        customTypefaceText.setSpan(new QMUICustomTypefaceSpan("", TYPEFACE_RMB), 0, getString(R.string.spanUtils_rmb).length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        mCustomTypefaceTextView.setText(customTypefaceText);