Impossible de voir la disposition de la vue terminée dans Android Studio


89

Je crée un LinearLayout vertical qui sera affiché dans un ScrollView vertical. Je ne trouve pas de moyen dans Android Studio pour voir la partie de LinearLayout qui se trouve sous le bas de ScrollView. Existe-t-il un moyen de voir la mise en page complète plutôt que de la contraindre à la fenêtre fournie par le moteur de rendu?

Réponses:


66

Comme Drew l'a dit, créer une définition de périphérique définie par l'utilisateur a été la seule solution qui a fonctionné pour moi. Ci-dessous je vous montre les étapes à suivre:

Étape 1) Dans le volet de prévisualisation, ouvrez la liste déroulante Sélection de périphérique virtuel et sélectionnez Ajouter une définition de périphérique.

entrez la description de l'image ici

Étape 2) Dans la boîte de dialogue Vos périphériques virtuels, cliquez sur le bouton Créer un périphérique virtuel .

entrez la description de l'image ici

Étape 3) Dans la boîte de dialogue Sélectionner le matériel, cliquez sur le bouton Nouveau profil matériel .

entrez la description de l'image ici

Étape 4) Dans la boîte de dialogue Configurer le profil matériel, spécifiez (fe) une résolution de 720 x 4000 px et une taille d'écran de 12 pouces. Le réglage de la taille de l' écran donne également une densité de xhdpi (grâce à Mete).

entrez la description de l'image ici

Étape 5) Fermez toutes les boîtes de dialogue et redémarrez Android Studio. Étape 6) Ouvrez la liste déroulante Sélection de périphérique virtuel . Le nouveau profil matériel défini par l'utilisateur se trouve sous Téléphones et tablettes génériques . entrez la description de l'image ici


1
Merci pour votre réponse avec toutes les images et descriptions utiles
Roozbeh Zabihollahi

ne peut voir aucun endroit pour ajouter de la hauteur
Lasitha Lakmal

37

Je viens de découvrir comment. Vous devez créer une définition de périphérique définie par l'utilisateur dans Android AVD - J'en ai créé une de 480 x 4000 pixels. Quittez et redémarrez Android Studio, puis vous pouvez sélectionner cet appareil dans le moteur de rendu d'aperçu et voir 4000 pixels de LinearLayout.


+1 car je n'avais pas démonté mon point de vue et pour avoir indiqué la nécessité du redémarrage.
Iain Smith

C'est la seule solution appropriée que j'ai trouvée jusqu'à présent. Il y a un problème; Android Studio, lors de l'utilisation de cette résolution, définit automatiquement la densité sur xxxhdpi. Existe-t-il un moyen de rétablir la densité sur hdpi? J'utilise Android Studio v1.2
Brabbeldas

2
@Brabbeldas lorsque vous créez le profil, vous pouvez donner la largeur et la hauteur en pixels, mais vous pouvez également donner le "Screenize" en pouces, et la combinaison de ces paramètres définit la densité. Par exemple, j'ai réglé le mien sur 480x4000 avec une taille d'écran de 16 pouces et cela me donne hdpi
Mete

J'ai ajouté une nouvelle réponse avec des captures d'écran décrivant comment créer la définition de périphérique définie par l'utilisateur. @Drew, si vous le trouvez utile pour les autres, vous pouvez l'accepter comme la bonne réponse.
Brabbeldas

Merveilleux! Pour moi, le redimensionnement n'a pas fonctionné une fois! Et la réponse ci-dessous stackoverflow.com/a/31582758/1752988 a également été utile!
Randika Vishman

30

layoutVous avez trouvé une solution plus simple , ajoutez quelque chose comme ci-dessous et ajustez selon vos besoins:

android:layout_marginTop="-1500dp"

16
Meilleure réponse, mais ce serait mieux si vous utilisez: tools: layout_marginTop = "- 1500dp". De cette façon, le défilement négatif s'applique uniquement à l'éditeur de mise en page et non à l'exécution.
Leandro Glossman

Utile lorsque le bouton mentionné par @Eric n'est pas disponible.
Chintan Shah

18

dans la nouvelle version d'Android Studio (je ne sais pas à partir de quelle version, mais j'utilise la dernière version 2.3.3 maintenant), vous pouvez redimensionner votre mise en page d'aperçu en la faisant glisser

entrez la description de l'image ici


7
+1 a fonctionné pour moi, mais a dû changer manuellement le périphérique dans le gif ci-dessus de nexus 4 en "Personnalisé" pour que le bouton de glissement s'affiche.
Songo

17

Android Studio offrira une vue complète basculable, si ScrollView est la racine de la mise en page. J'avais placé le mien au-dessus du RelativeLayout par défaut et j'ai dû le corriger manuellement dans le XML avant que l'interface graphique ne me donne une vue complète.


Comment trouvez-vous cela?
mszaro

1
@MattSzaro Je ne me souviens pas où j'ai trouvé les informations, mais si vous voulez dire où trouver le XML pour le modifier afin que la vue de défilement soit l'élément racine, il y a deux onglets en bas lorsque vous ouvrez le .xml pour une vue: "Conception" et "Texte". Cliquez sur "Texte". Si vous voulez dire où trouver la bascule une fois que vous avez effectué la modification, je pense que vous devez fermer et rouvrir le projet une fois (peut-être), puis dans "Design", c'est le bouton le plus à gauche dans la deuxième ligne de la barre d'outils, avec une icône qui ressemble à un morceau de papier à trois colonnes ou quelque chose comme ça: "Toggle Viewport Render Mode".
davidgro

1
@davidgro, localiser l'option dans la barre d'outils est ce que je cherchais. Je vous remercie! Cela a vraiment aidé.
mszaro

1
Combiné avec la technique de " Réutilisation des mises en page avec<include/> ", nous pouvons extraire un ScrollViewau milieu d'une mise en page dans un fichier XML séparé et l'afficher dans son intégralité.
Pang

Que faire si votre vue de défilement n'est pas la vue racine. J'aurais aimé qu'ils élargissent tout le truc sanglant et mettent simplement un contour de l'écran du téléphone sur le dessus pour montrer la zone visible.
JPM

17

J'espère que la capture d'écran vous aidera:

capture d'écran


4
il manque ce bouton lorsque je clique sur mon scrollView sur l'arborescence des composants
user3491799

8
Je viens de trouver que scrollview doit être la couche supérieure pour afficher le bouton. Thx Eric!
user3491799

L'option de vue complète résout mon problème pour les vues de défilement vertical, mais j'ai une vue de défilement horizontale intégrée qui n'est encore que partiellement visible (le reste s'étend vers la droite hors de la vue) Y a-t-il un moyen de résoudre cela sans utiliser l'option de périphérique personnalisé ?
Essah du

1
C'est la réponse parfaite. c'est mieux que le profil de l'appareil très haut. et est disponible dans android studio 0.1.7+
Ninja

12

Vous pouvez utiliser l'attribut scrollY pour faire défiler le ScrollView dans l'aperçu. L'utilisation de l'attribut scrollY avec l'espace de noms des outils fera uniquement défiler la vue dans l'affichage et non dans l'application réelle. Et assurez-vous d'utiliser px comme unité avec l'attribut scrollY.

tools:scrollY="150px"

5

Mise à jour: vous pouvez maintenant faire défiler un ScrollView directement dans le panneau de prévisualisation (j'ai testé sur Android studio version 2.3.2)

Réponse courte: Faites un clic droit sur votre ScrollView et sélectionnez Refactor> Extract> Layout .

Android-studio extraira votre ScrollView dans un nouveau fichier de mise tools:showIn="@layout/original_layout_file"en page et placera l'attribut à la racine de la mise en page (votre ScrollView).

Remarque: Android-studio affichera un aperçu de la mise en page complète si la mise en page racine est ScrollView.


1
@Tequilaman Si vous utilisez la version 2.3.2 d'Android Studio, vous pouvez faire défiler le contenu de ScrollView en utilisant la molette de la souris sur le panneau de prévisualisation
Momepukku

4

Dans Android Studio version 3.2.1, vous pouvez sélectionner un appareil "Personnalisé" sur le panneau de prévisualisation, puis redimensionner l'aperçu à la hauteur dont vous avez besoin.

exemple d'aperçu personnalisé android studio


1
c'est le moyen le plus simple! meilleur.
Noor Hossain


1

Une autre solution alternative rapide consiste à masquer temporairement les mises en page en haut afin que les mises en page en bas puissent apparaître dans la fenêtre visible dans Android Studio.

Mettez android:visibility="gone"les mises en page que vous souhaitez masquer.

Exemple:

<HorizontalScrollView
            android:visibility="gone"
            android:id="@+id/hsv02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/ll24"
            android:layout_below="@+id/ll199">

 </HorizontalScrollView>

C'est une solution très inconfortable ... Ne faites pas cela au moins est extrêmement nécessaire.
Joaquin Iurchuk

1
Utilisez tools:visibility="gone".
dnp le

0

Je suis peut-être en retard, mais il vous sera beaucoup plus facile de définir simplement les marges sur négatives pour déplacer la vue de défilement vers la gauche.

Par exemple:

marge:

gauche: -100px

Vous pouvez maintenant voir et modifier la vue de défilement comme vous le souhaitez!


0

DISPOSITION DE LA TABLE

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">
    <TableRow android:padding="5dip">
        <TextView
            android:layout_height="wrap_content"
            android:text="New Product Form"
            android:typeface="serif"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:textSize="20dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:text="Product Code:"
            android:layout_column="0"/>
        <EditText
            android:id="@+id/prod_code"
            android:layout_height="wrap_content"
            android:layout_column="1"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:text="Product Name:"
            android:layout_column="0"/>
        <EditText
            android:id="@+id/prod_name"
            android:layout_height="wrap_content"
            android:scrollHorizontally="true" />
    </TableRow>
    <TableRow>
        <TextView
            android:layout_height="wrap_content"
            android:text="Product Price:" />
        <EditText
            android:id="@+id/prod_price"
            android:layout_height="wrap_content" />
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/add_button"
            android:text="Add Product"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/cancel_button"
            android:text="Cancel"
            android:layout_height="wrap_content" />
    </TableRow>
</TableLayout>
















GridLAYOUT

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3"
    android:rowCount="2"
    tools:context=".Main3Activity" >
    <Button
        android:id="@+id/button3"
        android:layout_column="0"
        android:layout_gravity="fill_horizontal"
        android:layout_row="0"
        android:text="Button"
        />
    <Button
        android:id="@+id/button1"
        android:layout_column="1"
        android:layout_gravity="fill_horizontal"
        android:layout_row="0"
        android:text="Button" />
    <Button
        android:id="@+id/button2"
        android:layout_column="2"
        android:layout_gravity="fill_vertical"
        android:layout_row="0"
        android:layout_rowSpan="2"
        android:text="Button" />
    <Button
        android:id="@+id/button4"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:layout_row="1"
        android:text="Button" />
</GridLayout>





ANOTHER TABLE LAYOUT

<?xml version="1.0" encoding="utf-8"?>
<android.widget.TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    tools:context="com.example.dhanya.uitablelayout.MainActivity">
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TextView
            android:text="Time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0" />
        <TextClock
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textClock"
            android:layout_column="1" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="First Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0" />
        <EditText
            android:width="200px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="Last Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0" />
        <EditText
            android:width="100px"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </TableRow>
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <RatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:id="@+id/ratingBar"
            android:layout_column="0" />
    </TableRow>
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submit"
            android:layout_span="2"
            android:id="@+id/button"
            android:layout_column="0" />
    </TableRow>
</android.widget.TableLayout>

0

Le mieux que j'ai trouvé est de configurer l'appareil sur personnalisé. Ensuite, nous pouvons changer la mise en page simplement en faisant glisser.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.