Kevin Learn QMUI--＞QMUIVerticalTextView

Posted 2022-03-25 Kevin_小飞象

简介

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

效果图

核心代码

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>

2. 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);
            
        );