2017-05-08 91 views
1

我有420 dpi的手機密度屏幕。但是,當我從正常顯示更改爲小或大或更大,dpi值得到改變。如何設計用於支持所有屏幕的UI以及相應使用哪個限定符。Android多屏幕支持 - 密度和大小限定符

我在dimens.xml中使用絕對值,android會將這些值縮放到相應的密度,但它不會按預期生成適當的UI。

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:cardview="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/profileCard" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:baselineAligned="false" 
    android:elevation="6dp" 
    cardview:cardCornerRadius="6dp" 
    cardview:cardElevation="6dp" 
    cardview:cardPreventCornerOverlap="true" 
    cardview:cardUseCompatPadding="true" 
    cardview:contentPadding="0dp" 
    tools:targetApi="lollipop"> 

    <LinearLayout 
     android:id="@+id/artistLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center_horizontal" 
     android:orientation="vertical"> 

     <FrameLayout 
      android:id="@+id/artistCoverLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@drawable/youtube_thumbnail_background"> 

      <com.google.android.youtube.player.YouTubeThumbnailView 
       android:id="@+id/profileCoverThumbnail" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       android:alpha="0.62"/> 

      <ImageView 
       android:id="@+id/mCoverImage" 
       android:layout_width="match_parent" 
       android:layout_height="160dp" 
       android:background="@drawable/youtube_thumbnail_background" 
       android:alpha="0.62" /> 

      <ImageButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerInParent="true" 
       android:layout_gravity="center" 
       android:background="@null" 
       android:src="@mipmap/play" /> 

     </FrameLayout> 

     <LinearLayout 
      android:id="@+id/artistDetailLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/artistCoverLayout" 
      android:background="#f9f9f9"> 

      <ImageView 
       android:id="@+id/profile_image" 
       android:layout_width="60dp" 
       android:layout_height="60dp" 
       android:layout_alignBottom="@id/profileCoverThumbnail" 
       android:layout_alignParentBottom="true" 
       android:layout_marginLeft="13dp" 
       android:layout_marginTop="7dp" 
       android:src="@mipmap/ic_emp" /> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_toEndOf="@+id/profile_image" 
       android:layout_toRightOf="@+id/profile_image" 
       android:orientation="vertical"> 

       <TextView 
        android:id="@+id/profileName" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignBottom="@+id/profileCoverThumbnail" 
        android:layout_marginLeft="8.9dp" 
        android:layout_marginTop="7.4dp" 
        android:layout_toEndOf="@+id/profile_image" 
        android:layout_toRightOf="@+id/profile_image" 
        android:text="Name" 
        android:textColor="@color/artistTitleColor" 
        android:textSize="18.7sp" /> 

       <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginLeft="8.9dp" 
        android:layout_marginTop="7.4dp" 
        android:orientation="horizontal"> 

        <ImageView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:src="@drawable/ic_location" /> 

        <TextView 
         android:id="@+id/profileLocation" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_marginLeft="5dp" 
         android:text="City" 
         android:textColor="#4a4a4a" 
         android:textSize="12sp" /> 
       </LinearLayout> 

       <RatingBar 
        android:id="@+id/ratingBar" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:rating="3" 
        android:stepSize="1" 
        android:maxWidth="8.7dp" 
        android:layout_marginLeft="8.9dp" 
        android:layout_marginTop="7.4dp" 
        android:theme="@style/RatingBar" 
        style="@style/Widget.AppCompat.RatingBar.Small"/> 
      </LinearLayout> 
     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/genreLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/artistDetailLayout" 
      android:orientation="vertical" 
      android:layout_weight="1"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="10.5dp" 
       android:layout_marginLeft="17.9dp" 
       android:orientation="horizontal"> 


       <TextView 
        android:id="@+id/genretitle" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="5dp" 
        android:layout_marginBottom="10dp" 
        android:layout_marginLeft="8.6dp" 
        android:layout_marginRight="9dp" 
        android:text="Genres" 
        android:textColor="@color/artistTitleColor" 
        android:textSize="13.3sp" /> 

       <View 
        android:id="@+id/separator" 
        android:layout_width="match_parent" 
        android:layout_height="1dp" 
        android:layout_centerVertical="true" 
        android:layout_gravity="center_vertical" 
        android:background="#f2f2f2" /> 
      </LinearLayout> 
     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/skillLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/genreLayout" 
      android:orientation="vertical" 
      android:weightSum="2" 
      android:layout_weight="1"> 

      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="10.5dp" 
       android:layout_marginLeft="17.9dp" 
       android:orientation="horizontal" 
       android:layout_weight="1"> 

       <TextView 
        android:id="@+id/skilltitle" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="5dp" 
        android:layout_marginBottom="10dp" 
        android:layout_marginLeft="9.3dp" 
        android:layout_marginRight="9dp" 
        android:text="Skills" 
        android:textColor="@color/artistTitleColor" 
        android:textSize="13.3sp" /> 

       <View 
        android:id="@+id/separatorSkill" 
        android:layout_width="match_parent" 
        android:layout_height="1dp" 
        android:layout_centerVertical="true" 
        android:layout_gravity="center_vertical" 
        android:background="#f2f2f2" /> 
      </LinearLayout> 
     </LinearLayout> 
     <FrameLayout 
      android:id="@+id/mVisibilityLayout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:paddingBottom="3dp" 
      android:paddingTop="3dp" 
      android:paddingLeft="23dp" 
      android:paddingRight="14dp" 
      android:background="#f6f6f6"> 

      <TextView 
       android:id="@+id/mVisibilityTitle" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Visibility" 
       android:textSize="16sp" 
       android:layout_gravity="center_vertical" 
       android:textColor="#4a4a4a"/> 

      <android.support.v7.widget.SwitchCompat 
       android:id="@+id/mVisibilitySwitch" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical|right"/> 
     </FrameLayout> 
    </LinearLayout> 
</android.support.v7.widget.CardView> 
+0

如果你想聽我的意見,支持所有的屏幕避免任何視圖的高度或寬度設置靜態數量,做出的margin,padding這種靜態數字right right only –

+0

避免使用dimen.xml中的硬編碼大小作爲UI,而是使用wrap_content和weight,以便UI可以相應地在不同的設備上縮放自身。 – rajesh

+0

@rajesh但UI沒有像預期的那樣正確對齊,縮放時出現更多的空白空間 –

回答

0

創建文件夾,支持多屏設計,像

   layout-sw300dp, 
       layout-sw330dp, 
       layout-sw480dp, 
       layout-sw600dp, 
       layout-sw720dp. 

創造價值的文件夾

   values-sw300dp, 
       values-sw330dp, 
       values-sw480dp, 
       values-sw600dp, 
       values-sw720dp. 

將您的活動在所有佈局的文件夾,並在每個值的文件夾提dimens.xml 。

+0

480dp是與XXHDPI相對應的標準密度,但您如何確定300和330 DP? –

+0

有一些像Micromax AQ4501支持300dp和Moto E2支持330 DP的分辨率。 –

+0

我用oneplus 3t進行測試,當它的正常密度是420dpi時,但當我們改變小的顯示尺寸時,它會變成380dpi。如何解決這個問題? –

0

你可以把drawable放在不同的文件夾中,像defauld drawable和drwable-xhdpi等,在xml中,你不需要給任何視圖的靜態大小使用包裝內容或匹配父代,而不是靜態尺寸,也如果可以的話,還有一件事要儘量使用CSS,以便圖像在高分辨率時不會模糊。

希望它能幫助你。

1

利用具有權重和重量屬性的線性佈局。它會根據屏幕大小動態改變它的高度和寬度。 :)

試試這個

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="160dp"> 
    <FrameLayout 
     android:id="@+id/artistCoverLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/colorAccent"> 

     <com.google.android.youtube.player.YouTubeThumbnailView 
      android:id="@+id/profileCoverThumbnail" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:adjustViewBounds="true" 
      android:alpha="0.62"/> 

     <ImageView 
      android:id="@+id/mCoverImage" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@color/colorAccent" 
      android:alpha="0.62" /> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" 
      android:background="@null" 
      android:src="@mipmap/ic_launcher" /> 

    </FrameLayout> 
</LinearLayout> 

這可能有助於

+0

我使用垂直方向的線性佈局。第一個元素是YouTube視頻播放器。空白空間進入YouTube播放器視圖 –

+0

後佈局文件,以便我可以幫助@Jay –

+0

也發佈問題存在的快照 –