Dev Faq
1
votes

Pourquoi la reconnaissance des gestes du toucher ne fonctionnera pas dans une mise en page absolue?

Développer un projet sur Android avec Xamarin.Forms.J'essaie de créer une page avec six boutons d'image pour naviguer l'utilisateur dans l'application. Verticalement demi-page, 3 sur le côté droit 3 sur le côté gauche. Pas de défilement pas d'autres choses. Lorsque j'utilise une mise en page absolue, seules les images en bas de l'écran fonctionnent. Les autres boutons d'image ne fonctionnaient pas. Si je mets seulement 2 images, elles fonctionnent.

Elles étaient dans une grille. J'ai supprimé la grille pour essayer et rien n'est changé. 

<Grid>
            <Grid Grid.Column="0" >
                <AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="historical"
                            AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="hotel"
                            AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_1"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="camp"
                            AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="Camp_Clicked"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                </AbsoluteLayout>




            </Grid>
            <Grid Grid.Column="1">



                <AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="food"
                            AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_2"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>

                        <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                            <Image Source="airport"
                            AbsoluteLayout.LayoutBounds="5,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_3"/>
                                </Image.GestureRecognizers>
                            </Image>

                        </AbsoluteLayout>



                </AbsoluteLayout>



            </Grid>
        </Grid>

Ceci est la version de la grille. Cela pose également le même problème. 

<AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="historical"
                            AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="hotel"
                            AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_1"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="camp"
                            AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="Camp_Clicked"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="food"
                            AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_2"/>
                </Image.GestureRecognizers>
            </Image>


        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="airport"
                            AbsoluteLayout.LayoutBounds="12,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_3"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="adventure"
                            AbsoluteLayout.LayoutBounds="12,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="Adventure_Clicked"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
    </AbsoluteLayout>

3 commentaires

il s'agit de la mise en page avec des boutons d'image qui ne fonctionnent pas. lien

AbsoluteLayouts peut chevaucher des vues et empêcher les autres d'être exploités. Je suggérerais de revenir au plan Grid . Cela permettra également différentes tailles de vues. Êtes-vous en mesure d'afficher le code de grille que vous aviez? Ensuite, nous pouvons peut-être voir pourquoi la grille a eu un problème

J'ai ajouté la version grille, TaylorD

3 Réponses :

0
votes

Je suggérerais de changer votre xaml pour utiliser une Grille avec des définitions de ligne et de colonne plutôt que d'utiliser un AbsoluteLayout TapGestureRecognizers d'être exécutés.

N'utilisez que les définitions de grille et de ligne / colonne et tout le code de mise en page absolu qui s'y trouve actuellement. Le chevauchement des vues rend les vues vers le haut de la page non cliquables.

0 commentaires
0
votes

Je ne sais pas pourquoi cela se produit, car votre XAML est un peu confus, mais j'ai compris ce que vous vouliez faire. C'est essentiellement ce que TaylorD a dit. Remplacez-le par Grid et non par AbsoluteLayout .

Il fera tout le redimensionnement et le positionnement pour vous, et résoudra probablement votre problème. Ce qui se passe, c'est probablement que l'un de vos contrôles est au-dessus des autres et qu'il obtient tout l'écran, donc lorsque vous appuyez sur, vous appuyez sur ce contrôle, pas celui que vous vouliez aussi.

Changez-le simplement en Grid et cela résoudra votre problème.

0 commentaires
1
votes

Il est facile de trouver la cause si vous ajoutez une couleur d'arrière-plan à chaque AbsoluteLayout , je l'ai ajouté et voyons le résultat:

entrez la description de l'image ici

Seules les images en bas de l'écran s'affichent et les autres se chevauchent par ces deux AbsoluteLayout, de sorte que la reconnaissance des gestes du toucher ne fonctionne pas.

Solution:

Pour utiliser correctement absolute-layout , vous devez lire le document et comprendre comment cela fonctionne.

Dans votre code, vous définissez le 3 AbsoluteLayout gauche AbsoluteLayout.LayoutBounds = "9,0, .4, .9" , le deuxième paramètre signifie la position y (verticale) de l'ancre de la vue , vous définissez tous le 0 , donc c'est un Je vais commencer par le haut de l'écran, cela a provoqué le chevauchement.

J'ai changé votre code xaml et je pense que c'est ce que vous voulez réaliser: 

<AbsoluteLayout BackgroundColor="Yellow"
                    AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
    <AbsoluteLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="9,0,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>
    <AbsoluteLayout BackgroundColor="Pink" AbsoluteLayout.LayoutBounds="9,.5,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Green" AbsoluteLayout.LayoutBounds="9,1,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Gray" AbsoluteLayout.LayoutBounds="190,0,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>


    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Blue" AbsoluteLayout.LayoutBounds="190,0.5,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.5" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Orange" AbsoluteLayout.LayoutBounds="190,1,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.9" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>
</AbsoluteLayout>

Voici le résultat:

screenshot

De plus, je vous recommande d'utiliser Grid pour mettre en page vos images, c'est plus simple et plus rapide.

blockquote >
0 commentaires

Articles qui pourrait vous intéresser :

Je peux faire fonctionner tous les émulateurs dans vs code
Visual Studio perd la capacité de s'attacher à Unity, pourquoi?
Est-il possible d'utiliser ensemble Entity Framework et un projet de base de données?
Comment résoudre: «nvcc fatal: impossible de configurer l'environnement pour Microsoft Visual Studio à l'aide de vcvars64.bat»