Hacer vista sesgada en android
Im que busca una manera de hacer un cierto tipo de visión sesgada en androide (Imageview, botón o marco)
Cualquier cosa que puedo implementar onclick en él.
Hay algo de estilo en el teléfono de Windows como este:
o algo como esto :
Cada parte de la pantalla (sobre la línea negra o debajo de ella) es clickable y hace nuevos apears de la actividad. No tengo ningún problema mostrar la rejilla con diverso tamaño de la columna con el uso de escalonadogridview. Pero supongo que para este enfoque debo hacer marco de traje de diseño y no la red?
Encuentro otra muestra de esto en play.google.com:
Es un poco de tapa haciendo en algún lugar y la imagen se puede cambiar, pero sin habilidad onclick en cada vista.
Editar: Implementar la sugerencia de Ernir:
public abstract class MainActivity extends Activity implements View.OnTouchListener { final ImageView iv= (ImageView)findViewById(R.id.img_cut_1); final ImageView iv2= (ImageView)findViewById(R.id.img_cut_2); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); findViewById(R.id.img_cut_1).setOnTouchListener(new MyTouchListener()); } private final class MyTouchListener implements OnTouchListener { @Override public boolean onTouch(View v, MotionEvent me) { if (me.getAction() == MotionEvent.ACTION_DOWN) { int vid = v.getId(); int nTouchX = (int)me.getX(); int nTouchY = (int)me.getY(); if (vid == R.id.img_cut_1) { Bitmap bm = ((BitmapDrawable)iv.getDrawable()).getBitmap(); if (bm.getPixel(nTouchX, nTouchY) != 0) { Log.i("MyActivity", "img_cut_1 true"); return true; } return false; } if (vid == R.id.img_cut_2) { Bitmap bm = ((BitmapDrawable)iv2.getDrawable()).getBitmap(); if (bm.getPixel(nTouchX, nTouchY) != 0) { Log.i("MyActivity", "img_cut_2 true"); return true; } return false; } } return true; } } Y diseño:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <FrameLayout android:id="@+id/frame" android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/img_cut_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:src="@drawable/image_cut_1" /> <ImageView android:id="@+id/img_cut_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:src="@drawable/ic_launcher" /> </FrameLayout> </RelativeLayout>
Pero recibiendo este error:
01-06 11:06:33.242: E/AndroidRuntime(15737): FATAL EXCEPTION: main 01-06 11:06:33.242: E/AndroidRuntime(15737): java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.example.test.com/com.example.test.com.MainActivity}: java.lang.InstantiationException: com.example.test.com.MainActivity 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1573) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1667) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread.access$1500(ActivityThread.java:117) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:935) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.os.Handler.dispatchMessage(Handler.java:99) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.os.Looper.loop(Looper.java:130) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread.main(ActivityThread.java:3687) 01-06 11:06:33.242: E/AndroidRuntime(15737): at java.lang.reflect.Method.invokeNative(Native Method) 01-06 11:06:33.242: E/AndroidRuntime(15737): at java.lang.reflect.Method.invoke(Method.java:507) 01-06 11:06:33.242: E/AndroidRuntime(15737): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:867) 01-06 11:06:33.242: E/AndroidRuntime(15737): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:625) 01-06 11:06:33.242: E/AndroidRuntime(15737): at dalvik.system.NativeStart.main(Native Method) 01-06 11:06:33.242: E/AndroidRuntime(15737): Caused by: java.lang.InstantiationException: com.example.test.com.MainActivity 01-06 11:06:33.242: E/AndroidRuntime(15737): at java.lang.Class.newInstanceImpl(Native Method) 01-06 11:06:33.242: E/AndroidRuntime(15737): at java.lang.Class.newInstance(Class.java:1409) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.Instrumentation.newActivity(Instrumentation.java:1021) 01-06 11:06:33.242: E/AndroidRuntime(15737): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1565) 01-06 11:06:33.242: E/AndroidRuntime(15737): ... 11 more
Ive intentado agregar el método entero dentro de otra actividad pero eso didnt ayuda. Ive agregar el método dentro de la clase debido a la palabra "mismo OnTouchListener a todas las ImageViews" que usted mencionó.
La mejor solución es dividir una imagen normalizada en polígonos donde cada polígono representa un área que se puede hacer clic. A continuación, adjunte un OnTouchListener y compruebe si la coordenada táctil normalizada está dentro del polígono. Esta solución requiere un poco de trabajo del programador más la implementación de un algoritmo geométrico. No voy más lejos con esta solución, pero en lugar de presentarle con el más fácil que le lleva la menor cantidad de tiempo para implementar. Estoy adivinando que esto es lo que quieres, espero que esté bien :).
La solución más fácil sin bibliotecas de terceros
Tenga en cuenta que esta solución no es eficiente de la memoria y debe utilizarse con precaución
1. Cortar su imagen en varias imágenes del mismo tamaño donde cada imagen sólo contiene una sola área de clic y el resto es transparente. Si utilizo la primera imagen de su pregunta como ejemplo, una de estas imágenes se verá así:
Muestra http://magma.is/test/stackoverflow.png
2. Ahora se superponen estas imágenes en múltiples vistas superpuestas
.... <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/img_cut_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:src="@drawable/image_cut_1" /> <ImageView android:id="@+id/img_cut_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:src="@drawable/image_cut_2" /> ...
3. En su Actividad / Fragmento, establezca el mismo OnTouchListener en todas las imágenes. Allí descubres por la eliminación de la transparencia que ImageView fue realmente tocado y luego tienes la información que necesitas sobre qué área de la imagen (o el botón si se quiere) fue presionado.
@Override public boolean onTouch(View v, MotionEvent me) { if (me.getAction() == MotionEvent.ACTION_DOWN) { int nTouchX = (int)me.getX(); int nTouchY = (int)me.getY(); if (v == imageCut1) { Bitmap bm = ((BitmapDrawable)imageCut1.getDrawable()).getBitmap(); if (bm.getPixel(nTouchX, nTouchY) != 0) { // non-transparent pixel touched, we found our view, receive further motion events. This can also be set false and code inserted here. return true; } // transparent pixel touched, do not receive further motion events. return false; } if (v == imageCut2) { ...
Si sólo desea un toque de usuario, puede seguir utilizando OnClick en paralelo o mejor, utilice la acción MotionEvent.ACTION_UP y compruebe si hay deriva de derivación y máximo retardo de tiempo entre los eventos de movimiento DOWN y UP. Algo como esto en MotionEvent.ACTION_UP: (y tenga en cuenta que sólo el "correcto" ImageView le dará este evento de movimiento, ya que descartamos otros eventos de movimiento para las otras vistas)
if ( mMainDragStartX <(me.getX()+TAP_DRIFT_TOLERANCE) && mMainDragStartX > (me.getX() -TAP_DRIFT_TOLERANCE) && mMainDragStartY < (me.getY() + TAP_DRIFT_TOLERANCE) && mMainDragStartY > (me.getY() - TAP_DRIFT_TOLERANCE) && ((SystemClock.elapsedRealtime() - mMainDraggingStarted) < SINGLE_TAP_MAX_TIME)) { // The user has tapped! ...
Tienes que personalizar los diseños, permítanme señalar a uno como un ejemplo
QuiltViewLIbrary
StaggeredGridView
StaggeredGridView es más parecido al de Pinteerest. Por lo tanto, usará uno de esos como plantilla y codificará una nueva Clase GridLayout que coloque las imágenes en un cambio para hacer trapecios o triángulos.
No, no es un diseño no grid. Tienes que personalizar un gridlayout.
La matemática de labranza será algo Penrose, hacer una búsqueda en google y encontrará librerías java para ese propósito.
Hay dos cosas que tenemos que considerar:
1> Visualización de imágenes con diferentes formas como las mencionadas:
Tienes que usar gráficos vectoriales escalables en Android.
Probar con este CustomShapeImageView
Lógica: Digamos por ejemplo que necesita para mostrar 4 imágenes sesgadas todo lo que tiene que hacer es utilizar tis CustomShapeImageView biblioteca pragmáticamente crear 4 Framelayout (un Framelayout por imagen) con imageview dentro de cada Framelayout.
2> Hacer y hacer clic en el evento en cada imagen:
Hacer y hacer clic en evento en cada imagen! Debe intentar usar OnTouchListener .