如何支持多个屏幕(三个不同设备中不同距离的按钮)
How to Supporting Multiple Screens (different distance button in three different device)
我正在尝试创建一个适用于任何类型屏幕的应用程序。
我创建了 4 种不同的布局类型(布局 - sw320dp、480dp、600dp、720dp)
我目前正在进行 "step ",我开始为 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 中的一个 more
这是代码。
<?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 平板电脑上启动了该应用程序 ..(即 galaxy tab 2 10.1、galaxy tab A 和 galaxy tab E)。
在 3 台设备上打开该应用程序后,我就注意到了这个东西 "abnormal" ...
"social icons" 和 TextView 之间的距离不同......(
特别是 galaxy tab 2 10.1 和 Galaxy Tab E,) 而 Galaxy tab A 图标和 TextView 的距离在 'xml ...
中设置
为什么两个设备的距离不仅等于正确的设备?? (两台设备的文字和查看图标距离相等,但与 Galaxy Tab A 不同)
至于其他组件,例如(带有应用程序图标的图像视图和带有应用程序名称的 TextView)尺寸和距离已得到遵守...
我怎样才能使所有设备上的所有内容都在 "perfect adaptable layout" 中,而不是每个设备都假设比例和距离不同??
我读了这个主题的官方指南,他在那里谈到 dp,它的布局等。
我留下了3台设备的照片。
您可以将 google 库 PercentRelativeLayout
与此库一起使用,您可以按百分比设置 width
和 height
的视图,这很棒,因为它们在所有屏幕上看起来相同,当然编码也不难。这里的例子:
<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
的官方文档
如有疑问,欢迎随时提问。
在您的 res
文件夹中为所有设备创建三个不同的 Layouts Folder
并相应地使用尺寸。
通用布局文件夹
res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge
完成 Normal/Medium 布局后,请按照以下步骤操作:
- 转换其他屏幕尺寸的正常尺寸。
- 将普通布局 xml 文件复制到其他文件夹。
- 根据您所在的文件夹更改所用维度的后缀
- 调整可绘制文件夹中的图像资源(宽度和高度 - 与我们用于转换尺寸的技术相同)并将它们放入各自的可绘制文件夹(drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable -xdpi 等等)。
- 那么您的布局应该可以在每台设备上正确定位。
用于转换值
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)
还引入了新的限定符
- 最小宽度
- 可用屏幕宽度
- 可用屏幕高度
在此处阅读更多相关信息 https://developer.android.com/guide/practices/screens_support.html
希望对您有所帮助。
我正在尝试创建一个适用于任何类型屏幕的应用程序。
我创建了 4 种不同的布局类型(布局 - sw320dp、480dp、600dp、720dp)
我目前正在进行 "step ",我开始为 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 中的一个 more
这是代码。
<?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 平板电脑上启动了该应用程序 ..(即 galaxy tab 2 10.1、galaxy tab A 和 galaxy tab E)。
在 3 台设备上打开该应用程序后,我就注意到了这个东西 "abnormal" ...
"social icons" 和 TextView 之间的距离不同......( 特别是 galaxy tab 2 10.1 和 Galaxy Tab E,) 而 Galaxy tab A 图标和 TextView 的距离在 'xml ...
中设置为什么两个设备的距离不仅等于正确的设备?? (两台设备的文字和查看图标距离相等,但与 Galaxy Tab A 不同)
至于其他组件,例如(带有应用程序图标的图像视图和带有应用程序名称的 TextView)尺寸和距离已得到遵守...
我怎样才能使所有设备上的所有内容都在 "perfect adaptable layout" 中,而不是每个设备都假设比例和距离不同??
我读了这个主题的官方指南,他在那里谈到 dp,它的布局等。
我留下了3台设备的照片。
您可以将 google 库 PercentRelativeLayout
与此库一起使用,您可以按百分比设置 width
和 height
的视图,这很棒,因为它们在所有屏幕上看起来相同,当然编码也不难。这里的例子:
<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
的官方文档如有疑问,欢迎随时提问。
在您的 res
文件夹中为所有设备创建三个不同的 Layouts Folder
并相应地使用尺寸。
通用布局文件夹
res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge
完成 Normal/Medium 布局后,请按照以下步骤操作:
- 转换其他屏幕尺寸的正常尺寸。
- 将普通布局 xml 文件复制到其他文件夹。
- 根据您所在的文件夹更改所用维度的后缀
- 调整可绘制文件夹中的图像资源(宽度和高度 - 与我们用于转换尺寸的技术相同)并将它们放入各自的可绘制文件夹(drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable -xdpi 等等)。
- 那么您的布局应该可以在每台设备上正确定位。
用于转换值
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)
还引入了新的限定符 - 最小宽度 - 可用屏幕宽度 - 可用屏幕高度
在此处阅读更多相关信息 https://developer.android.com/guide/practices/screens_support.html
希望对您有所帮助。