[英]Custom shaped buttons in Android - Am I doing it right?
I'm trying to implement four custom shaped buttons like you can see in the following picture: 我正在尝试实现四个自定义形状的按钮,如下图所示:
What I did so far: I took 4 different pictures - each with only one color visible (see above). 到目前为止我做了什么:我拍了4张不同的照片 - 每张照片只有一种颜色可见(见上文)。 The other part of the image is transparent. 图像的另一部分是透明的。 This has the result, that I have four pictures with the same size. 结果是,我有四张相同尺寸的图片。
Now I used a relative-layout where all my 4 pictures are added into imageviews on the same position. 现在我使用了相对布局,其中我的所有4张图片都被添加到同一位置的图像视图中。 Because of the transparency, I can see the desired picture. 由于透明度,我可以看到所需的图片。
For my ImageViews I've implemented onTouchListener with the following content: 对于我的ImageViews,我使用以下内容实现了onTouchListener:
private class ImageOnTouchListener implements View.OnTouchListener {
private int categoryId;
public ImageOnTouchListener(int categoryId) {
this.categoryId = categoryId;
}
@Override
public boolean onTouch(View v, MotionEvent event) {
Bitmap bmp = Bitmap.createBitmap(v.getDrawingCache());
int x = (int) event.getX();
int y = (int) event.getY();
boolean isInsideBitmap = x < bmp.getWidth() && y < bmp.getHeight() && x >= 0 && y >= 0;
boolean isActionUp = event.getAction() == MotionEvent.ACTION_UP;
if (isInsideBitmap) {
int color = bmp.getPixel(x, y);
bmp.recycle();
if (color == Color.TRANSPARENT){
return false;
}
else {
if (isActionUp) {
buttonClick();
}
}
}else{
bmp.recycle();
}
return true;
}
}
This approach works but it consumes a lot of memory as I'm always creating a bitmap when I move my finger. 这种方法有效,但它消耗了大量内存,因为我在移动手指时总是创建一个位图。 I'm not quite sure if this is the best way to implement this. 我不太确定这是否是实现这一目标的最佳方式。 Is there anything I can do different which might result in a more efficient way? 有什么我可以做的不同可能导致更有效的方式吗?
Using the fact that you can tell whether or not coordinates belong in a circle with the equation x² + y² <= radius²
when the circle's center is (0, 0), I think the following should work. 使用以下事实:当圆的中心为(0,0)时,您可以判断坐标是否属于具有等式x² + y² <= radius²
的圆,我认为以下情况应该有效。
public class ImageOnTouchListener implements View.OnTouchListener {
// TODO Adjust this value
private static int QUADRANT_RADIUS = 100; // in pixels
// TODO Adjust this value
private static int SPACE_BETWEEN_QUADRANTS = 5; // in pixels
@Override
public boolean onTouch(View v, MotionEvent event) {
int relativeX = (int) (event.getX() - v.getX());
int relativeY = (int) (event.getY() - v.getY());
int center = QUADRANT_RADIUS + (SPACE_BETWEEN_QUADRANTS / 2);
boolean isInsideCircle = Math.pow(relativeX - center, 2) + Math.pow(relativeY - center, 2) <= Math.pow(center, 2);
boolean isInsideBottomLeftQuadrant = isInsideCircle &&
relativeX <= QUADRANT_RADIUS &&
relativeY >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS;
boolean isInsideBottomRightQuadrant = isInsideCircle &&
relativeX >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS &&
relativeY >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS;
boolean isInsideTopLeftQuadrant = isInsideCircle &&
relativeX <= QUADRANT_RADIUS &&
relativeY <= QUADRANT_RADIUS;
boolean isInsideTopRightQuadrant = isInsideCircle &&
relativeX >= QUADRANT_RADIUS + SPACE_BETWEEN_QUADRANTS &&
relativeY <= QUADRANT_RADIUS;
boolean isActionUp = event.getAction() == MotionEvent.ACTION_UP;
if (isActionUp) {
if (isInsideBottomLeftQuadrant) {
// Handle bottom left quadrant click
buttonClick();
return true;
} else if (isInsideBottomRightQuadrant) {
// Handle bottom right quadrant click
} // etc.
}
return false;
}
}
You'll need to adjust the QUADRANT_RADIUS
and SPACE_BETWEEN_QUADRANTS
values, and then either handle all touch events from a single view (like my snippet does) or have a slightly different touch listener per image. 您需要调整QUADRANT_RADIUS
和SPACE_BETWEEN_QUADRANTS
值,然后从单个视图处理所有触摸事件(如我的代码片段)或每个图像的触摸侦听器略有不同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.