android - 布局看起来在一些设备上看起来搞砸了

我的布局非常奇怪。它看起来就像在eclipse XML编辑器和我的三星Galaxy中设计的，但它在我的旧手机xperia x10 mini中搞砸了。我只能假设这也会发生在其他设备上。android - 布局看起来在一些设备上看起来搞砸了

如果有人可以帮助解决这个问题，我将不胜感激。

下面是两个屏幕截图和XML代码。

它看起来如何在Eclipse布局编辑器，在我的三星GALAXY S4迷你

它的外观索尼Xperia X10的迷你

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    android:gravity="center" 
    android:layout_height="wrap_content" > 

    <FrameLayout 
     android:layout_marginTop="7dp" 
     android:layout_gravity="center" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"> 

     <View android:layout_marginTop="19dp" android:layout_marginLeft="19dp" android:layout_height="249dp" android:layout_width="2dp" android:background="#B2CFEF"/> 
     <View android:layout_marginTop="19dp" android:layout_marginLeft="189dp" android:layout_height="249dp" android:layout_width="2dp" android:background="#B2CFEF"/> 
     <View android:layout_marginTop="18dp" android:layout_marginLeft="20dp" android:layout_height="2dp" android:layout_width="170dp" android:background="#B2CFEF"/> 
     <View android:layout_marginTop="267dp" android:layout_marginLeft="19dp" android:layout_height="2dp" android:layout_width="171dp" android:background="#B2CFEF"/> 

     <ImageView style="@style/ta_img" android:id="@+id/ta_lu"          android:layout_marginTop="52dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_lc"          android:layout_marginTop="124dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_ld"          android:layout_marginTop="197dp" /> 

     <ImageView style="@style/ta_img" android:id="@+id/ta_ru" android:layout_marginLeft="170dp" android:layout_marginTop="52dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_rc" android:layout_marginLeft="170dp" android:layout_marginTop="124dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_rd" android:layout_marginLeft="170dp" android:layout_marginTop="197dp" /> 

     <ImageView style="@style/ta_img" android:id="@+id/ta_tl" android:layout_marginLeft="37dp"          /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_tc" android:layout_marginLeft="84dp"          /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_tr" android:layout_marginLeft="132dp"         /> 

     <ImageView style="@style/ta_img" android:id="@+id/ta_bl" android:layout_marginLeft="37dp" android:layout_marginTop="249dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_bc" android:layout_marginLeft="84dp" android:layout_marginTop="249dp" /> 
     <ImageView style="@style/ta_img" android:id="@+id/ta_br" android:layout_marginLeft="132dp" android:layout_marginTop="249dp" /> 

    </FrameLayout> 

</LinearLayout>

，这是ImageViews的风格

<style name="ta_img" > 
     <item name="android:layout_width">40dp</item> 
     <item name="android:layout_height">40dp</item> 
     <item name="android:clickable">true</item> 
     <item name="android:src">@drawable/ta</item>  
</style>

任何想法???

编辑：我把所有的dp值除以2来看看问题是我使用的是高dp值。这是同时有两个版本的结果：

来源

2015-10-07 Anonymous

您想如何缩放这个视图？它应该始终与设备的宽度/高度大致相同，还是希望它在每个设备上保持相同的物理尺寸。我问的原因是你目前的布局不是很有活力，很可能在许多设备上看起来很奇怪。 – NasaGeek

理想情况下，它会缩放到设备尺寸，并在更大的设备中看起来更大。我知道我贴的xml不能缩放，但这只是第一步。 – Anonymous

有几个问题：1）Xperia的Android版本是什么？ API级别？ 2）什么是可绘制的'@ drawable/ta'风格。那是你可以分享的东西吗？屏幕在LDPI 240x320 px屏幕的模拟器上原样显示。 – Cheticamp

约束布局可以轻松地调整，以适应任何屏幕上，没有任何复杂的层次，就像这样：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 

<View 
    android:id="@+id/left_border" 
    android:layout_width="2dp" 
    android:layout_height="0dp" 
    android:layout_margin="@dimen/border_margin" 
    android:background="#B2CFEF" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<ImageView 
    android:id="@+id/ta_lu" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/left_border" 
    app:layout_constraintRight_toRightOf="@id/left_border" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintBottom_toTopOf="@id/ta_lc" /> 

<ImageView 
    android:id="@+id/ta_lc" 
    app:layout_constraintLeft_toLeftOf="@id/left_border" 
    app:layout_constraintRight_toRightOf="@id/left_border" 
    app:layout_constraintTop_toBottomOf="@id/ta_lu" 
    app:layout_constraintBottom_toTopOf="@id/ta_ld" 
    style="@style/ta_img" /> 

<ImageView 
    android:id="@+id/ta_ld" 
    app:layout_constraintLeft_toLeftOf="@id/left_border" 
    app:layout_constraintRight_toRightOf="@id/left_border" 
    app:layout_constraintTop_toBottomOf="@id/ta_lc" 
    app:layout_constraintBottom_toBottomOf="parent" 
    style="@style/ta_img" /> 

<View 
    android:id="@+id/right_border" 
    android:layout_width="2dp" 
    android:layout_height="0dp" 
    android:layout_margin="@dimen/border_margin" 
    android:background="#B2CFEF" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<ImageView 
    android:id="@+id/ta_ru" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/right_border" 
    app:layout_constraintRight_toRightOf="@id/right_border" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintBottom_toTopOf="@id/ta_rc" /> 

<ImageView 
    android:id="@+id/ta_rc" 
    app:layout_constraintLeft_toLeftOf="@id/right_border" 
    app:layout_constraintRight_toRightOf="@id/right_border" 
    app:layout_constraintTop_toBottomOf="@id/ta_ru" 
    app:layout_constraintBottom_toTopOf="@id/ta_rd" 
    style="@style/ta_img" /> 

<ImageView 
    android:id="@+id/ta_rd" 
    app:layout_constraintLeft_toLeftOf="@id/right_border" 
    app:layout_constraintRight_toRightOf="@id/right_border" 
    app:layout_constraintTop_toBottomOf="@id/ta_rc" 
    app:layout_constraintBottom_toBottomOf="parent" 
    style="@style/ta_img" /> 

<View 
    android:id="@+id/top_border" 
    android:layout_width="0dp" 
    android:layout_height="2dp" 
    android:layout_margin="@dimen/border_margin" 
    android:background="#B2CFEF" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<ImageView 
    android:id="@+id/ta_tl" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="@id/ta_tc" 
    app:layout_constraintTop_toTopOf="@id/top_border" 
    app:layout_constraintBottom_toBottomOf="@id/top_border" /> 

<ImageView 
    android:id="@+id/ta_tc" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/ta_tl" 
    app:layout_constraintRight_toRightOf="@id/ta_tr" 
    app:layout_constraintTop_toTopOf="@id/top_border" 
    app:layout_constraintBottom_toBottomOf="@id/top_border" /> 

<ImageView 
    android:id="@+id/ta_tr" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/ta_tc" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@id/top_border" 
    app:layout_constraintBottom_toBottomOf="@id/top_border" /> 

<View 
    android:id="@+id/bottom_border" 
    android:layout_width="0dp" 
    android:layout_height="2dp" 
    android:layout_margin="@dimen/border_margin" 
    android:background="#B2CFEF" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toBottomOf="parent" /> 

<ImageView 
    android:id="@+id/ta_bl" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="@id/ta_bc" 
    app:layout_constraintTop_toTopOf="@id/bottom_border" 
    app:layout_constraintBottom_toBottomOf="@id/bottom_border" /> 

<ImageView 
    android:id="@+id/ta_bc" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/ta_bl" 
    app:layout_constraintRight_toRightOf="@id/ta_br" 
    app:layout_constraintTop_toTopOf="@id/bottom_border" 
    app:layout_constraintBottom_toBottomOf="@id/bottom_border" /> 

<ImageView 
    android:id="@+id/ta_br" 
    style="@style/ta_img" 
    app:layout_constraintLeft_toLeftOf="@id/ta_bc" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@id/bottom_border" 
    app:layout_constraintBottom_toBottomOf="@id/bottom_border" />

调整页边距，只是改变border_margin在dimens.xml。我用下面的截图下面的值，你可以随意调整：

<dimen name="border_margin">40dp</dimen>

以下是截图：

来源

2017-07-13 03:46:54

使用高DP值大多引入在小屏幕失真。如果你打算支持这些设备，有两件事情可以做：

为-small设备创建另一个布局。
更改您的布局以使用layout_weight或RelativeLayout。

在我看来，尽管第一个更重要，但两者都是最好的做法。

来源

2015-10-07 20:49:46

我怀疑你现在看到的问题是由于Xperia x10的相对较小的屏幕（240x320px）。当您尝试将layout_marginTop和layout_marginLeft设置为较高的dp时，实际可能会超出手机的宽度/高度，从而导致您看到的布局。

我建议在RelativeLayout之内利用多个LinearLayout以获得更具可扩展性的布局。您可以沿着屏幕的一个边缘，并且在这些布局中您可以放置您的ImageView s。通过给予每个ImageView相同的layout_weight，它们可以沿着LinearLayout的长度均匀分布。

来源

2015-10-07 20:49:54 NasaGeek

这也是首先想到的，所以我做了相同的布局，将所有的dp值除以2。仍然是同样的结果...只是更小！我会用它张贴一张照片 – Anonymous

你可以看看这个library。该图书馆将帮助您根据不同的屏幕尺寸缩放视图。

编辑：这是图书馆的工作原理。

您正在使用

对于如

<View android:layout_marginTop="@dimen/_15sdp" android:layout_marginLeft="@dimen/_15sdp" android:layout_height="@dimen/_200sdp" android:layout_width="@dimen/_2sdp" android:background="#B2CFEF"/>

还请大家注意，我上面使用的数值仅供参考，您可以简单地使用@dimen/_sdp而不是正常的dp。你将不得不尝试找出适合你需要的价值。

来源

2017-07-12 13:09:40 Rahulrr2602

来自官方的方针约Supporting Multiple Screens。

运行Android的各种设备，提供不同的屏幕尺寸和密度。对于应用程序，Android系统提供跨设备的一致开发环境，并处理大部分工作，以将每个应用程序的用户界面调整到显示的上的屏幕。同时，系统提供的API可让您控制应用程序的UI，以获得特定的屏幕尺寸和密度，以便针对不同的屏幕配置优化您的UI设计。

例如，您可能需要为平板电脑的UI是从handsets.Although系统的UI不同的执行缩放和调整，使不同的屏幕应用程序的工作，你应该优化工作您的不同的屏幕尺寸和密度的应用程序。在此过程中，您最大限度地提高所有设备的用户体验和用户相信你应用程序实际上是专为他们的设备，而不是简单地

拉伸以适应屏幕上的设备。

为了支持不同的屏幕尺寸，您必须有不同尺寸的图像，您将保存在不同的文件夹中。

Drawable Logic

sw720dp   10.1” tablet 1280x800 mdpi 

sw600dp   7.0” tablet 1024x600 mdpi 

sw480dp   5.4” 480x854 mdpi 
sw480dp   5.1” 480x800 mdpi 

xxhdpi   5.5" 1080x1920 xxhdpi 
xxhdpi   5.5" 1440x2560 xxhdpi 

xhdpi   4.7” 1280x720 xhdpi 
xhdpi   4.65” 720x1280 xhdpi 

hdpi    4.0” 480x800 hdpi 
hdpi    3.7” 480x854 hdpi 

mdpi    3.2” 320x480 mdpi 

ldpi    3.4” 240x432 ldpi 
ldpi    3.3” 240x400 ldpi 
ldpi    2.7” 240x320 ldpi

读Responsive UI with ConstraintLayout

FYI

ConstraintLayout负责管理的定位和可视化组件（也被称为窗口小部件的上浆行为）0123它包含。

来源

2017-07-13 06:52:25

android - 布局看起来在一些设备上看起来搞砸了

回答

相关问题