it-swarm.com.de

anklickbarer Bildbereich

ich entwerfe eine GUI-Fernbedienung, aber anstatt für jede Fernbedienungstaste separate Schaltflächen zu erstellen, möchte ich ein vollständiges Remote-Image erstellen und bestimmte Teile davon anklickbar machen Veranstaltung um dies zu tun? 

23
Outflorks Usus

Ich habe 2 Lösungen für Ihre Anforderung. In beiden Fällen bleibt das gesamte Bild anklickbar, Sie können jedoch Informationen zum angeklickten Bereich erhalten.

Lösung 1:

sie können das Bild maskieren und erhalten das Pixel color unter diesem Bild. So können Sie schließlich herausfinden, welcher Bereich angeklickt wurde.

bei jedem Klick können Sie hier die Pixelfarbe von background image überprüfen und mit einem vordefinierten Farbsatz abgleichen, um zu wissen, welcher Bereich angeklickt wurde.

Vordergrundbild: Foreground image

Hintergrundbild:Background image

Anklickbarer Bereich: Representing clickable area

Immer noch verwirrt?

Reference: Ich möchte Ihnen vorschlagen, das this Tutorial durchzugehen.

Lösung 2:

sie können Ihr Bild mit koordinaten zuordnen und dementsprechend die Informationen über den Bereich erhalten, auf den Sie geklickt haben.

Beispiel: MappedImage mit Koordinaten

wenn Sie keine Koordinaten kennen, können Sie Ihr Bild aus hier erstellen.

koordinaten für Kansas werden so aussehen,

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

MappedImage with co-ordinates

Reference: Bitte schauen Sie sich Android Image Mapping an.

Ich hoffe es wird hilfreich sein !!

32
Mehul Joisar

Sie können weiterhin Tasten verwenden.

Sie können sie an den richtigen Stellen über Ihrem Bild platzieren und unsichtbar machen.

In XML

<Button Android:visibility="invisible"/>

Oder

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

Ich hatte die gleichen Herausforderungen und löste es mit der Bibliothek "PhotoView" , wo Sie zuhören können 

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

Überprüfen Sie, ob sich die Registerkarte in Ihrem Bildbereich befindet, und führen Sie dann bestimmte Aufgaben aus. 

Ich habe eine Bibliothek erstellt, die anderen Entwicklern hilft, solche Funktionen schneller zu implementieren. Es ist auf Github: ClickableAreasImages

Mit dieser Bibliothek können Sie anklickbare Bereiche in einem Bild definieren, ihm Objekte zuordnen und auf Berührungsereignisse in diesem Bereich warten.

So verwenden Sie die Bibliothek:

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

Wenn das Klicken auf Rechtecke ausreicht, kann dies ganz einfach durch Erweitern von ImageView erreicht werden. Das Folgende ist eine einfache Implementierung, ohne Rücksicht auf die Zugänglichkeit.

Die Aussicht:

paket 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 );
    }
}

Verwenden Sie es in XML oder Java wie eine normale ImageView.

Dann müssen Sie die Klickaktionen registrieren. Ich wollte zu bestimmten Aktivitäten gehen, die in Kotlin so aussahen:

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);
        }
    }
}

Verwenden Sie es im Allgemeinen, indem Sie Rechtecke definieren, ein ausführbares Element, das ausgeführt werden soll, wenn auf das Rechteck geklickt wird, und fügen Sie sie dann über ClickableAreaImageView.addAreaEffect Der Ansicht hinzu.

0
Kjeld Schmidt

@Sealz Antwort verbessern, hier meine Antwort:

<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