滚动自定义视图 - Android

Question

下面是我需要制作的菜单图片。

我在自定义视图中使用 canvas 绘制了三角形。我还需要滚动此菜单，当在滚动视图中添加自定义视图时，它会将每个视图视为一个矩形项目，不允许像这样绘制三角形。

有没有办法实现这个？

提前致谢。

Answer 1

首先您必须创建 2 个自定义视图，使用不同的三角形绘制。然后在您的 RelativeLayout 或另一个中创建这些三角形并设置负值 margin_top 以正确显示，就像我的示例：

所以，现在让我们看一下代码。

不要批评我的代码。这只是没有真正的 OOP 结构的例子:)

CustomShapeLeft.class:

/**
 * Created by gigamole on 07.02.15.
 */
public class CustomShapeLeft extends RelativeLayout {
    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

int backgroundColor;
int viewWidth; // width of parent(CustomShape layout)
int viewHeight;

public CustomShapeLeft(Context context) {
    super(context);
    this.setWillNotDraw(false);
}

public CustomShapeLeft(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.setWillNotDraw(false);

    TypedArray ta = context.obtainStyledAttributes(attrs, new int[]{android.R.attr.background});
    this.backgroundColor = ((ColorDrawable) ta.getDrawable(0)).getColor();

    this.setBackgroundColor(Color.TRANSPARENT);
}

public CustomShapeLeft(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    this.setWillNotDraw(false);
}

@Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
    super.onSizeChanged(xNew, yNew, xOld, yOld);

    viewWidth = xNew;
    viewHeight = yNew;
}

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

Path path = new Path();
Point[] points = new Point[3];

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    paint.setColor(backgroundColor);
    paint.setStyle(Paint.Style.FILL);

    points[0] = new Point(0, 0);
    points[1] = new Point(viewWidth, (viewHeight / 2));
    points[2] = new Point(0, (viewHeight));

    path.setFillType(Path.FillType.EVEN_ODD);
    path.moveTo(points[0].x, points[0].y);
    path.lineTo(points[1].x, points[1].y);
    path.lineTo(points[2].x, points[2].y);
    path.close();

    canvas.drawPath(path, paint);
}

public boolean isTouched(final float X, final float Y){
    final Polygon p = new Polygon(points);
    return p.contains(X, Y);
}

}

方法isTouched() 需要知道用户何时点击形状，而不是点击 View, 因为当最后点击时，采取正确的行动是有问题的，因为他们像层层一样躺下-层系统。

此方法获取水龙头的位置并计算是否在形状上。按照您的方式，您将没有 onClickListener，只有 onTouchListener.

CustomShapeRight.class:

它们几乎相似，但绘制方法不同：

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        paint.setColor(backgroundColor);
        paint.setStyle(Paint.Style.FILL);

        points[0] = new Point(viewWidth, 0);
        points[1] = new Point(0, (viewHeight / 2));
        points[2] = new Point(viewWidth, (viewHeight));

        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(points[0].x, points[0].y);
        path.lineTo(points[1].x, points[1].y);
        path.lineTo(points[2].x, points[2].y);
        path.close();

        canvas.drawPath(path, paint);
    }

Layout.xml:

<null_anal.customshape.CustomShapeLeft
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_1"
    android:background="@android:color/holo_red_dark">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="MEN"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeLeft>

<null_anal.customshape.CustomShapeRight
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_2"
    android:layout_marginTop="-36dp"
    android:background="@android:color/holo_orange_dark"
    android:layout_below="@+id/triangle_1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:layout_alignParentRight="true"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="HOME"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeRight>

<null_anal.customshape.CustomShapeLeft
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_3"
    android:layout_marginTop="-36dp"
    android:background="@android:color/holo_purple"
    android:layout_below="@+id/triangle_2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="WOMEN"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeLeft>

<null_anal.customshape.CustomShapeRight
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_4"
    android:layout_marginTop="-36dp"
    android:background="@android:color/holo_green_dark"
    android:layout_below="@+id/triangle_3">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:layout_alignParentRight="true"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="ART"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeRight>

<null_anal.customshape.CustomShapeLeft
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_5"
    android:layout_marginTop="-36dp"
    android:background="@android:color/holo_blue_dark"
    android:layout_below="@+id/triangle_4">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="KIDS"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeLeft>

<null_anal.customshape.CustomShapeRight
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:id="@+id/triangle_6"
    android:layout_marginTop="-36dp"
    android:background="@android:color/holo_blue_bright"
    android:layout_below="@+id/triangle_5">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:textSize="22dp"
        android:layout_alignParentRight="true"
        android:padding="5dp"
        android:textColor="@android:color/black"
        android:text="MUSIC"
        android:background="@android:color/transparent"/>

</null_anal.customshape.CustomShapeRight>

并在 activity 中设置它们 onTouchListener():

CustomShapeRight customShapeRight = (CustomShapeRight) findViewById(R.id.triangle_6);
        customShapeRight.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (((CustomShapeRight)v).isTouched(event.getX(), event.getY())) {
                    Toast.makeText(getApplicationContext(), ((TextView)((CustomShapeRight) v).getChildAt(0)).getText(), Toast.LENGTH_SHORT).show();
                }

                return false;
            }
        });

还有所有。我希望这会对您有所帮助，并且在您的布局中删除项目 "X" 项目，您将单独处理它。并感谢很酷的问题。喜欢它。

滚动自定义视图 - Android

Scrolling the custom views - Android

android

scrollview

CustomShapeLeft.class:

CustomShapeRight.class:

Layout.xml: