不断学习,做更好的自己!💪

简介

在 TextView 的基础上支持文字竖排。

开始使用

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>​

效果图

【Kevin Learn QMUI】-->QMUIVerticalTextView_ide

核心代码

1. 布局文件

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

<com.qmuiteam.qmui.widget.QMUITopBar
android:id="@+id/topbar"
android:layout_width="match_parent"
android:layout_height="60dp"
app:qmui_topbar_title_bold="true"
app:qmui_topbar_title_color="@color/white"
android:background="@color/app_color_theme_8"/>

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="@dimen/common_content_spacing"
android:paddingRight="@dimen/common_content_spacing"
android:paddingTop="40dp">

<com.qmuiteam.qmui.widget.QMUIVerticalTextView
android:id="@+id/verticalTextView"
android:layout_width="wrap_content"
android:layout_height="165dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="40dp"
android:background="?attr/qmui_config_color_gray_9"
android:lineSpacingExtra="6dp"
android:padding="6dp"
android:textColor="?attr/qmui_config_color_gray_1"
android:textSize="14sp"/>

<EditText
android:id="@+id/verticalTextView_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/qmui_divider_bottom_bitmap"
android:hint="在此输入文字, 看垂直排版的效果"
android:paddingBottom="6dp"
android:singleLine="true"
android:textColor="@color/app_color_description"
android:textSize="16sp"/>
</LinearLayout>

</ScrollView>

</LinearLayout>
  1. QDVerticalTextViewActivity.java
public class QDVerticalTextViewActivity extends BaseActivity {
@BindView(R.id.topbar)
QMUITopBar mTopBar;
@BindView(R.id.verticalTextView)
QMUIVerticalTextView mVerticalTextView;
@BindView(R.id.verticalTextView_editText)
EditText mEditText;

@Override
protected int getLayoutId() {
return R.layout.activity_qdvertical_text_view;
}

@Override
protected void initView() {
initTopBar();
initVerticalTextView();
}

private void initTopBar() {
mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});

mTopBar.setTitle("QMUIVerticalTextView");
}

private void initVerticalTextView() {
final String defaultText = String.format("%s 实现对文字的垂直排版。并且对非 CJK (中文、日文、韩文)字符做90度旋转排版。可以在下方的输入框中输入文字,体验不同文字垂直排版的效果。",
QMUIVerticalTextView.class.getSimpleName());
mVerticalTextView.setText(defaultText);
mEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {

}

@Override
public void afterTextChanged(Editable s) {
mVerticalTextView.setText(QMUILangHelper.isNullOrEmpty(s) ? defaultText : s);
}
});
}

}