查看背景切断角落和边界 [英] View background with cut off corner and border
问题描述
我试图与这样的背景下一款Android浏览：
我已经想通了，最简单的方法，正确是使在不同的背景颜色彼此顶部的两种形状：
的高度是每个元素不同，所以我需要在code的形状。
起初，我在XML已经开始迅速看到结果。相对=：我从的这个帖子上手，但我真的不接近任何有用的：
＆LT;层列表的xmlns：机器人=http://schemas.android.com/apk/res/android＆GT;
＆LT;项目＆GT;
＆LT;旋转
机器人：fromDegrees =45
机器人：toDegrees =45
机器人：pivotX = - 60％
机器人：pivotY =50％＆GT;
＆LT;形状
机器人：形状=矩形＆GT;
[固体
机器人：颜色=＃FF00FF/＆GT;
＆LT; /形状＆GT;
＆LT; /旋转＆GT;
＆LT; /项目＆GT;
＆LT; /层列表＆gt;
我应该怎么做呢？
方向的任何线索将appriciated
的我已经做它的iOS这样的，但形状并没有在Android中相同的方式工作：的
self.view.backgroundColor = [个体经营getEventColor]
CALayer的* backgroundLayer = self.view.layer;CAShapeLayer *面膜= CAShapeLayer.new;
mask.frame = backgroundLayer.bounds;
mask.fillColor = [[的UIColor blackColor] CGColor];CGFloat的宽度= backgroundLayer.frame.size.width;
CGFloat的高度= backgroundLayer.frame.size.height;CGMutablePathRef路径= CGPathCreateMutable（）;INT cornerCutSize = 20;
如果（cornerCutSize＆GT;高度）
cornerCutSize =（int）的高度 - 5;
CGPathMoveToPoint（路径，NULL，0，0）;
CGPathAddLineToPoint（路径，零，宽度，0）;
CGPathAddLineToPoint（路径，零，宽度，高度 - cornerCutSize）;
CGPathAddLineToPoint（路径，零，宽度 - cornerCutSize，高度）;
CGPathAddLineToPoint（路径，零，宽，高）;
CGPathAddLineToPoint（路径，零，0，高度）;
CGPathAddLineToPoint（路径，零，0，0）;
CGPathCloseSubpath（路径）;mask.path =路径;
CGPathRelease（路径）;backgroundLayer.mask =口罩;*的UIColor =则shadowColor [的UIColor blackColor] colorWithAlphaComponent：0.12];
self.topView.backgroundColor =则shadowColor;//添加边框
CAShapeLayer *边界= [CAShapeLayer新]
border.frame = backgroundLayer.bounds;
border.path =路径;
border.lineWidth = ProgramItemBorderSize;
border.strokeColor = shadowColor.CGColor;
border.fillColor =零;
[backgroundLayer addSublayer：边框];
如果你所要处理的是不同的高度，使之成为9补丁绘制。退房的开发人员指南： http://developer.android .COM /引导/主题/图形/ 2D-graphics.html＃九宫
http://developer.android.com/tools/help/draw9patch.html
如果你想要的东西更接近你的iOS code，你可以使用一个路径，并绘制在画布。
例如，您可以创建一个自定义绘制做到这一点：
进口android.graphics.Canvas;
进口android.graphics.Color;
进口android.graphics.ColorFilter;
进口android.graphics.Paint;
进口android.graphics.Path;
进口android.graphics.drawable.Drawable;公共类PathDrawable扩展可绘制{ 路径的mpath =新路径（）;
涂料mPaint =新的油漆（Paint.ANTI_ALIAS_FLAG）; 公共PathDrawable（）{
mPaint.setColor（Color.GRAY）;
mPaint.setStyle（Paint.Style.FILL_AND_STROKE）;
mPaint.setStrokeWidth（5）;
} @覆盖
公共无效画（油画画布）{
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）; } @覆盖
公共无效setAlpha（int i）以{} @覆盖
公共无效setColorFilter（ColorFilter colorFilter）{} @覆盖
公众诠释getOpacity（）{
返回0;
}
}
在这里我只画的形状之一，但你应该明白了吧。
I am trying to make an Android View with a background like this:
I have figured out that the easiest way, properly is to make two shapes on top of each other with different background colors:
The height of the is different for each element, so I need to make the shape in code.
At first I have started in xml to quickly see the results. I have used the principles from this post to get started, but I don't really get close to anything usefull:
<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>
How should I do this?
Any clues of direction would be appriciated
I have done it in iOS like this but the shapes doesn't work the same way in 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];
If all you have to deal with is varying height, make it a 9 patch drawable. Check out the developer guide : http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch http://developer.android.com/tools/help/draw9patch.html
If you want something closer to your iOS code, you could use a Path and draw to a canvas. For example, you could create a custom drawable to do this:
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;
}
}
Here I just draw one of the shapes, but you should get the idea.
这篇关于查看背景切断角落和边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
