Android中如何制作传统蒙古文ListView

Question

如何在Android应用程序中为垂直蒙古文字制作水平滚动的ListView？

背景

Android 对世界上许多语言都有相当好的支持，甚至是阿拉伯语和希伯来语等 RTL 语言。然而，没有像传统蒙古语这样的对自上而下的语言的内置支持（在内蒙古仍然很活跃，不要与西里尔蒙古语混淆）。下图显示了文本方向，为清楚起见添加了英文。

由于此功能未内置于 Android 中，因此应用程序开发的几乎每个方面都变得极其困难。对于水平 ListView 来说尤其如此，Android 中不支持开箱即用的水平 ListView。网上提供的信息也非常非常少。有许多传统蒙古文的应用程序开发人员，但无论是出于商业原因还是其他原因，他们似乎都没有将其代码开源。

由于这些困难，我想提出一系列 StackOverflow 问题，这些问题可以作为收集与传统蒙古应用程序开发相关的一些更困难的编程问题的答案的中心位置。即使您不懂蒙古语，我们也将不胜感激您帮助审查代码、提出评论和问题、给出答案甚至对问题进行投票。

蒙古文垂直滚动ListView

蒙古文ListView需要满足以下要求：

• 从左向右水平滚动
• 触摸事件的工作方式与普通 ListView 相同
• 与普通 ListView 一样支持自定义布局

还需要支持蒙古文 TextView支持的所有内容：

• 支持传统蒙古文字体
• 从上到下垂直显示文本
• 换行是从左到右。
• 换行出现在空格处（与英语相同）

下图展示了蒙古文ListView应具备的基本功能：

我的答案如下，但我欢迎其他解决此问题的方法。

本系列其他相关问题：

• 如何在Android中制作传统蒙古文TextView
• 如何在Android中制作传统蒙古文EditText
• 更多内容即将推出...（Toast、对话框、菜单）

iOS：

• 如何在 Swift 中为 iOS 制作垂直文本 UILabel 和 UITextView？

Answer 1

更新

RecyclerView 具有水平布局。因此，将垂直蒙古文 TextView 放入其中之一相对容易。这是一个来自 的示例mongol-library。

有关使用 a制作水平滚动列表的一般解决方案，请参阅此答案。RecyclerView

旧答案

非常不幸的是，Android API 不提供水平 ListView。不过，有许多 StackOverflow 问答讨论了如何做到这一点。以下是几个示例：

• 如何在Android中制作水平ListView？
• Android 中的水平 ListView？

但当我真正尝试实施这些建议并合并蒙古竖排文本时，我度过了一段糟糕的时光。在我的搜索中，我发现了一个略有不同的答案。这是一个旋转整个布局的类。它是通过扩展 ViewGroup 来实现的。通过这种方式，任何东西（包括 ListView）都可以放入 ViewGroup 中并进行旋转。所有触摸事件也都有效。

正如我在关于蒙古文 TextViews 的回答中所解释的，仅仅旋转蒙古文文本是不够的。如果每个 ListView 项（或 ViewGroup 中的其他文本元素）只是一行就足够了，但旋转多行会使换行方向错误。但是，水平镜像布局并使用垂直镜像字体可以克服这个问题，如下图所示。

我调整了旋转的 ViewGroup 代码来执行水平镜像。

public class MongolViewGroup extends ViewGroup {

    private int angle = 90;
    private final Matrix rotateMatrix = new Matrix();
    private final Rect viewRectRotated = new Rect();
    private final RectF tempRectF1 = new RectF();
    private final RectF tempRectF2 = new RectF();
    private final float[] viewTouchPoint = new float[2];
    private final float[] childTouchPoint = new float[2];
    private boolean angleChanged = true;

    public MongolViewGroup(Context context) {
        this(context, null);
    }

    public MongolViewGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
        setWillNotDraw(false);
    }

    public View getView() {
        return getChildAt(0);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final View view = getView();
        if (view != null) {
            measureChild(view, heightMeasureSpec, widthMeasureSpec);
            setMeasuredDimension(resolveSize(view.getMeasuredHeight(), widthMeasureSpec),
                    resolveSize(view.getMeasuredWidth(), heightMeasureSpec));
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        if (angleChanged) {
            final RectF layoutRect = tempRectF1;
            final RectF layoutRectRotated = tempRectF2;
            layoutRect.set(0, 0, right - left, bottom - top);
            rotateMatrix.setRotate(angle, layoutRect.centerX(), layoutRect.centerY());
            rotateMatrix.postScale(-1, 1);
            rotateMatrix.mapRect(layoutRectRotated, layoutRect);
            layoutRectRotated.round(viewRectRotated);
            angleChanged = false;
        }
        final View view = getView();
        if (view != null) {
            view.layout(viewRectRotated.left, viewRectRotated.top, viewRectRotated.right,
                    viewRectRotated.bottom);
        }
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {

        canvas.save();
        canvas.rotate(-angle, getWidth() / 2f, getHeight() / 2f);
        canvas.scale(-1, 1);
        super.dispatchDraw(canvas);
        canvas.restore();
    }

    @Override
    public ViewParent invalidateChildInParent(int[] location, Rect dirty) {
        invalidate();
        return super.invalidateChildInParent(location, dirty);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        viewTouchPoint[0] = event.getX();
        viewTouchPoint[1] = event.getY();
        rotateMatrix.mapPoints(childTouchPoint, viewTouchPoint);
        event.setLocation(childTouchPoint[0], childTouchPoint[1]);
        boolean result = super.dispatchTouchEvent(event);
        event.setLocation(viewTouchPoint[0], viewTouchPoint[1]);
        return result;
    }


}

不过，蒙古文垂直镜像字体仍然需要在其他地方设置。我发现最简单的方法是创建一个自定义 TextView 来做到这一点：

public class MongolNonRotatedTextView extends TextView {

    // This class does not rotate the textview. It only displays the Mongol font.
    // For use with MongolLayout, which does all the rotation and mirroring.

    // Constructors
    public MongolNonRotatedTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public MongolNonRotatedTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MongolNonRotatedTextView(Context context) {
        super(context);
        init();
    }

    // This class requires the mirrored Mongolian font to be in the assets/fonts folder
    private void init() {
         Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
         "fonts/MongolMirroredFont.ttf");
         setTypeface(tf);

    }
}

然后自定义 ListView 项目 xml 布局可能如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rlListItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

        <com.example.MongolNonRotatedTextView
            android:id="@+id/tvListViewText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"/>

</RelativeLayout>

已知的问题：

• 如果仔细观察下图，您可以看到文本周围有淡淡的水平线和垂直线。尽管此图像来自另一个开发人员的应用程序，但当我使用旋转的 ViewGroup 时（但不是当我使用旋转的TextView时），我在应用程序中得到了相同的工件。如果有人知道这些来自哪里，请给我评论！

• 此解决方案不处理 Unicode 文本的渲染。您需要使用非 Unicode 文本（不鼓励），或者需要在应用程序中包含渲染引擎。（Android 目前不支持 OpenType smartfont 渲染。希望这种情况将来会改变。相比之下，iOS 支持复杂的文本渲染字体。）请参阅此链接以获取 Unicode 蒙古文渲染引擎示例。