web-dev-qa-db-ja.com

EditTextの自動サイズ

Androidは最近、ビューサイズと最小および最大テキストサイズに基づいてTextViewのテキストサイズを変更するためのサポートを追加しました。
https://developer.Android.com/guide/topics/ui/look-and-feel/autosizing-textview.html

残念ながら、それらはEditTextをサポートしていません。そのため、EditTextの代替手段は他にありますか？

androidandroid-edittextautosize
16
Ahmed Hegazy

EditTextはTextViewの子ですが、自動サイズ調整をサポートしていません。

私はある種のハックでこれを達成しました。最初にEditViewViewに拡張機能として（Kotlinで）コピーして実装するTextViewコードを見ましたが、メソッドが大量にあるため、最後にそのオプションを破棄しました。

私がしていることは、非表示のTextViewを使用することです（はい、私は完全なハックであることを知っています。これにはあまり満足していませんが、Googleはこれについて恥ずかしいはずです）

これは私のxmlです

    <TextView Android:id="@+id/invisibleTextView"
    Android:layout_height="0dp"
    Android:layout_width="match_parent"
    Android:focusable="false"
    app:autoSizeTextType="uniform"
    app:autoSizeMinTextSize="@dimen/text_min"
    app:autoSizeMaxTextSize="@dimen/text_max"
    app:autoSizeStepGranularity="@dimen/text_step"
    Android:textAlignment="center"
    app:layout_constraintLeft_toLeftOf="@id/main"
    app:layout_constraintRight_toRightOf="@id/main"
    app:layout_constraintTop_toBottomOf="@id/textCount"
    app:layout_constraintBottom_toBottomOf="@id/main"
    Android:visibility="invisible"
    tool:text="This is a Resizable Textview" />


<EditText Android:id="@+id/resizableEditText"
    Android:layout_height="0dp"
    Android:layout_width="match_parent"
    Android:textAlignment="center"
    app:layout_constraintLeft_toLeftOf="@id/main"
    app:layout_constraintRight_toRightOf="@id/main"
    app:layout_constraintTop_toBottomOf="@id/textCount"
    app:layout_constraintBottom_toBottomOf="@id/main"
    Android:maxLength="@integer/max_text_length"
    tool:text="This is a Resizable EditTextView" />

注：両方のビューの幅/高さが同じであることが重要です

次に、私のコードで、このTextViewの自動計算を使用してEditTextViewで使用します。

private fun setupAutoresize() {
    invisibleTextView.setText("a", TextView.BufferType.EDITABLE) //calculate the right size for one character
    resizableEditText.textSize = autosizeText(invisibleTextView.textSize)
    resizableEditText.setHint(R.string.text_hint)

    resizableEditText.addTextChangedListener(object : TextWatcher {
        override fun afterTextChanged(editable: Editable?) {
            resizableEditText.textSize = autosizeText(invisibleTextView.textSize)
        }

        override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

        override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
            textCount.text = currentCharacters.toString()
            val text = if (s?.isEmpty() ?: true) getString(R.string.text_hint) else s.toString()
            invisibleTextView.setText(text, TextView.BufferType.EDITABLE)
        }
    })
}

private fun autosizeText(size: Float): Float {
    return size / (resources.displayMetrics.density + MARGIN_FACTOR /*0.2f*/)
}

注意として、ヒントのサイズを変更するには、これを使用します Android EditText Hint Size 。

私はそれが難しい回避策であることを知っていますが、少なくとも、将来のバージョンでサイズ変更可能な変更があった場合でもこれは引き続き機能し、プロペタリーまたは放棄されたgithub libは失敗します。

私はいつかグーグルが私たちに聞いて、この素晴らしい機能を子供たちに実装することを願っています、そして私たちはこのすべてのものを避けることができました

お役に立てれば

6
Sulfkain

このライブラリは以下に基づいています：

AutoFitTextView https://github.com/ViksaaSkool/AutoFitEditText これを試してください

2
Libin Thomas

私のAutoSizeEditTextを試すことができます：

   /**
 * Wrapper class for {@link EditText}.
 * It helps to achieve auto size behaviour which exists in {@link AppCompatTextView}.
 * The main idea of getting target text size is measuring {@link AppCompatTextView} and then
 * extracting from it text size and then applying extracted text size to target {@link EditText}.
 */
public class AutoSizeEditText extends FrameLayout {

    private static final String TEST_SYMBOL = "T";

    private static final boolean TEST = false;

    /**
     * Vertical margin which is applied by default in {@link EditText} in
     * comparison to {@link AppCompatTextView}
     */
    private static final float VERTICAL_MARGIN = convertDpToPixel(4);

    /**
     * {@link TextMeasure} which helps to get target text size for {@link #wrappedEditTex}
     * via its auto size behaviour.
     */
    @NonNull
    private final TextMeasure textMeasurer;

    /**
     * {@link AppCompatEditText} we want to show to the user
     */
    @NonNull
    private final EditText wrappedEditTex;

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

    public AutoSizeEditText(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AutoSizeEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // don't clip children
        setClipChildren(false);
        setClipToOutline(false);
        setClipToPadding(false);

        // using AttributeSet of TextView in order to apply it our text views
        wrappedEditTex = createWrappedEditText(context, attrs);

        textMeasurer = createTextMeasure(context, attrs, wrappedEditTex);

        addView(wrappedEditTex, new FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));

        addView(textMeasurer, new FrameLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
    }

    @NonNull
    private TextMeasure createTextMeasure(Context context, AttributeSet attrs, EditText editText) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.AutoSizeEditText);
        final int minSize = (int) typedArray.getDimension(R.styleable.AutoSizeEditText_autoSizeMinTextSize, convertDpToPixel(10));
        final int maxSize = (int) typedArray.getDimension(R.styleable.AutoSizeEditText_autoSizeMaxTextSize, convertDpToPixel(18));
        final int step = (int) typedArray.getDimension(R.styleable.AutoSizeEditText_autoSizeStepGranularity, convertDpToPixel(1));
        typedArray.recycle();

        TextMeasure textMeasurer = new TextMeasure(context);
        final Editable text = editText.getText();
        final CharSequence hint = editText.getHint();
        if (!TextUtils.isEmpty(text)) {
            textMeasurer.setText(text);
        } else if (!TextUtils.isEmpty(hint)) {
            textMeasurer.setText(hint);
        } else {
            textMeasurer.setText(TEST_SYMBOL);
        }

        TextViewCompat.setAutoSizeTextTypeUniformWithConfiguration(
                textMeasurer, minSize, maxSize, step, TypedValue.COMPLEX_UNIT_PX);

        textMeasurer.setVisibility(View.INVISIBLE);
        textMeasurer.setPadding(0, 0, 0, 0);
        if (TEST) {
            textMeasurer.setTextColor(Color.RED);
            final ColorDrawable background = new ColorDrawable(Color.YELLOW);
            background.setAlpha(50);
            textMeasurer.setBackground(background);
            textMeasurer.setAlpha(0.2f);
            textMeasurer.setVisibility(View.VISIBLE);
        }
        return textMeasurer;
    }

    /**
     * Creating {@link EditText} which user will use and see
     *
     * @param attrs {@link AttributeSet} which comes from most likely from xml, which can be user for {@link EditText}
     *              if attributes of {@link TextView} were declared in xml
     * @return created {@link EditText}
     */
    @NonNull
    protected EditText createWrappedEditText(Context context, AttributeSet attrs) {
        return new AppCompatEditText(context, attrs);
    }

    @NonNull
    public EditText getWrappedEditTex() {
        return wrappedEditTex;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        wrappedEditTex.measure(
                MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));

        final int targetHeight = (int) (height
                - VERTICAL_MARGIN * 2
                - wrappedEditTex.getPaddingTop()
                - wrappedEditTex.getPaddingBottom());

        final int targetWidth = (width
                - wrappedEditTex.getTotalPaddingStart()
                - wrappedEditTex.getTotalPaddingEnd());

        textMeasurer.measure(
                MeasureSpec.makeMeasureSpec(targetWidth, MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(targetHeight, MeasureSpec.EXACTLY)
        );

        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        final int layoutHeight = getMeasuredHeight();
        final int layoutWidth = getMeasuredWidth();

        wrappedEditTex.layout(0, 0, layoutWidth, layoutHeight);

        if (changed) {
            final int measuredHeight = textMeasurer.getMeasuredHeight();
            final int measuredWidth = textMeasurer.getMeasuredWidth();
            final int topCoordinate = (int) (wrappedEditTex.getPaddingTop() + VERTICAL_MARGIN);
            final int leftCoordinate = wrappedEditTex.getTotalPaddingStart();

            textMeasurer.layout(
                    leftCoordinate,
                    topCoordinate,
                    measuredWidth + leftCoordinate,
                    topCoordinate + measuredHeight);

            wrappedEditTex.setTextSize(TypedValue.COMPLEX_UNIT_PX, textMeasurer.getTextSize());
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        return wrappedEditTex.dispatchTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return wrappedEditTex.onTouchEvent(event);
    }

    /**
     * Adjust text size due to the fact we want hint to be always visible
     *
     * @param hint Hint for {@link #wrappedEditTex}
     */
    public void setHint(CharSequence hint) {
        wrappedEditTex.setHint(hint);
        textMeasurer.setText(hint);
    }

    /**
     * Adjust text size for TypeFace, because it can change calculations
     *
     * @param typeface for {@link #wrappedEditTex}
     */
    public void setTypeface(Typeface typeface) {
        wrappedEditTex.setTypeface(typeface);
        textMeasurer.setTypeface(typeface);
    }

    public void setTextColor(Integer textColor) {
        wrappedEditTex.setTextColor(textColor);
    }

    public void setHintTextColor(Integer hintTextColor) {
        wrappedEditTex.setHintTextColor(hintTextColor);
    }

    public void setText(CharSequence text) {
        wrappedEditTex.setText(text);
    }

    private static class TextMeasure extends AppCompatTextView {

        public TextMeasure(Context context) {
            super(context);
        }

        @Override
        public void setInputType(int type) {

        }

        @Override
        public void setRawInputType(int type) {

        }

        @Override
        public int getInputType() {
            return EditorInfo.TYPE_NULL;
        }

        @Override
        public int getMaxLines() {
            return 1;
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            return true;
        }

        @Override
        public int getMinLines() {
            return 1;
        }
    }
}

以下のように私のコンポーネントの使用例：

<androidx.constraintlayout.widget.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=".MainActivity">

    <com.vladislavkarpman.autosizeedittext.AutoSizeEditText
        Android:layout_width="300dp"
        Android:layout_height="100dp"
        app:autoSizeMaxTextSize="50dp"
        app:autoSizeMinTextSize="4dp"
        app:autoSizeStepGranularity="1dp"
        app:autoSizeTextType="uniform"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
0
Vlad