1

我正在尝试制作一个具有如下背景的 Android 视图：
在此处输入图像描述

我发现最简单的方法是用不同的背景颜色制作两个相互叠加的形状：

在此处输入图像描述

每个元素的高度不同，所以我需要在代码中制作形状。
起初我已经开始在 xml 中快速查看结果。我已经使用这篇文章中的原则开始了，但我并没有真正接近任何有用的东西：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-60%"
            android:pivotY="50%" >
            <shape
                android:shape="rectangle">
                <solid
                    android:color="#FF00FF" />
            </shape>
        </rotate>
    </item>
</layer-list>


我该怎么做？
任何方向的线索都会被应用，



我已经在 iOS 中这样做了，但形状在 Android 中的工作方式不同：

self.view.backgroundColor = [self getEventColor];
CALayer *backgroundLayer = self.view.layer;

CAShapeLayer *mask = CAShapeLayer.new;
mask.frame = backgroundLayer.bounds;
mask.fillColor = [[UIColor blackColor] CGColor];

CGFloat width = backgroundLayer.frame.size.width;
CGFloat height = backgroundLayer.frame.size.height;

CGMutablePathRef path = CGPathCreateMutable();

int cornerCutSize = 20;
if (cornerCutSize > height)
    cornerCutSize = (int) height - 5;
CGPathMoveToPoint(path, NULL, 0, 0);
CGPathAddLineToPoint(path, nil, width, 0);
CGPathAddLineToPoint(path, nil, width, height - cornerCutSize);
CGPathAddLineToPoint(path, nil, width - cornerCutSize, height);
CGPathAddLineToPoint(path, nil, width, height);
CGPathAddLineToPoint(path, nil, 0, height);
CGPathAddLineToPoint(path, nil, 0, 0);
CGPathCloseSubpath(path);

mask.path = path;
CGPathRelease(path);

backgroundLayer.mask = mask;

UIColor *shadowColor = [[UIColor blackColor] colorWithAlphaComponent:0.12];
self.topView.backgroundColor = shadowColor;

//add border
CAShapeLayer *border = [CAShapeLayer new];
border.frame = backgroundLayer.bounds;
border.path = path;
border.lineWidth = ProgramItemBorderSize;
border.strokeColor = shadowColor.CGColor;
border.fillColor = nil;
[backgroundLayer addSublayer:border];
4

2 回答 2

3

如果您只需要处理不同的高度，请将其设置为可绘制 9 个补丁。查看开发者指南： http: //developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch http://developer.android.com/tools/help/draw9patch.html

如果你想要更接近你的 iOS 代码的东西，你可以使用 Path 并绘制到画布上。例如，您可以创建一个自定义可绘制对象来执行此操作：

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.Drawable;

public class PathDrawable extends Drawable {

    Path mPath = new Path();
    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public PathDrawable(){
        mPaint.setColor(Color.GRAY);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setStrokeWidth(5);
    }

    @Override
    public void draw(Canvas canvas) {
        mPath.moveTo(10,10);
        mPath.lineTo(10, canvas.getHeight()-10);
        mPath.lineTo(canvas.getWidth()-50, canvas.getHeight()-10);
        mPath.lineTo(canvas.getWidth()-10, canvas.getHeight()-50);
        mPath.lineTo(canvas.getWidth()-10, 10);
        mPath.close();
        canvas.drawPath(mPath, mPaint);

    }

    @Override
    public void setAlpha(int i) {}

    @Override
    public void setColorFilter(ColorFilter colorFilter) {}

    @Override
    public int getOpacity() {
        return 0;
    }


}

在这里我只画了一个形状，但你应该明白了。

于 2014-05-12T20:34:55.283 回答
2

我同意@durbnpoisn。

  1. 创建一个背景为深色的矩形视图。
  2. 在第一个内部创建一个带有背景光的新矩形视图。这将有填充以产生边框的效果。
  3. 在右下角画一个三角形。大多数将是白色的，除了沿着重叠边的深色边框以完成其周围深色边框的效果。

我添加了一个布局示例。黄色是透明的。

布局示例

于 2014-05-12T20:30:03.120 回答