2017-11-25 3 views
1

angezeigt werden Ich stehe vor einer sehr ungewöhnlichen Situation. Ich habe eine Layout-Datei mit einigen Symbolen in RelativeLayout angeordnet und vertikal ausgerichtet. Die Sache ist, dass ich keinen Abstand zwischen ihnen eingestellt habe und auf dem Vorschaubildschirm und auf dem Emulator wie erwartet erscheinen, aber auf dem Gerät sind sie immer durch einen konsistenten Rand getrennt.Unerwartete Ränder in RelativeLayout, die nur auf Gerät

Meine Frage ist: Warum sind diese Ränder angezeigt? Wie kann ich sie entfernen?

Hier können Sie den Unterschied zwischen dem Ergebnis auf emulator (API 26) und physical device (API 19) sehen.

Apropos Code, hier unten ist meine Layout-XML-Datei.

<com.example.rusia.madcall.design.CustomSlidingPaneLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
tools:context="com.example.rusia.madcall.MapsActivity" 
android:id="@+id/sliding_pane_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<!-- PLEASE DO NOT CHANGE CHILDREN ORDER --> 

<!-- CONTENT 1 (on the left): The Master Pane --> 
<FrameLayout 
    android:id="@+id/master_pane" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" /> 

<!-- CONTENT 2 (on the right): The main view --> 
<com.flipboard.bottomsheet.BottomSheetLayout 
    android:id="@+id/bottomsheet" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <!-- Map --> 
     <fragment 
      android:id="@+id/map" 
      android:name="com.google.android.gms.maps.SupportMapFragment" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

     <!-- Icons on the left-top --> 
     <RelativeLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"> 

      <!-- Menu Icon --> 
      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab_menu" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="start|top" 
       android:layout_margin="5dp" 
       android:src="@drawable/ic_menu_white_24dp" 
       android:visibility="visible" 
       app:backgroundTint="@color/colorPrimary" /> 

      <!-- Icons & Descriptions --> 
      <RelativeLayout 
       android:id="@+id/left_icons" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginStart="5dp" 
       android:layout_below="@id/fab_menu" 
       android:visibility="visible" 
       android:layout_marginLeft="5dp"> 

       <!-- 1st icon: NEAR ME --> 
       <RelativeLayout 
        android:id="@+id/near_me_box" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="0dp"> 

        <TextView 
         android:id="@+id/fab_near_me_description" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentLeft="true" 
         android:layout_alignParentStart="true" 
         android:layout_centerVertical="true" 
         android:layout_marginLeft="21dp" 
         android:layout_marginStart="21dp" 
         android:background="@drawable/bg_description_left_icon" 
         android:gravity="center_vertical|center_horizontal" 
         android:text="@string/near_me" 
         android:textColor="@color/white" 
         android:textSize="18sp" 
         android:visibility="gone" /> 

        <android.support.design.widget.FloatingActionButton 
         android:id="@+id/fab_near_me" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="start|top" 
         android:src="@drawable/ic_near_me_white_24dp" 
         android:visibility="visible" 
         app:backgroundTint="@color/colorPrimary" /> 

       </RelativeLayout> 

       <!-- 2nd icon: ADVANCED SEARCH --> 
       <RelativeLayout 
        android:id="@+id/advanced_search_box" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/near_me_box" 
        android:layout_marginTop="0dp"> 

        <TextView 
         android:id="@+id/fab_search_description" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentLeft="true" 
         android:layout_alignParentStart="true" 
         android:layout_centerVertical="true" 
         android:layout_marginLeft="22dp" 
         android:layout_marginStart="22dp" 
         android:background="@drawable/bg_description_left_icon" 
         android:gravity="center_vertical|center_horizontal|center" 
         android:text="@string/advanced_search" 
         android:textColor="@color/white" 
         android:textSize="18sp" 
         android:visibility="gone" /> 

        <android.support.design.widget.FloatingActionButton 
         android:id="@+id/fab_search" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="start|top" 
         android:src="@drawable/ic_search_white_24dp" 
         android:visibility="visible" 
         app:backgroundTint="@color/colorPrimary" /> 

       </RelativeLayout> 

       <!-- 3rd icon: SETTINGS --> 
       <RelativeLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_below="@+id/advanced_search_box" 
        android:layout_marginTop="0dp"> 

        <TextView 
         android:id="@+id/fab_settings_description" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentLeft="true" 
         android:layout_alignParentStart="true" 
         android:layout_centerVertical="true" 
         android:layout_marginLeft="22dp" 
         android:layout_marginStart="22dp" 
         android:background="@drawable/bg_description_left_icon" 
         android:gravity="center_vertical|center_horizontal|center" 
         android:text="@string/settings" 
         android:textColor="@color/white" 
         android:textSize="18sp" 
         android:visibility="gone" /> 

        <android.support.design.widget.FloatingActionButton 
         android:id="@+id/fab_settings" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_gravity="start|top" 
         android:src="@drawable/ic_settings_white_24dp" 
         android:visibility="visible" 
         app:backgroundTint="@color/colorPrimary" /> 

       </RelativeLayout> 

      </RelativeLayout> 

     </RelativeLayout> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_location" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="end|top" 
      android:layout_margin="5dp" 
      android:src="@drawable/ic_my_location_white_24dp" 
      android:visibility="visible" 
      app:backgroundTint="@color/colorPrimary" /> 

    </FrameLayout> 

</com.flipboard.bottomsheet.BottomSheetLayout> 

+0

Dies kann daran liegen, dass Ihr Vorschaubildschirm mit niedrigeren dpi und der Emulator mit höheren dpi ist. –

+0

sie haben unterschiedliche Bildschirmgrößen, so dass die Ränder auch unterschiedliche reale Größen haben. –

+0

@PankajMundra mein Vorschaubildschirm und mein Emulator passen zusammen, die Sache, die nicht übereinstimmt, ist das physische Gerät. – rusiano

Antwort

1

Dank @azizbekian Vorschlag kam ich auf das wahre Problem und ich löste es. Ich teile meine Erkenntnisse und meine Lösung.

Zuerst bemerkte ich im Layout-Inspektor, dass die FloatingActionButton (s) mPaddingTop, mPaddingBottom usw. alle auf 42dp gesetzt hatten. Ich habe das Padding von FloatingActionButton (s) untersucht und tatsächlich ein bekanntes Problem gefunden (bereits diskutiert in StackOverflow here). Das Problem bezieht sich dann auf FloatingActionButton und nicht auf RelativeLayout. Genauer gesagt, bei älteren Versionen von Android sind diese Schaltflächen mit einem Standard-Allround-Padding ausgestattet.

Durch die Antworten kombiniert, löste ich das Problem, indem die folgenden Eigenschaften, um alle meine FloatingButton (e):

app:useCompatPadding="true" 
app:elevation="0dp" 
app:pressedTranslationZ="0dp" 

Dies hat den Effekt, die sich im internen Polsterung und erhalten das einfache Symbol zu entfernen. Sie können dann Ihren benutzerdefinierten Abstand oder Rand mit den allgemeinen Eigenschaften android: layout_margin oder android: padding hinzufügen.

Here ein Beispiel für das Endergebnis mit einer Auffüllung von 10dp zwischen den Tasten.

Hoffe es hilft!

-1

Sie müssen verschiedene XML für verschiedene Bildschirmgrößen entwickeln.

Um Ihr Gerät dpi zu überprüfen können Sie this App herunterladen.

So erstellen Sie unterschiedliche Layouts einen Ordner in Ressource erstellen und als Layout-sw320dp nennen

Änderung sw320dp sw600dp, sw700dp, nach Ihrem Bildschirm dpi.

Verschiedene Geräte nehmen automatisch die genaue Layout-XML gemäß Geräte-dpi an.

Für Referenzprüfung this

Ich hoffe, dass diese Informationen für Sie nützlich sein wird.

Verwandte Themen