如何支持多个屏幕(三个不同设备中的不同距离按钮)

时间:2016-03-11 09:58:04

标签: android android-layout android-fragments android-linearlayout android-screen-support

我正在尝试创建适合任何类型屏幕的应用。

我创建了4种不同的布局类型(布局 - sw320dp,480dp,600dp,720dp)

我目前正在进行"步骤"我开始为那些设备的布局创建sw-720dp,然后为10"

这是activity_main.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <include layout="@layout/toolbar" />

        <FrameLayout
            android:layout_below="@+id/toolbar"
            android:id="@+id/fragment_container"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:foreground="@drawable/shadow_toolbar"/>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/nav_body_main" />

</android.support.v4.widget.DrawerLayout>

然后我设计了片段的布局......我添加了一个按钮和浮动动作按钮,将我们自己插入社交引用(facebook twitter等)。 对于后者,我给出了dp中的大小,并且在更多的

之一中越来越远距离dp

这是代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingEnd="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <Button
        android:id="@+id/button_vai_assistenza"
        android:layout_width="540dp"
        android:layout_height="65dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/custom_button"
        android:text="INIZIA SUBITO!"
        android:textColor="@drawable/custom_textcolor_button"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/textView_nome_app"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView_logo"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"
        android:text="Assistenza Copyworld"
        android:textColor="#000000"
        android:textSize="35dp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageView_logo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="30dp"
        android:src="@drawable/logo_nav_grande" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView_copyright_benv"
        android:layout_alignStart="@+id/textView_copyright_benv"
        android:layout_below="@+id/button_vai_assistenza"
        android:layout_marginTop="122dp"
        android:text="www.copyworld.it"
        android:textSize="25dp" />

    <RelativeLayout
        android:id="@+id/RelativeLayout_social"
        android:layout_width="wrap_content"
        android:layout_height="95dp"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="12dp"
        android:orientation="horizontal">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_facebook"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:adjustViewBounds="false"
            android:src="@drawable/fb_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_twitter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_facebook"
            android:layout_toRightOf="@+id/float_social_facebook"
            android:src="@drawable/tw_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_linkedin"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_twitter"
            android:layout_toRightOf="@+id/float_social_twitter"
            android:src="@drawable/li_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_youtube"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_linkedin"
            android:layout_toRightOf="@+id/float_social_linkedin"
            android:src="@drawable/yt_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />
    </RelativeLayout>

    <TextView
        android:id="@+id/textView_copyright_benv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="22dp"
        android:text="Copyright © 2016 Copyworld srl " />

</RelativeLayout>

然后我在我可用的3个平板电脑上启动了应用程序..(即星系标签2 10.1,星系标签A和星系标签E)。

只要应用程序在3台设备上打开,我就注意到了这个问题&#34;异常&#34; ...

&#34;社交图标&#34;和TextView之间的距离不同......( 特别是galaxy tab 2 10.1和Galaxy Tab E,)而Galaxy选项卡A图标和TextView的距离正好在&#39; xml ...

中设置

为什么这两个设备的距离不仅等于正确的设备? (这两个设备有文本并以相同的距离查看图标,但与Galaxy Tab A上的图标不同)

对于其他组件,例如(带有应用程序图标的图像视图和带有应用程序名称的TextView),尺寸和距离都得到了尊重......

我该怎样做才能使所有东西都在一个完美的适应性布局中#34;在没有它们的所有设备上,它们假设比例和距离不同??

我阅读了这个主题的官方指南,在那里他谈到了dp,它的布局等。

我留下了3台设备附带的图片。

Galaxy Tab E and 10.1

Galaxy Tab A

2 个答案:

答案 0 :(得分:2)

您可以在此库中使用Google图书馆PercentRelativeLayout,您可以按照百分比设置widthheight,这很棒,因为在所有屏幕中它们看起来都一样,当然它也是如此编码并不难。这里的例子:

<android.support.percent.PercentRelativeLayout
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

还在build.gradle中添加此行

dependencies {
    compile 'com.android.support:percent:23.2.0'
}

以及Google https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

的官方文档

如果您有任何问题,请随时提出。

答案 1 :(得分:0)

Layouts Folder文件夹中为所有设备创建三个不同的res,并相应地使用这些维度。

通用布局文件夹

res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge

完成正常/中等布局后,请按照以下步骤操作:

  1. 转换其他屏幕尺寸的正常尺寸。
  2. 将Normal Layout xml文件复制到其他文件夹中。
  3. 根据您所在的文件夹更改所用尺寸的后缀
  4. 调整可绘制文件夹中的图像资源(宽度和高度 - 与我们用于转换尺寸的技术相同)并将它们放在各自的可绘制文件夹中(drawable-ldpi,drawable-mdpi,drawable-hdpi,drawable-xdpi等等。)。
  5. 然后,您的布局应该能够在每个设备上正确定位。
  6. 用于转换值

    0.75 - ldpi  (small)   //mdpi dimens *0.75
    1.0  - mdpi  (normal)  //First create these dimensions
    1.5  - hdpi  (large)   //mdpi dimens *1.5
    2.0  - xhdpi (xLarge)  //mdpi dimens *2.0
    

    例如

    android:layout_width="66dip" //in normal
    android:layout_width="100dip"//in large 66*1.5=100(approx)
    android:layout_width="52dip" //in small 66*0.75=52(approx)
    

    此外,还推出了新的限定符   - 最小宽度   - AvailableScreenWidth   - AvailableScreenHeight

    在此处详细了解https://developer.android.com/guide/practices/screens_support.html

    我希望这会有所帮助。