不断学习,做更好的自己!💪
简介
在 TextView 的基础上支持文字竖排。
开始使用
qmui
- 引入库
请确保配置了 JCenter 仓库源,然后直接引用:
implementation "com.qmuiteam:qmui:2.0.0-alpha10"
至此,QMUI 已被引入项目中。 - 配置主题
把项目的 theme 的 parent 指向 QMUI.Compat,至此,QMUI 可以正常工作。
<style name="Theme.QMUIDemo" parent="QMUI.Compat.NoActionBar"></style>
效果图
核心代码
1. 布局文件
<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>
- QDVerticalTextViewActivity.java
public class QDVerticalTextViewActivity extends BaseActivity {
(R.id.topbar)
QMUITopBar mTopBar;
(R.id.verticalTextView)
QMUIVerticalTextView mVerticalTextView;
(R.id.verticalTextView_editText)
EditText mEditText;
protected int getLayoutId() {
return R.layout.activity_qdvertical_text_view;
}
protected void initView() {
initTopBar();
initVerticalTextView();
}
private void initTopBar() {
mTopBar.addLeftBackImageButton().setOnClickListener(new View.OnClickListener() {
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() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
public void afterTextChanged(Editable s) {
mVerticalTextView.setText(QMUILangHelper.isNullOrEmpty(s) ? defaultText : s);
}
});
}
}