Android Irregular Click Area Detailed

Android Irregular Click Area Summary

What we are going to share with you today is the Android irregular click Zone, which is accurately distributed in visually irregular image click response areas.

In fact, this problem is relatively simple, for many people is not worth to write for a blog post, but in my group does have children's shoes do not understand how to achieve and want to know the complete process is what, so complete the demo as a reference.

The following pages document the personal analysis process.

Our needs.

We need to implement different color areas such as chrome to respond to different events. In Chrome, click Red, Yellow, green, and blue for different event responses.

With our understanding of the Android component, the component is rectangular (even if it doesn't look like a rectangle), so the hit area is also a rectangle.

Implementation principle.

In principle, I think there are two ways to be simpler, one is to use mathematical linear programming, and the other is to judge by the color of the pixel. Of course, both have the use of the scope and advantages and disadvantages, today only for pixel color judgment to explain.

We make chrome colors into 4 images (i.e., 4 layers), each with only one color (exactly a range of colors), and each picture is the same size, the position of the color is relatively consistent, the other with transparent pixels, this is to facilitate the mapping. Then click on the time to determine whether the color of the click is transparent, if it is transparent then do not handle the Click event, if not transparent then need to handle the event.

Practice transduction.

The final effect of the transduction is as follows: (four-week grey is the range of the graph, actually no color is transparent)

procedures to determine transparency.

To facilitate management, the judgment is written directly inside the component, which is the custom component. The program is relatively simple, directly on the code.

 PackageCom.vane.ui.widget;ImportAndroid.content.Context;ImportAndroid.graphics.Bitmap;ImportAndroid.graphics.Color;Importandroid.graphics.drawable.BitmapDrawable;Importandroid.graphics.drawable.Drawable;Importandroid.graphics.drawable.StateListDrawable;ImportAndroid.util.AttributeSet;Importandroid.view.MotionEvent;Importandroid.widget.FrameLayout; Public classMenuviewitemextendsFramelayout {Private intwidth =-1; Private intHeight =-1; PrivateBitmap Bitmap;  PublicMenuviewitem (Context context) {Super(context); }      PublicMenuviewitem (context context, AttributeSet attrs,intDefstyle) {        Super(context, attrs, Defstyle); }      PublicMenuviewitem (Context context, AttributeSet attrs) {Super(context, attrs); } @Override Public Booleanontouchevent (Motionevent event) {intAction =event.getaction (); if(Action! =Motionevent.action_down) {            return Super. Ontouchevent (event); }        intx = (int) Event.getx (); inty = (int) event.gety (); if(width = =-1 | | height = =-1) {drawable drawable=( (statelistdrawable) Getbackground ()). GetCurrent (); Bitmap=((bitmapdrawable) drawable). Getbitmap (); Width=getwidth (); Height=getheight (); }        if(NULL= = Bitmap | | X < 0 | | Y < 0 | | X >= Width | | Y >=height) {            return false; }        intPixel =bitmap.getpixel (x, y); if(Color.transparent = =pixel) {            return false; }        return Super. Ontouchevent (event); }}

Drawable drawable = ((statelistdrawable) Getbackground ()). GetCurrent (); Because I use the background is selector, if you are not using selector then you can put this piece of code you actually set the background of the drawable type. The only thing to note here is the Ontouchevent method, which returns true to indicate that the component needs to intercept the touch event and returns false to indicate that the event will continue to be distributed to the other child in ViewGroup. There is a paragraph in the program

How to use it.

It is also easy to use and directly post the ACTIVITY_MAIN.L layout file.

<Framelayoutxmlns: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:gravity= "Center"android:orientation= "vertical" >     <Com.vane.ui.widget.MenuViewItemAndroid:id= "@+id/menu_1"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:background= "@drawable/chrome_1" />     <Com.vane.ui.widget.MenuViewItemAndroid:id= "@+id/menu_2"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:background= "@drawable/chrome_2" />     <Com.vane.ui.widget.MenuViewItemAndroid:id= "@+id/menu_3"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:background= "@drawable/chrome_3" />     <Com.vane.ui.widget.MenuViewItemAndroid:id= "@+id/menu_4"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:background= "@drawable/chrome_4" /> </Framelayout>

Chrome_1.xml resources are as follows: the background of the layout is selector, the corresponding resource structure is posted below, the others are the same.

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">     <Itemandroid:drawable= "@drawable/chrome_1_s"android:state_pressed= "true"/>    <Itemandroid:drawable= "@drawable/chrome_1_n"/> </selector>

This is just a different resource for pressing and non-pressing states.

Full demo.

The code is not said, the demo uses the resources are described above, directly paste code.

 PackageCom.vane.demo;ImportAndroid.os.Bundle;Importandroid.app.Activity;ImportAndroid.view.Menu;ImportAndroid.view.View;ImportAndroid.view.View.OnClickListener;ImportAndroid.widget.Toast; Public classMainactivityextendsActivityImplementsOnclicklistener {PrivateToast Mtoast; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main); Findviewbyid (r.id.menu_1). Setonclicklistener ( This); Findviewbyid (r.id.menu_2). Setonclicklistener ( This); Findviewbyid (R.id.menu_3). Setonclicklistener ( This); Findviewbyid (R.id.menu_4). Setonclicklistener ( This); } @Override Public BooleanOncreateoptionsmenu (Menu menu) {//inflate the menu; This adds items to the action bar if it is present.getmenuinflater (). Inflate (R.menu.main, menu); return true; } @Override Public voidOnClick (View v) {if(NULL!=mtoast)        {Mtoast.cancel (); }        Switch(V.getid ()) { CaseR.id.menu_1:mtoast= Toast.maketext ( This, "Red", Toast.length_short);  Break;  CaseR.id.menu_2:mtoast= Toast.maketext ( This, "Yellow", Toast.length_short);  Break;  CaseR.id.menu_3:mtoast= Toast.maketext ( This, "Green", Toast.length_short);  Break;  CaseR.id.menu_4:mtoast= Toast.maketext ( This, "Blue", Toast.length_short);  Break;    } mtoast.show (); }}

Demo to achieve the effect.

the picture on the left is normal and the right image is clicked on the red area.

Summarize.

The essence of the irregular click area is whether the image pixel is judged to be a specified color (in this case, transparent) and then the touch event is distributed. Of course, if you don't understand touch distribution, it might not be easy to understand why.

If you have any questions or problems in this article, please feel free to exchange messages. In this also left QQ group 311536202, Welcome to Exchange.