web-dev-qa-db-fra.com

zone cliquable de l'image

je suis en train de concevoir une télécommande graphique, mais au lieu de créer des boutons distincts pour chaque bouton de la télécommande, je souhaite obtenir une image distante prête à l'emploi et définir certaines parties cliquables. événement pour faire cela? 

androidonclicklistenerimagemap
23
Outflorks Usus

J'ai 2 solutions pour vos besoins. Dans les deux cas, toute l'image reste cliquable mais vous pouvez obtenir des informations sur la zone cliquée.

Solution 1:

vous pouvez masquer l'image et obtenir le pixel couleur de l'image sous-jacente. Ainsi, vous pourrez enfin savoir quelle zone a été cliquée.

ici, chaque fois que vous avez cliqué, vous pouvez vérifier la couleur de pixel de background image et la faire correspondre à un jeu de couleurs prédéfini pour savoir quelle zone a été cliquée.

Image au premier plan: Foreground image

Image de fond:Background image

Zone cliquable: Representing clickable area

Encore confus?

Référence: Je voudrais vous suggérer de parcourir this tutorial.

Solution 2:

vous pouvez mapper votre image avec coordonnées et vous pouvez ainsi obtenir les informations de la zone sur laquelle vous avez cliqué.

Exemple: MappedImage avec des coordonnées

si vous ne connaissez pas les coordonnées, vous pouvez créer votre image mappée à partir de ici

les coordonnées pour le Kansas ressembleront à quelque chose comme ça,

        <area shape="poly" coords="243,162,318,162,325,172,325,196,244,196" id="@+id/area14" name = "Kansas"/>

MappedImage with co-ordinates

Référence: S'il vous plaît jeter un oeil à Android Image Mapping .

J'espère que ça vous sera utile !!

32
Mehul Joisar

Vous pouvez toujours utiliser des boutons.

Vous pouvez les placer sur votre image aux endroits appropriés et les rendre invisibles.

En XML

<Button Android:visibility="invisible"/>

Ou

Button mybutton = (Button) v1;
mybutton.setVisibility(View.INVISIBLE);
8
sealz

J'ai eu les mêmes défis et résolu avec la bibliothèque "PhotoView" , où vous pouvez écouter 

onPhotoTap(View view, float x, float y){}

événements et vérifiez si l'onglet se trouve dans votre zone d'image, puis effectuez certaines tâches. 

J'ai créé une bibliothèque pour aider les autres développeurs à implémenter ces fonctionnalités beaucoup plus rapidement. C'est sur Github: ClickableAreasImages

Cette bibliothèque vous permet de définir des zones cliquables dans une image, d'y associer des objets et d'écouter les événements tactiles sur cette zone.

Comment utiliser la bibliothèque:

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();
        }
    }
...
}
2
lukle

Pour améliorer la réponse de @sealz, voici ma réponse:

<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>
0
Accollativo