2017-11-25 13 views
1

非常に珍しい状況に直面しています。 私は、RelativeLayoutに配置され、垂直に配置されたいくつかのアイコンを持つレイアウトファイルを定義しました。私はそれらとプレビュー画面とエミュレータとの間にマージンを設定しなかったのですが、デバイス上では常に一定のマージンで区切られています。RelativeLayoutの予期しないマージンがデバイスでのみ表示される

私の質問です:なぜそれらの余白が表示されますか?どうすれば削除できますか?

ここでは、emulator (API 26)physical device (API 19)の結果の違いを確認できます。

コードについては、レイアウトXMLファイルがあります。あなたは、異なる画面サイズごとに異なるXMLを開発する必要があり

<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

これは、プレビュー画面の解像度が低く、エミュレータの解像度が高いためです。 –

+0

これらは画面サイズが異なるため、マージンも実際のサイズとは異なります。 –

+0

@PankajMundra私のプレビュー画面と私のエミュレータは一致しますが、一致しないものは物理的なデバイスです。 – rusiano

答えて

1

@azizbekianの提案のおかげで、私は本当の問題に遭遇し、私はそれを解決しました。私は私の発見と私のソリューションを共有しています。

まず、Layout Inspectorで、FloatingActionButtonにmPaddingTop、mPaddingBottomなどがすべて42dpに設定されていることが気づきました。私はFloatingActionButtonパディングについて調査しましたが、確かによく知られている問題が見つかりました(StackOverflowで既にhereで議論されています)。 問題はFloatingActionButtonに関連し、RelativeLayoutには関係しません。具体的には、Androidの古いバージョンでは、これらのボタンにはデフォルトの全周パディングが付属しています。

答えを組み合わせることで、私はすべての私のFloatingButton(複数可)に次のプロパティを追加することで問題を解決:

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

を。これは、内蔵のパディングを削除し、シンプルなアイコンを取得する効果があります。次に、カスタムのパディングまたはマージンを、共通プロパティのandroid:layout_marginまたはandroid:paddingで追加できます。

最終結果の例では、ボタン間に10dpのパディングがあります。

希望すると助かります!

-1

デバイスのdpiを確認するには、this appをダウンロードしてください。異なるレイアウトを作成するには

は、画面の解像度に応じて、リソースのフォルダを作成し、sw600dpするレイアウトsw320dp

変更sw320dp、sw700dpとしてそれを名前を付けます。

異なるデバイスは、デバイスのdpiに従って正確なレイアウトXMLを自動的に取得します。参照チェックthis

については

私はこの情報があなたの役に立つことを願っています。

関連する問題