RelativeLayout, ScrollView et barre de navigation en bas
-
25-10-2019 - |
Question
Ce que je veux faire est, la mise en page de marque comme ceci:
Titre
Date
Texte long avec défilement
Barre de navigation bâton au fond
Eh bien, je l'ai fait tout, mais il y a un petit problème avec le défilement. Je veux seulement le texte défilement. Titre et date devrait être bâton vers le haut, et barre de navigation en bas de l'activité. Et oui, cela fonctionne, mais ma barre de navigation texte de chevauchement: /
J'ai tout essayé, il y a une solution que je trouve, pour régler la hauteur fixe ScrollView, mais cela ne fonctionnera pas sur tous les appareils bien, est-ce pas? Je pourrais probablement faire quelques calculs dans le code, et il changer la hauteur, mais je voudrais rester en XML.
Quelqu'un a des suggestions?
Voici mon fichier XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="@+id/feed_title"
style="@style/h1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="@+id/feed_info"
style="@style/h2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="@+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="@drawable/ic_fav_off" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="@+id/feed_text"
style="@style/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Loren ipsum full tekst" />
</ScrollView>
</LinearLayout>
<!-- Buttons -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="@+id/go_to_article"
style="@style/button_screen"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="@string/feed_show_full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/next_feed"
style="@style/button_screen"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/button_arrow_up" />
<Button
android:id="@+id/share_feed"
style="@style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="@string/feed_share" />
<Button
android:id="@+id/delete_feed"
style="@style/button_screen"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="@string/feed_delete" />
<Button
android:id="@+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@drawable/button_arrow_down" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
</RelativeLayout>
La solution
Voici les choses que j'ai changé:
- top mise en page Déplacé vers le bas
- Gave nom de la mise en page en bas
android:id="@+id/bottom_layout"
- top Gave disposition d'un
android:id="@+id/top_layout"
nom (pas nécessaire seulement pour la clarté) -
mise en page haut aura les propriétés suivantes:
android:layout_above="@id/bottom_layout"
android:layout_alignParentTop="true"
La première est de faire en haut au-dessus de mise en page ancrée mise bas. La deuxième est à bord Aligner en haut de la disposition de haut au dessus des parents. Ce qui dans ce cas est RelativeLayout.
-
mise en page en bas aura ces propriétés:
android:layout_alignParentBottom="true"
Il dira que le bord inférieur des matches de mise en bas avec bord inférieur du parent (qui est RelativeLayout)
Voici la mise en page de travail entièrement:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- Buttons -->
<LinearLayout
android:id="@+id/bottom_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#FFFFFF"
android:orientation="vertical"
android:paddingBottom="5dp" >
<Button
android:id="@+id/go_to_article"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="15dp"
android:text="Feed full" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/next_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:id="@+id/share_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="share" />
<Button
android:id="@+id/delete_feed"
android:layout_width="100dp"
android:layout_height="40dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="delete" />
<Button
android:id="@+id/prev_feed"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
<!-- ~Buttons -->
<LinearLayout
android:id="@+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/bottom_layout"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="vertical" >
<TextView
android:id="@+id/feed_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" />
<TextView
android:id="@+id/feed_info"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<ImageView
android:id="@+id/feed_fav_ico"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical|right"
android:background="@drawable/ic_launcher" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollY="20dp" >
<TextView
android:id="@+id/feed_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/long_test" />
</ScrollView>
</LinearLayout>
</RelativeLayout>
Autres conseils
Avez-vous essayé de mettre un poids à la mise en page de défilement?
LinearLayout
- LinearLayout
-- Title
-- Date
- ScrollView layout_weigth=1
-- TextView
- LinearLayout
-- Button
-- Button
-- Button
Faites glisser le bord inférieur de la LinearLayout (permet de l'appeler l1) la tenue de votre texte et l'aligner sur le bord supérieur de la disposition linéaire tenant votre barre de navigation (Appelons-L2). Alors que le AbsoluteLayout.above sur l1 est égale à l2.
<LinearLayout android:id="@+id/l1"
android:layout_above="@+id/l2">
</LinearLayout>
Comme Jonas dit, mais pour vous donner une litte plus, assurez-vous de remplir les autres choses.
<LinearLayout
android:layout_height="fill-parent">
<LinearLayout
android:layout_height="wrap_content">
put your title and things in here
</LinearLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_weight="1"> <!-- this makes it not overlap the layout(navbar) below-->
put your title and things in here
</ScrollView>
<LinearLayout
android:layout_height="wrap_content">
put your nav bar stuff in here
</LinearLayout>
</LinearLayout>
Si vous ne définissez pas le layout_weight, le scrollview va effectivement pousser la barre de navigation sur le fond de l'écran dans cette configuration. Il a quelque chose à voir avec la façon dont l'espace est réservé pour mise en page, je ne suis pas complètement sûr pourquoi, mais ajouter du poids retarde la réservation à plus tard. Étant donné que le scrollview remplit le parent, mais fait toujours partie de la disposition linéaire, la mise en page assurez-vous d'accueillir votre barre de navigation inférieure, et contrairement à la disposition relative il n'y aura pas de chevauchement.