问题
i\'am designing a GUI remote control, but instead of making separate buttons for each remote button, i want to get a full ready remote image and set certain parts of it click-able. is there a way rather than the motion event to do this?
回答1:
I have 2 solutions for your requirement.in both,the whole image stays clickable but you can get information about clicked area.
Solution 1:
you can mask the image and get the pixel color of that underneath image.so ultimately you can come to know which area has been clicked.
here,whenever clicked occurs,you can check the pixel color of background image and match it with predefined color set to know about which area has been clicked.
Foreground image:
Background image:
Clickable area:
Still confused?
Reference: I would like to suggest you to go through this tutorial.
Solution 2:
you can map your image with co-ordinates and accordingly you can get the information of area which has been clicked.
Example: MappedImage with co-ordinates
if you are not aware of co-ordinates,you can create your mappedimage from here
co-ordinates for Kansas will look something like this,
<area shape="poly" coords="243,162,318,162,325,172,325,196,244,196" id="@+id/area14" name = "Kansas"/>
Reference: Please have a look at Android Image Mapping.
I hope it will be helpful !!
回答2:
You can still use buttons.
You can place them over your image in the correct spots and make them invisible.
In XML
<Button android:visibility="invisible"/>
Or
Button mybutton = (Button) v1;
mybutton.setVisibility(View.INVISIBLE);
回答3:
I had the same challenges and solved it with the library "PhotoView", where you can listen for
onPhotoTap(View view, float x, float y){}
events and check if the tab is inside your image area, and then perform certain tasks.
I created a library to to help other developers implement such functionality much faster. It's on Github: ClickableAreasImages
This library lets you define clickable areas in an image, associate objects to it and listen for touch events on that area.
How To Use the library:
public class MainActivity extends AppCompatActivity implements OnClickableAreaClickedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Add image
ImageView image = (ImageView) findViewById(R.id.imageView);
image.setImageResource(R.drawable.simpsons);
// Create your image
ClickableAreasImage clickableAreasImage = new ClickableAreasImage(new PhotoViewAttacher(image), this);
// Initialize your clickable area list
List<ClickableArea> clickableAreas = new ArrayList<>();
// Define your clickable areas
// parameter values (pixels): (x coordinate, y coordinate, width, height) and assign an object to it
clickableAreas.add(new ClickableArea(500, 200, 125, 200, new Character("Homer", "Simpson")));
clickableAreas.add(new ClickableArea(600, 440, 130, 160, new Character("Bart", "Simpson")));
}
// Listen for touches on your images:
@Override
public void onClickableAreaTouched(Object item) {
if (item instanceof Character) {
String text = ((Character) item).getFirstName() + " " + ((Character) item).getLastName();
Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
}
}
...
}
回答4:
Improving @sealz reply, here my answer:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerInParent="true"
android:layout_alignTop="@+id/mail"
android:layout_alignBottom="@+id/mail"
>
<Button
android:id="@+id/leftMail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="@android:color/transparent"
/>
<Button
android:id="@+id/rightMail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="@android:color/transparent"
/>
</LinearLayout>
<ImageView
android:id="@+id/mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/mail1600x600"
android:layout_centerInParent="true"
/>
</RelativeLayout>
回答5:
If clicking rectangles is enough, then this can be achieved quite easily by extending ImageView. The following is a simple implementation, without regard to accessibility.
The View:
package com.example.letzterwille.views;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;
import java.util.HashMap;
import java.util.Map;
import androidx.annotation.Nullable;
public class ClickableAreaImageView extends ImageView {
Map< Rect, Runnable > areaEffects = new HashMap<>();
public ClickableAreaImageView( Context context ) {
super( context );
}
public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs ) {
super( context, attrs );
}
public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs, int defStyleAttr ) {
super( context, attrs, defStyleAttr );
}
public ClickableAreaImageView( Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes ) {
super( context, attrs, defStyleAttr, defStyleRes );
}
public void addAreaEffect( Rect target, Runnable event ) {
areaEffects.put( target, event );
}
@Override
public boolean onTouchEvent( MotionEvent event ) {
if ( event.getAction() == MotionEvent.ACTION_DOWN ) {
int x = ( int ) event.getX();
int y = ( int ) event.getY();
for ( Map.Entry< Rect, Runnable > entry : areaEffects.entrySet() ) {
Rect rect = entry.getKey();
if ( rect.contains( x, y ) ) entry.getValue().run();
}
}
return super.onTouchEvent( event );
}
}
In your XML or Java, use it like a normal ImageView.
Then, you have to register the click actions. I wanted to go to specific activities, which looked like this in Kotlin:
class MenuSelection : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_menu_selection)
val areaImage = findViewById<ClickableAreaImageView>(R.id.menuSelectionImage)
areaImage.addAreaEffect(Rect(530, 100, 1080, 800), makeRunnable(SettingsActivity::class.java))
areaImage.addAreaEffect(Rect(30, 80, 430, 700), makeRunnable(StatsActivity::class.java))
}
private fun makeRunnable(activity: Class<*>): Runnable {
return Runnable {
val intent = Intent(this, activity)
startActivity(intent)
overridePendingTransition(R.anim.slide_in_from_bottom, R.anim.slide_out_to_top);
}
}
}
In general, use it by defining rectangles, a Runnable to execute when the rectangle is clicked and then add them to the view via ClickableAreaImageView.addAreaEffect
来源：https://stackoverflow.com/questions/16670774/clickable-area-of-image