Android多屏幕支持 - 密度和大小限定符

问题描述：

我有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>

如果你想听我的意见，支持所有的屏幕避免任何视图的高度或宽度设置静态数量，做出的margin，padding这种静态数字right right only –

避免使用dimen.xml中的硬编码大小作为UI，而是使用wrap_content和weight，以便UI可以相应地在不同的设备上缩放自身。 – rajesh

@rajesh但UI没有像预期的那样正确对齐，缩放时出现更多的空白空间 –

答

创建文件夹，支持多屏设计，像

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

创造价值的文件夹

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

将您的活动在所有布局的文件夹，并在每个值的文件夹提dimens.xml 。

480dp是与XXHDPI相对应的标准密度，但您如何确定300和330 DP？ –

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

我用oneplus 3t进行测试，当它的正常密度是420dpi时，但当我们改变小的显示尺寸时，它会变成380dpi。如何解决这个问题？ –

答

你可以把drawable放在不同的文件夹中，像defauld drawable和drwable-xhdpi等，在xml中，你不需要给任何视图的静态大小使用包装内容或匹配父代，而不是静态尺寸，也如果可以的话，还有一件事要尽量使用CSS，以便图像在高分辨率时不会模糊。

希望它能帮助你。

答

利用具有权重和重量属性的线性布局。它会根据屏幕大小动态改变它的高度和宽度。 :)

试试这个

<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>

这可能有助于

我使用垂直方向的线性布局。第一个元素是YouTube视频播放器。空白空间进入YouTube播放器视图 –

后布局文件，以便我可以帮助@Jay –

也发布问题存在的快照 –

Android多屏幕支持 - 密度和大小限定符

相关推荐