Question

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

enter image description here

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

无论如何要实现这个目标吗？

提前致谢。

Answer 1

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

enter image description here

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

不要批评我的代码。它只是没有真正的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>

在活动中设置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

1 个答案:

CustomShapeLeft.class：

CustomShapeRight.class：

Layout.xml：