Question

我正在努力达到这个结果：

我现在拥有的是ConstraintLayout，其中包括三个Views：TextView，ImageView，ImageView

设计要求：

文本在TextView内居中；
TextView的大小固定为80dp
文本大小应为AutoSizeable；
ImageViews应根据TextView内的文本位置水平更改位置。请参阅案例＃1 /＃2的图像以供参考。

是否可以用XML实现第4项？ 以编程方式呢？

[其他信息]

宽度为wrap_content的自动调整功能无法正常使用，请参见autosizing documentation：

注意：如果在XML文件中设置了自动调整大小，则不建议对TextView的layout_width或layout_height属性使用值“ wrap_content”。可能会产生意外的结果。

Answer 1

因此，在调查后发现了两种解决方案：

计算文本宽度并向ImageView s施加水平偏差；
自定义文本视图-AutoResizeTextView;

在第一种情况下，我们在width中获得了实际的TextView文本：

Rect bounds = new Rect();
textView.getPaint().getTextBounds(textView.getText().toString(), 0, textView.getText().length(), bounds);
float width = bounds.width();

然后应用简单的数学计算horizontal bias的{{1}}。

第二个选项是添加自定义视图。它与autosizing-textview不同。在ImageView中进行测量后，它将调整文本大小。在onLayout中，我们将重置文本大小而不调整大小。省略它是一项附加功能，在某些情况下可能会有用。

onTextChanged

代码源：https://gist.github.com/chathudan/61fd2f6e5919738d7821

Answer 2

尝试调整一些设置值以调整大小以适合您的应用程序，我仅使用xml就达到了这种外观。

这些图像是游戏对象，我从您的原始图像中删除了这些图像。我利用了约束布局和相对布局。文本响应大小调整和旋转。

垂直视图

水平视图

小文本

大文本

当然可以根据您的需要调整大小。

    <?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.yvettecolomb.myapplication.MainActivity"
    tools:showIn="@layout/activity_main">


    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="10dp"
        android:padding="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:autoSizeTextType="uniform"
            android:gravity="center"
            android:padding="2dp"
            android:text="TEST"/>

        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_margin="-10dp"
            android:layout_toLeftOf="@+id/tv1"
            android:src="@drawable/a"/>

        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_toRightOf="@+id/tv1"
            android:src="@drawable/b"/>


        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_below="@+id/tv1"
            android:layout_margin="-10dp"
            android:layout_toLeftOf="@+id/tv2"
            android:src="@drawable/c"/>

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:autoSizeTextType="uniform"
            android:gravity="center"
            android:padding="2dp"
            android:text="test test test test test"/>

        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_below="@+id/tv1"
            android:layout_toRightOf="@+id/tv2"
            android:src="@drawable/d"/>
    </RelativeLayout>


</android.support.constraint.ConstraintLayout>

Answer 3

使用AppCompatTextView。更改autoSizeMaxTextSize，autoSizeMinTextSize和autoSizeStepGranularity值。

                    <RelativeLayout
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/rl_flashcard_back"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <android.support.v7.widget.AppCompatTextView
                        android:id="@+id/tv_text"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_centerInParent="true"
                        android:gravity="center"
                        app:autoSizeMaxTextSize="16sp"
                        app:autoSizeMinTextSize="8sp"
                        app:autoSizeStepGranularity="1sp"
                        app:autoSizeTextType="uniform"
                        />

android.support.v7.widget.AppCompatTextView tv_text = mRootView.findViewById(R.id.tv_text);

https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview

如何将View与TextView中的文本垂直对齐？

3 个答案: