android - 自动调整两个 TextView 的大小以显示尽可能多的内容

标签 android textview android-linearlayout

水平方向的线性布局内有两个 TextView 。

左文本 |右文字

目标是充分利用屏幕空间并尽可能多地显示两个文本值。如果文本超过 textview 大小，则应使用省略号将其截断。如果其中一个很短，另一个应该扩展到剩余的大小。

例如

  1. 输入 - 短 |短
    预期输出短|短

  2. 输入 - 短 |龙龙龙龙
    预期输出短|长...

  3. 输入 - LongLongLongLong |短
    预期输出 LongLong...|Short

  4. 输入 - LongLongLongLong |龙龙龙龙
    预期输出 LongLong...|LongLong...

我尝试创建一个自定义 View AutoSizingTextLayout(扩展 LinearLayout)，它由两个初始相等布局权重 = 1 的自定义 TextView 组成。我为第二个 TextView (右侧的一个)添加了一个 onDrawListener。一旦第二个 TextView 完成绘制，我就会根据被截断的文本调整权重。

此逻辑有效但不可靠。在某些运行中，它运行完美，但大多数时候，第一个 TextView 会占据整个屏幕。

我在下面粘贴了我的代码的相关部分。有什么需要处理的吗？有更优雅的解决方案吗？ PS:此自定义 View 正在列表回收器 View 中使用。

public class AutoSizingTextLayout extends LinearLayout implements 
AutoSizingTextView.AutoSizingTextViewDrawListener {

@BindView(R.id.start_text_view)
AutoSizingTextView mStartTextView;

@BindView(R.id.end_text_view)
AutoSizingTextView mEndTextView;

private volatile boolean adjusted = false;

//Constructors

@Override
public void onDraw() {
    if (!adjusted) {
        adjustWeights();
    }
}

public void setStartViewText(String startText) {
    mStartTextView.setText(startText);
}

public void setEndViewText(String endText) {
    adjusted = false;
    mEndTextView.setText(endText);
}

private void initView(AttributeSet attrs) {
    LayoutInflater inflater = LayoutInflater.from(getContext());
    inflater.inflate(R.layout.auto_sizing_text_layout, this);
    ButterKnife.bind(this);
    mEndTextView.setDrawListener(this);
}

private void adjustWeights() {
    boolean startTextHasEllipses = hasEllipses(mStartTextView);
    boolean endTextHasEllipses = hasEllipses(mEndTextView);

    ArrayList<AutoSizingTextView> viewsToUpdate = new ArrayList<>();

    if (startTextHasEllipses && endTextHasEllipses) {
        //Both are truncated. Do nothing.
    } else if (startTextHasEllipses) {
        // Starting text is truncated. End text is not truncated. Give more weight to starting text.
        viewsToUpdate.add(mEndTextView);
    } else if (endTextHasEllipses) {
        // Starting text is not truncated. End text is truncated. Give more weight to ending text.
        viewsToUpdate.add(mStartTextView);
    } else {
        // Both are not truncated. Set it to wrap content.
        viewsToUpdate.add(mStartTextView);
        viewsToUpdate.add(mEndTextView);
    }
    updateView(viewsToUpdate);
}

private void updateView(List<AutoSizingTextView> viewsToUpdate) {
    for (AutoSizingTextView viewToUpdate : viewsToUpdate) {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)
                viewToUpdate.getLayoutParams();
        params.width = LinearLayout.LayoutParams.WRAP_CONTENT;
        params.weight = 0.0F;
        adjusted = true;
        viewToUpdate.setLayoutParams(params);
    }
    this.requestLayout();
}

private static boolean hasEllipses(TextView textView) {
    Layout layout = textView.getLayout();
    if (layout != null) {
        int lines = layout.getLineCount();
        if (lines > 0) {
            if (layout.getEllipsisCount(lines - 1) > 0) {
                return true;
            }
        }
    }
    return false;
}

}

//自定义 TextView 

class AutoSizingTextView extends 
android.support.v7.widget.AppCompatTextView {

private AutoSizingTextViewDrawListener mDrawListener;

//Constructors

public void setDrawListener(AutoSizingTextViewDrawListener drawListener) {
    mDrawListener = drawListener;
}

public interface AutoSizingTextViewDrawListener {
    void onDraw();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (mDrawListener != null) {
        mDrawListener.onDraw();
    }
}
}

//auto_sizing_text_layout.xml

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">

<AutoSizingTextView
    android:id="@+id/start_text_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:maxLines="1"
    android:ellipsize="end"/>

<AutoSizingTextView
    android:id="@+id/end_text_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:maxLines="1"
    android:ellipsize="end"/>

最佳答案

我想下面是预期的结果。

enter image description here

我为此写了一个简单的ViewGroup。当然，它并不完美。它只是证明它是可以实现的。相应地修改此代码。我已经覆盖了 onLayout() ViewGroup 的方法，我在其中计算 subview 所需的大小并相应地布置它们。此 WeirdView 包含三个 TextView，分别用于(左侧文本、分隔符和右侧文本)。

package com.example.abhinav.textviewexample;

import android.content.Context;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by abhinav on 16/04/18.
 */

public class WeirdView extends ViewGroup {

    private TextView mLeftTV;
    private TextView mSeparatorTV;
    private TextView mRightTV;

    public WeirdView(Context context) {
        this(context, null, 0);
    }

    public WeirdView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WeirdView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        mLeftTV = new TextView(context);
        mSeparatorTV = new TextView(context);
        mRightTV = new TextView(context);

        mLeftTV.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        mSeparatorTV.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        mRightTV.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        addView(mLeftTV);
        addView(mSeparatorTV);
        addView(mRightTV);
    }

    public TextView getLeftTextView() {
        return mLeftTV;
    }

    public TextView getSeparatorTextView() {
        return mSeparatorTV;
    }

    public TextView getRightTextView() {
        return mRightTV;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // super.onLayout(changed, l, t, r, b);

        final int childLeft = this.getPaddingLeft();
        final int childTop = this.getPaddingTop();
        final int childRight = this.getMeasuredWidth() - this.getPaddingRight();
        final int childBottom = this.getMeasuredHeight() - this.getPaddingBottom();
        final int availableWidth = childRight - childLeft;
        final int availableHeight = childBottom - childTop;

        mLeftTV.measure(MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(availableHeight, MeasureSpec.AT_MOST));
        mSeparatorTV.measure(MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(availableHeight, MeasureSpec.AT_MOST));
        mRightTV.measure(MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(availableHeight, MeasureSpec.AT_MOST));

        // case: |blabla > blablabla         |
        // case: |blablablablablabla > bla   |
        // case: |bla > blablablablablablab..|
        if ((mLeftTV.getMeasuredWidth() + mSeparatorTV.getMeasuredWidth() + mRightTV.getMeasuredWidth() <= availableWidth)
                || (mLeftTV.getMeasuredWidth() <= availableWidth / 2)) {
            int left = childLeft;
            mLeftTV.layout(left, childTop, left + mLeftTV.getMeasuredWidth(), childBottom);
            left += mLeftTV.getMeasuredWidth();
            mSeparatorTV.layout(left, childTop, left + mSeparatorTV.getMeasuredWidth(), childBottom);
            left += mSeparatorTV.getMeasuredWidth();
            mRightTV.layout(left, childTop, childRight, childBottom);
            mRightTV.setWidth(childRight - left);
        }
        // case: |blablablablablabla.. > blab|
        else if (mRightTV.getMeasuredWidth() <= availableWidth / 2) {
            int left = childLeft;
            mLeftTV.layout(left, childTop, childRight - mSeparatorTV.getMeasuredWidth() - mRightTV.getMeasuredWidth(), childBottom);
            mLeftTV.setWidth(childRight - mSeparatorTV.getMeasuredWidth() - mRightTV.getMeasuredWidth() - left);
            left += mLeftTV.getWidth();
            mSeparatorTV.layout(left, childTop, mSeparatorTV.getMeasuredWidth(), childBottom);
            left += mSeparatorTV.getMeasuredWidth();
            mRightTV.layout(left, childTop, mRightTV.getMeasuredWidth(), childBottom);
        }
        // case: |blablabla.. > blablablabl..|
        else {
            int left = childLeft;
            mLeftTV.layout(left, childTop, left + availableWidth / 2 - mSeparatorTV.getMeasuredWidth() / 2, childBottom);
            mLeftTV.setWidth(availableWidth / 2 - mSeparatorTV.getMeasuredWidth() / 2);
            left += (availableWidth / 2 + mSeparatorTV.getMeasuredWidth() / 2);
            mSeparatorTV.layout(left, childTop, left + mSeparatorTV.getMeasuredWidth(), childBottom);
            left += mSeparatorTV.getMeasuredWidth();
            mRightTV.layout(left, childTop, childRight, childBottom);
            mRightTV.setWidth(childRight - left);
        }
    }
}

关于android - 自动调整两个 TextView 的大小以显示尽可能多的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49860657/

上一篇：android - 按下主页按钮并重新打开应用程序后 MediaPlayer 出现 NullPointerException

下一篇：javascript - 在 android Webview 中添加 ReactJS

相关文章：

Android加密编辑文本输入

android - android中 `click event`被认为是什么？

Android TextView 不在 ListView 中做换行(多行文本)

java - 日历，区 block 年

android - 我无法在框架布局内移动按钮

android - 以编程方式设置后获取奇怪的字体大小

java - Android View 添加 child

android - Android 中带有 layout_weight 的线性布局中的无边框按钮

Android 线性/相对布局 - 如何将 "auto size"对象放在中间(3 个对象)

android - setContentView() 不起作用

©2024 IT工具网  联系我们