阿拉伯语RTL适配坑点

适配EditText,TextView的RTL模式主要属性

image.png

为了更精确地控制应用程序在UI上的文字书写顺序（从左到右，或者从右到左），Android 4.2 引入了如下的API：

android:layoutDirection —该属性设置组件的布局排列方向

android:textDirection — 该属性设置组件的文字排列方向

android:textAlignment — 该属性设置文字的对齐方式

getLayoutDirectionFromLocale() —该方法用于获取指定地区的惯用布局方式

android:layoutDirection 参数详解

该参数设置在ViewGroup中，用于排列子View的方向。

image.png

android:textAlignment 参数解释

属性	变量值	描述
inherit	0	Default
gravity	1	Default for the root view. The gravity determines the alignment, ALIGN_NORMAL, ALIGN_CENTER, or ALIGN_OPPOSITE, which are relative to each paragraph’s text direction
textStart	2	Align to the start of the paragraph, e.g. ALIGN_NORMAL.
textEnd	3	Align to the end of the paragraph, e.g. ALIGN_OPPOSITE.
center	4	Center the paragraph, e.g. ALIGN_CENTER.
viewStart	5	Align to the start of the view, which is ALIGN_LEFT if the view’s resolved layoutDirection is LTR, and ALIGN_RIGHT otherwise.
viewEnd	6	Align to the end of the view, which is ALIGN_RIGHT if the view’s resolved layoutDirection is LTR, and ALIGN_LEFT otherwise

属性	变量值	描述
inherit	0	默认
gravity	1	根视图的默认值。重力确定对齐，ALIGN_NORMAL，ALIGN_CENTER或ALIGN_OPPOSITE，它们相对于每个段落的文本方向text direction
textStart	2	与段落的开头对齐，例如ALIGN_NORMAL
textEnd	3	与段落末尾对齐，例如ALIGN_OPPOSITE
center	4	与段落居中，例如居中对齐。
viewStart	5	与视图的开头对齐，如果视图的已解析layoutDirection为LTR，则为ALIGN_LEFT，否则为ALIGN_RIGHT
viewEnd	6	对齐视图的末尾，如果视图的已解析的layoutDirection为LTR，则为ALIGN_RIGHT，否则为ALIGN_LEFT

android:textDirection 参数解释

android:textDirection="rtl" 强制某个布局如EditText（TextView）的文字排列方向为从右到左

textAlignment 和 gravity的区别

查看TextView的源码：gravity一般是配合textAlignment一起使用的：

private Layout.Alignment getLayoutAlignment() {
    // ...
    case TEXT_ALIGNMENT_VIEW_START:
        alignment = (getLayoutDirection() == LAYOUT_DIRECTION_RTL)? Layout.Alignment.ALIGN_RIGHT : Layout.Alignment.ALIGN_LEFT;
        break;
    case TEXT_ALIGNMENT_VIEW_END:
        alignment = (getLayoutDirection() == LAYOUT_DIRECTION_RTL)? Layout.Alignment.ALIGN_LEFT : Layout.Alignment.ALIGN_RIGHT;
        break;
}

两个属性共同决定了alignment 对齐方式。

image.png

android:textDirection 和 android:textAlignment 的区别

textDirection是指文字的方向，只有中文和阿拉伯语的时候才能看出区别，
如：我爱他
阿拉伯：他爱我

EditText 诡异现象的重现：

   <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="content"
            android:layout_marginStart="20dp"
            android:layout_marginLeft="20dp"
            android:textDirection="rtl"
    />

显示样式如下：

image.png

RTL模式判断方式

通过TextView的源码找到一个有用的方法：

alignment = (getLayoutDirection() == LAYOUT_DIRECTION_RTL)? Layout.Alignment.ALIGN_RIGHT : Layout.Alignment.ALIGN_LEFT;

如下：

android.view.View.getLayoutDirection

也可以使用下面的工具方法判断：

public static boolean isRtlMode(Context context) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        Configuration config = context.getResources().getConfiguration();
        if (config.getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
            return true;
        }
    }
    return false;
}

判断RTL然后针对性处理：

if (VERSION.SDK_INT >= VERSION_CODES.JELLY_BEAN_MR1) {
  if (DynamicLanguage.getLayoutDirection(getContext()) == View.LAYOUT_DIRECTION_RTL) {
    this.textView.setGravity(Gravity.RIGHT);
  } else {
    this.textView.setGravity(Gravity.LEFT);
  }
}

自定义View的处理：

public class LocaleAwareTextView extends TextView {
    public LocaleAwareTextView(Context context) {
        super(context);
        setGravity(getResources().getConfiguration().getLayoutDirection() == View.LAYOUT_DIRECTION_RTL ? Gravity.RIGHT : Gravity.LEFT);
    }
    public LocaleAwareTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setGravity(getResources().getConfiguration().getLayoutDirection() == View.LAYOUT_DIRECTION_RTL ? Gravity.RIGHT : Gravity.LEFT);
    }

    public LocaleAwareTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setGravity(getResources().getConfiguration().getLayoutDirection() == View.LAYOUT_DIRECTION_RTL ? Gravity.RIGHT : Gravity.LEFT);
    }

}

代码中动态设置设置属性：

if ("ar" == Locale.getDefault().language) {
            window.decorView.layoutDirection = View.LAYOUT_DIRECTION_RTL
}

开发建议方案

1. 从基础类开始入手，判断是否是阿拉伯语，如果是需要将界面设置为从右到左的显示方式
2. 分模块进行适配
3. 复杂的模块，可以放到 layout-ldrtl 包下，单独做一个布局来适配阿拉伯语，例如详情页
4. 创建单独的资源文件夹,以’ldrtl’(layout direction right-to-left)为后缀.如layout_ldrtl

如何快捷测试

1. 开发人员选项中有一个方便的工具强制任何语言的RTL布局方向，设置的名称和位置因手机而异，在我的设备中称为“强制RTL布局方向”。

2. 代码控制语言

public class RTLHelper {

    public static void setRTL(Context context) {
        Locale locale = new Locale("ar");
        Resources resources = context.getResources();
        Configuration config = resources.getConfiguration();
        config.locale = locale;
        if (Build.VERSION.SDK_INT >= 17) {
            config.setLayoutDirection(locale);
        }
        resources.updateConfiguration(config, resources.getDisplayMetrics());
    }
}

ConstraintLayout约束布局的坑点一

ConstraintLayout中GuideLine是一个非常好用的控件，我形容它为“隐身的监管者”。在使用它时出现了一个问题，它的app:layout_constraintGuide_percent属性无法适配rtl，所以当我们切换将手机语言设置切换阿拉伯语或者强制设置为TRL时，UI的变化就不是我们预期的了。（新版已修复GuideLine问题）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ThirdActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

在屏幕左侧40%处添加一个竖直GuideLine，在GuideLine右侧20dp处添加一个button，效果如下：

image.png

当切换RTL时，结果为：

image.png

解决方案如下：

既然系统无法为我们自动适配，那么就需要手动适配RTL：

values/dimens.xml：

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="guideline_percent" format="float" type="dimen">0.4</item>
</resources>

values-ldrtl/dimens.xml:

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="guideline_percent" format="float" type="dimen">0.6</item>
</resources>

ConstraintLayout约束布局的坑点二

约束布局【首元素】未设置约束导致的RTL出现Bug

重现

ConstraintLayout如果使用 layout_constraintLeft_toLeftOf, 那么RTL布局不会导致子View转向.
且设置链条的时候发现
app:layout_constraintHorizontal_chainStyle="packed" 会导致属性失效(看起来好像此属性被反过来一样, 其实是恢复成了默认值)

layout_constraintStart_toStartOf 则正常，且layout_constraintHorizontal_chainStyle也是正常的，不需要两头都设置一次。

不能偷懒的Bug，第一个控件必须设置left左边的约束，否则RTL后，因为左边没有约束，导致布局乱掉。其他相对于第一个的还按照原来的设计即可。

重现方式：

image.png

RTL显示：

image.png

如何解决

image.png

ConstraintLayout约束布局的坑点三

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layoutDirection="locale"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/tv1"
        android:text="sss1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:background="#fcc"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"

        app:layout_constraintStart_toStartOf="parent"
        />

    <!--
        此种错误的原因也是: 布局1依赖布局2(其中的layout_constraintEnd_toStartOf约束),
        而布局2又依赖布局1(layout_constraintStart_toEndOf布局2似乎完全悬空), 所以不知道怎么绘制了.
        这个非常类似View的测量, ViewGroup依赖View的测量,而View又依赖ViewGroup的测量,导致测量不准确

        错误1: LTR, 修改width = 0dp, tv2完全消失
        错误2: RTL, 布局乱掉

        修正: 删除tv2的约束layout_constraintEnd_toStartOf即可.
    -->

    <Button
        android:id="@+id/tv2"
        android:text="sss2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:background="#f00"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"

        app:layout_constraintStart_toEndOf="@id/tv1"
        app:layout_constraintEnd_toStartOf="@id/tv3"
        />

    <Button
        android:id="@+id/tv3"
        android:text="sss3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cff"
        android:textAppearance="@style/TextAppearance.AppCompat.Display2"

        app:layout_constraintStart_toEndOf="@id/tv2"
        />

</android.support.constraint.ConstraintLayout>

上面布局的预览图：

image.png

错误1：重现图

image.png

错误2：重现图

image.png

修正图：

image.png

英阿混用文案场景说明

1. 不管是LTR还是RTL, 阿拉伯语在Android的显示都会倒置过来.
2. RTL中, 一系列的英文单词会被整体看成一个阿拉伯语字符看待.
3. RTL中, 英文标点符号会被当做阿拉伯语字符, 一个符号代表一个字符. 除非英文标点符号位于英文单词【之间】。前后的则仍然当做阿拉伯语.
4. LTR中, 显示顺序和我们阅读顺序一致, 但是阿拉伯语会被当做一个整体(倒置,在阿拉伯人看来是正确的顺序).和上面2同理.

Bidi算法

在双向字符集语言中，标点符号的处理是 BiDi 算法中一个需要特别关注的地方。在 BiDi 中，所有的非标点符号被称为“强”字符。而标点符号既可以是从左向右 LTR 也可以是从右向左 RTL。因为不含任何的方向信息，所以被称为“弱”字符。通常是由软件根据 BiDi 算法来决定标点符号放置的方向。

在 BiDi 算法中，如果标点符号放在两段有相同方向文字的中间，标点符号将继承相同的方向。如果标点符号放在两段有不同方向的文字中间，标点符号将继承全局方向。

当需要输入英文字符的时候，计算机将自动处理英文字符的显示，将先输入的字符自动向左边排，后输入的字符显示在前面字符的右侧，将先输入的文字顶到了左侧，而录入光标将一直停留在英文录入的最右侧，依次处理随后的文字录入，并显示。这样录入者就不用关心这段英文文字将占据多大空间，而且英文内容保持了从左到右（LTR）的方向。 当用户需要输入阿拉伯文字的时候，阿拉伯字符将自动放置到英文内容的左侧，录入光标也跟随到了阿拉伯字符的左侧，开始正常的从右到左（RTL）的录入，并显示。

官方指南

https://material.io/design/usability/bidirectionality.html#implementation

参考

https://segmentfault.com/a/1190000003781294#articleHeader2
https://www.cnblogs.com/dojo-lzz/p/4289423.html
https://blog.csdn.net/candyguy242/article/details/8476093

还有很多未知的坑...