Question

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

从我的自定义视图实例查询getX()，getWidth()，getLeft()，getRight()等值时，我没有提示有什么问题 - 报告的值表明滑块是布置和定位得当。

涉及3个自定义类：

碎片

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);
    }
}

持有滑块的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允许我将滑块放在水平行中，即使没有给它们一个水平位置。然而，事实并非如此 - 简单地将其x位置设置为0只是将它们放在位置0的彼此之上。有没有明显的东西我在定位滑杆时做错了？

由于

Answer 1

这是我使用您的代码并在某些地方修补它的内容（Application类中的getDimension（）将返回当前的 widthPixels 和 heightPixels Window使用DisplayMetrics）：

到目前为止我的更改：

1 有时我会在onLayout() MultiSliderView内获得NPE，因为View在传递数字ArrayList之前已启动并运行所以我在null和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()的{{1}}中，无需通过调用{{1}来设置 left，top，... 值在此方法中，SliderBar被告知已经对这些变量进行的更改。所以我跳过了四条冗余线。

5 我真正理解的是您要通过this.setLeft(left);中View的以下两行来实现的目标：

if（touchY＆lt; = top）touchY = top;

if（touchY＆gt; bottom）touchY = bottom;

基本上他们所做的就是将 touchY 的值设置为 bottom ，如果onDraw()在开头（假设SliderBar）并且离开<如果touchY > bottom在开头，则单独使用em> touchY 。

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

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

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

1 个答案: