将正方形划分为四个可点击的三角形

时间:2016-07-18 07:27:22

标签: android android-layout

this answer

我想在方形视图中创建4个三角形按钮 我尝试使用layer-list创建视图,但它无效。左右按钮覆盖顶部和底部按钮的单击事件

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="-20%"
        android:pivotY="5%" >
           <shape
              android:shape="rectangle" >
              <gradient
                android:angle="45"
                  android:startColor="#B841CC"
                  android:endColor="#55149f"/>
          </shape>
      </rotate>
    </item>
</layer-list>

这是我的布局设计

    <RelativeLayout
        android:layout_width="@dimen/lwidth"
        android:layout_height="@dimen/lwidth">

        <Button
            android:id="@+id/btngallery"
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_down"
            android:textAllCaps="false"
            android:text="Gallery"
            android:textColor="@android:color/white"
            android:paddingBottom="@dimen/lmrgnbottom"
            android:textSize="@dimen/lsize"/>
        <Button
            android:id="@+id/btnfromphone"
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_right"
            android:textAllCaps="false"
            android:text="Select From Phone"
            android:textColor="@android:color/white"/>
        <Button
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_left"
            android:layout_alignParentRight="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_up"
            android:layout_alignParentBottom="true"/>

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/home_icon"
            android:layout_centerInParent="true"/>


    </RelativeLayout>

2 个答案:

答案 0 :(得分:1)

  • 您可以通过引入自定义视图onDraw(Canvas canvas)来执行此操作。
  • 然后你可以放置4个drawables,每个三角形一个,或者只是在onTouchEvent方法中绘制它们。
  • 然后您需要覆盖onSignleTapUp方法,您可以在其中接收有用的MotionEvent对象。借助它,您可以知道触摸和动作的坐标(向下,向上,移动e.t.c)。更多信息here
  • 在此方法中,您将确定单击了每个三角形。你需要首先确定动作DOWN,然后在相同的坐标中动作UP并有一些延迟。或者,您可以将GestureDetector连接到自定义视图,并在回调public class MyView extends View { public enum Triangle { RIGHT, LEFT, TOP, BOTTOM } private final Paint rightPaint = new Paint(); private final Paint leftPaint = new Paint(); private final Paint topPaint = new Paint(); private final Paint bottomPaint = new Paint(); private final Path rightPath = new Path(); private final Path leftPath = new Path(); private final Path topPath = new Path(); private final Path bottomPath = new Path(); private OnTriangleTouchedListener triangleTouchedListener; public MyView(Context context) { super(context); init(); } public MyView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public MyView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public void setOnTriangleTouchedListener(OnTriangleTouchedListener triangleTouchedListener) { this.triangleTouchedListener = triangleTouchedListener; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(rightPath, rightPaint); canvas.drawPath(leftPath, leftPaint); canvas.drawPath(topPath, topPaint); canvas.drawPath(bottomPath, bottomPaint); } @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { if (event.getX() > 100 && event.getX() <= (200 - event.getY()) || event.getX() <= 100 && event.getX() >= event.getY()) { callTriangleTouch(Triangle.TOP); } else if (event.getY() > 100 && event.getY() <= (200 - event.getX()) || event.getY() <= 100 && event.getY() >= event.getX()) { callTriangleTouch(Triangle.LEFT); } else if (event.getY() <= 100 && event.getY() >= (200 - event.getX()) || event.getY() > 100 && event.getY() <= event.getX()) { callTriangleTouch(Triangle.RIGHT); } else if (event.getX() <= 100 && event.getX() >= (200 - event.getY()) || event.getX() > 100 && event.getX() < event.getY()) { callTriangleTouch(Triangle.BOTTOM); } } return true; } private void callTriangleTouch(Triangle triangle) { if (triangleTouchedListener != null) { triangleTouchedListener.onTriangleTouched(triangle); } } private void init() { rightPaint.setColor(0xffff0000); leftPaint.setColor(0xff00ff00); topPaint.setColor(0xff0000ff); bottomPaint.setColor(0xffffff00); rightPaint.setAntiAlias(true); leftPaint.setAntiAlias(true); topPaint.setAntiAlias(true); bottomPaint.setAntiAlias(true); rightPath.moveTo(200, 0); rightPath.lineTo(200, 200); rightPath.lineTo(100, 100); rightPath.lineTo(200, 0); leftPath.moveTo(0, 0); leftPath.lineTo(100, 100); leftPath.lineTo(0, 200); leftPath.lineTo(0, 0); topPath.moveTo(0, 0); topPath.lineTo(200, 0); topPath.lineTo(100, 100); topPath.lineTo(0, 0); bottomPath.moveTo(200, 200); bottomPath.lineTo(0, 200); bottomPath.lineTo(100, 100); bottomPath.lineTo(200, 200); } public interface OnTriangleTouchedListener { void onTriangleTouched(Triangle triangle); } } 上做出反应。更多信息here

这是一个示例代码(这只是一个例子)。它使用硬代码宽度和高度,所以你的任务是适应多屏幕和在xml中使用,但我提供了主要观点,但是这个样本:

{{1}}

答案 1 :(得分:1)

ImageView image=(ImageView) findViewById(R.id.imageView1);
image.setOnTouchListener(this);
Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();    

@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int pixel = bitmap.getPixel((int)event.getX(), (int)event.getY());
int alphaValue=Color.alpha(pixel);
return true;
}

这样您就可以获得所触摸像素的alpha值。现在,您可以轻松检查所触摸的像素是否透明。然后在按钮上单击您需要的内容