java - 以编程方式添加到自定义 View 持有者的自定义 View 实例具有错误的位置和大小

Question

我有一个自定义 View (扩展 View)，一个自定义 View 组(扩展 LinearLayout)应该包含我的自定义 View 的多个实例。初始化发生在 Fragment 中。我想要实现的是让自定义 View 实例在我的自定义 View 组中水平排列(它最终应该成为一个多 slider )。到目前为止我取得的成就:我可以将我的自定义 View 实例添加到我的自定义 View 组，但它们显示不正确 - 第一个实例(垂直条)显示正确，后续条既不正确定位也不正确宽度(见屏幕截图)。

来自查询值，例如 getX()、getWidth()、getLeft()、getRight()对于我的自定义 View 实例，我没有得到任何提示有什么问题 - 报告的值表明 slider 的布局和位置正确。

---

涉及到3个自定义类:

fragment

public class MultiSliderFragment extends MSBaseFragment {
    private final static String TAG = "MultiSliderFragment";
    private MultiSliderView mMSView;

    public MultiSliderFragment() {
        super();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View mMSContainer = inflater.inflate(R.layout.multislider_view, container, false);
        mMSView = (MultiSliderView) mMSContainer.findViewById(R.id.multislider_view);
        Bundle numsBundle = this.getArguments();
        ArrayList<Integer> sliderNums = numsBundle.getIntegerArrayList("nums");

        ArrayList<SliderBar> sliders = new ArrayList<>();
        assert sliderNums != null;
        for (int num : sliderNums) {
            SliderBar bar = new SliderBar(getActivity());
            bar.setNum(String.valueOf(num));
            sliders.add(bar);
        }

        int x = 0;
        for (SliderBar slider : sliders) {
            mMSViewLeft.addView(slider);
        }

        // sliders have to know their number
        // and the container view (MultiSliderView)
        // needs  know the dimensions of the screen
        setSliderProps(sliderNums);

        return mMSContainer;
    }

    private void setSliderProps(ArrayList<Integer> sliderNums) {
        MSApplication app = (MSApplication) getActivity().getApplication();
        Point screenDimensions = app.getDimensions();
        mMSView.setScreenDimensions(screenDimensions);
        mMSView.setSliderNums(sliderNums);
    }
}

持有 slider 的 ViewGroup

public class MultiSliderView extends LinearLayout {
    final static private String TAG = "MultiSliderView";
    private ArrayList<Integer> sliderNums;
    private Point screenDimensions;

    public MultiSliderView(Context context) {
        super(context);
        init(null, 0);
    }

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

    public MultiSliderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs, defStyleAttr);
    }

    private void init(AttributeSet attrs, int defStyleAttr) {
        this.setOrientation(LinearLayout.HORIZONTAL);
    }

    public void setSliderNums(ArrayList<Integer> sliderNums) {
        this.sliderNums = sliderNums;
    }

    public void setScreenDimensions(Point dimensions) {
        this.screenDimensions = dimensions;
    }

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

        int desiredWidth = getSuggestedMinimumWidth() + getPaddingLeft() + getPaddingRight();
        int desiredHeight = getSuggestedMinimumHeight() + getPaddingTop() + getPaddingBottom();

        int measureWidth = measureDimension(desiredWidth, widthMeasureSpec);
        int measureHeight = measureDimension(desiredHeight, heightMeasureSpec);
        setMeasuredDimension(measureWidth, measureHeight);
    }

    private int measureDimension(int desiredSize, int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            result = desiredSize;
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }

        if (result < desiredSize) {
            Log.e(TAG, "The view is too small, the content might get cut");
        }
        return result;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        Log.d(TAG, "MultiSliderView on layout: " + left + ", " + top + ", " + right + ", " + bottom);
        int barWidth = getMeasuredWidth()/sliderNums.size();
        int barHeight = getMeasuredHeight();
        int x = 0;
        for (int i = 0; i < getChildCount(); i++) {
            SliderBar child = (SliderBar) getChildAt(i);
            child.layout(x, 0, x + barWidth, barHeight);
            // increment x by barWidth, otherwise bars are laid out
            // on top of each other, each at position 0 within MultiSliderView
            x += barWidth;
        }
    }

    // manual interaction with the multislider (stub)
    // must report to the regarding SliderBar instance to redraw the slider
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        performClick();
        this.getParent().requestDisallowInterceptTouchEvent(true);

        int tempTouchX = (int) event.getX();
        int tempTouchY = (int) event.getY();

        Log.d(TAG, "touch position: " + tempTouchX + ", " + tempTouchY);
        invalidate();
        return true;
    }

    @Override
    public boolean performClick() {
        super.performClick();
        return false;
    }

滑动条

public class SliderBar extends View {

    final static String TAG = "SliderBar";
    Paint mPaint;
    Canvas mCanvas;
    String pixelNum;
    Typeface typeFace = Typeface.create("sans-serif-light", Typeface.NORMAL);
    int left, top, right, bottom;
    Rect mArea = new Rect(left, top, right, bottom);
    int touchY;

    public SliderBar(Context context) {
        super(context);
        init(null, 0);
    }

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

    public SliderBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCanvas = new Canvas();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.d(TAG, "slider bar on draw: " + left + ", " + top + ", " + right + ", " + bottom);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(0x66000000);
        if (touchY <= top) touchY = top;
        if (touchY > bottom) touchY = bottom;
        canvas.drawRect(left, touchY, right, bottom, mPaint);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setTypeface(typeFace);
        mPaint.setTextSize((float) 30);
        mPaint.setColor(0xffffffff);
        canvas.drawText(pixelNum, right/2, bottom - 20, mPaint);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        this.setLeft(left);
        this.setTop(top);
        this.setRight(right);
        this.setBottom(bottom);
        // reports the right values but sliders aren't positioned correctly
        Log.d(TAG, "slider position: " + this.getLeft() + ", " + this.getRight());
        this.left = left;
        this.top = top;
        this.right = right;
        this.bottom = bottom;
    }

    public void setNum(String num) {
        this.pixelNum = num;
    }
}

最后但同样重要的是:包含 MultiSliderView 的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/multislider_view"
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:animateLayoutChanges="true"
          android:baselineAligned="false">

<net.myapp.views.MultiSliderView
    android:id="@+id/multislider_view_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="10dp"
    android:layout_marginEnd="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="5dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="10dp"
    android:background="@android:color/holo_blue_dark"
    android:orientation="horizontal"/>

</LinearLayout>

我认为让 MultiSliderView 继承自 LinearLayout 将允许我将我的 slider 放置在水平行中，即使没有给它们一个水平位置。然而，事实并非如此 - 只需将它们的 x 位置设置为 0 即可将它们放在位置 0 的彼此之上。我在定位 slider 时有什么明显的错误吗？

谢谢

Answer 1

这就是我使用您的代码并在某些地方修补它的结果(Application类中的 getDimension() 将返回当前Window的 widthPixels 和 heightPixels ”使用DisplayMetrics):

到目前为止我的改变:

1 有时我在onLayout()的MultiSliderView中得到一个 NPE，因为View在数字ArrayList传入之前已启动并运行。所以我添加了一个null checkin onLayout()以及invalidate();作为setSliderNums()的最后一行

2 SliderBar 的位置似乎很好(使用 LayoutInspector 检查)，但大多数数字不可见。我想他们应该出现在他们的SliderBar中间(如果我错了，请跳过这一点)。

您绘制数字的代码:

canvas.drawText(pixelNum, right/2, bottom - 20, mPaint);

这是行不通的，因为 left、top 等的值是相对于父级ViewGroup的值，但是您在相对于子级Canvas的坐标中绘制View。所以我将行更改为

canvas.drawText(pixelNum, (right - left)/2, bottom - 20, mPaint);

3 同样，setX()似乎并不像您预期​​的那样工作(“简单地将它们的 x 位置设置为 0 只是将它们放在位置 0 的顶部”)，所以让我试着解释一下它的作用:

与setX()和setY()一起使用的值是相对于包含所讨论的ViewGroup的父级View而言的。因此，如果您说view.setX(0);，则View将绘制在其父级ViewGroup的左边缘。

4 在onLayout()的SliderBar中，没有必要通过调用this.setLeft(left);等来设置left, top,... 值。在此方法，View被告知已经对这些变量进行了更改。所以我跳过了四行多余的代码。

5 我不太明白的是你试图通过onDraw()中的SliderBar中的以下两行实现什么:

if (touchY <= top) touchY = top;

if (touchY > bottom) touchY = bottom;

基本上他们所做的就是将 touchY 的值设置为 bottom 如果开头是touchY > bottom(假设是top > bottom)并离开 touchY 如果开头是touchY <= bottom，则单独。

现在的情况是，在大多数情况下生成的矩形是一维的。

所以我想知道此时应该发生什么。