如何在Android中构建支持所有屏幕尺寸和设备的UI

Question

I'm currently trying to develop an android application but I've been stuck for a while now trying to scale the views in an activity. 我目前正在尝试开发一个android应用程序，但是现在试图扩展活动中的视图已经停留了一段时间。

In the picture you can see that the resolution-width is 10px (It's only to make it more understandable for you guys) at both devices. 在图片中，您可以看到两个设备的resolution-width为10px （这只是为了让大家更容易理解）。 The size of the screens differentiate from 5 inch to 10 inch . 屏幕的尺寸从5英寸到10英寸不等。 The blue rectangle is just an EditText which is what I want to scale on different devices. 蓝色矩形只是一个EditText，这是我要在不同设备上缩放的大小。

So as you can see, the EditText in both devices have same sizes but different amount of pixels. 如您所见，两个设备中的EditText大小相同，但像素数量不同。 I want both devices to look completely the same and I have tried everything to fix this but nothing seems to really work out for me. 我希望这两种设备看起来完全一样，并且我已尽一切努力解决了这个问题，但似乎没有什么对我真正有用。

(This is only an example Image that I draw to show the problem, but the second image is what I try to make and where it really goes wrong) （这只是我用来显示问题的示例图像，但是第二个图像是我尝试制作的图像以及它真正出问题的地方）

This is what I'm trying to get fixed: 这是我要解决的问题：

Answer 1

Basically something like this, should do the work for you : 基本上像这样的事情，应该为您完成工作：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="horizontal"
        android:weightSum="100">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="10" />

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10" />

</LinearLayout>

Answer 2

Assuming that you are using Android Studio. 假设您正在使用Android Studio。 You can import this percent library that enables you to set percentages for your respective widths and heights. 您可以导入该百分比库，该库使您可以为各自的宽度和高度设置百分比。 This will enable you to set a different percentage width and height based on device ie phone, 7 inch tablet, 10 inch tablet and get the same look and feel. 这将使您能够根据设备（例如手机，7英寸平板电脑，10英寸平板电脑）设置不同的宽度和高度百分比，并获得相同的外观和感觉。 I used it in my current project and it worked perfectly. 我在当前项目中使用了它，并且效果很好。

And ensure that you have different XML files for each device ie Folders should be as follows: 并确保每个设备具有不同的XML文件，即文件夹应如下所示：

layout (XML files for phone),
layout-sw600dp (XML files for 7 inch Tablet),
layout-sw720dp (XML files for 10 inch Tablet),
layout-w600dp (XML files for 7 inch Tablet),
layout-w720dp (XML files for 10 inch Tablet).

Then add the screen supported on the AndroidManifest.xml as shown below. 然后添加AndroidManifest.xml支持的屏幕，如下所示。

Simply add the following dependency to your gradle ie 只需将以下依赖项添加到您的gradle即

compile 'com.android.support:percent:25.3.0'

Then use as shown below ... Notice how the percentages are used to set the layout width and height ie 然后使用，如下所示。...请注意如何使用百分比来设置布局的宽度和高度，即

app:layout_widthPercent="100%"
app:layout_heightPercent="35%"

(Refer to code below)

    *********************************************************************
    //** activity_main.xml
    *********************************************************************

    <android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        tools:context=".MainActivity">

        <!-- Begin Header Section -->
        <RelativeLayout
            android:id="@+id/headerSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="55%">

            <android.support.v4.view.ViewPager
                android:id ="@+id/spotlightViewPager"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content">
            </android.support.v4.view.ViewPager>

            <RelativeLayout
                android:id="@+id/headerRight"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" >

                <Button
                    android:id="@+id/shareButton"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_marginRight="5dp"
                    android:layout_marginTop="5dp"
                    android:theme="@style/ShareButtonBackgroundTheme"
                    android:background="@drawable/shape"
                    android:text="@string/mainShare" />
            </RelativeLayout>

        </RelativeLayout>
        <!-- End Header Section -->

        <!-- Begin Social & Weather Section -->
        <RelativeLayout
            android:id="@+id/socialWeatherSection"
            android:layout_below="@id/headerSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="10%">

            <RelativeLayout
                android:id="@+id/socialWeatherLeft"
                android:layout_width="140dip"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true" >

                <GridView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/socialmediaGridView"
                    android:horizontalSpacing="1dp"
                    android:stretchMode="columnWidth"
                    android:gravity="center"
                    android:background="#e5e5e5">
                </GridView>
            </RelativeLayout>

            <HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/socialWeatherLeft"
                android:scrollbars="none"
                android:id="@+id/hsv"
                android:layout_margin="1dp"
                android:fillViewport="false">

                <LinearLayout
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <GridView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/weatherGridView"
                        android:horizontalSpacing="1dp"
                        android:stretchMode="columnWidth"
                        android:gravity="center"
                        android:background="#e5e5e5">
                    </GridView>

                </LinearLayout>

            </HorizontalScrollView>

        </RelativeLayout>
        <!-- End Social & Weather Section -->

        <!-- Begin Grid Navigation Section -->
        <RelativeLayout
            android:id="@+id/gridSection"
            android:layout_below="@+id/socialWeatherSection"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="35%">

            <GridView
                android:id="@+id/gridView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:verticalSpacing="2dp"
                android:horizontalSpacing="2dp"
                android:layout_alignParentLeft="true"
                android:numColumns="3"
                android:stretchMode="columnWidth"
                android:gravity="center"
                android:background="#e5e5e5">
            </GridView>

        </RelativeLayout>
        <!-- End Grid Navigation Section -->

    </android.support.percent.PercentRelativeLayout>

**************************************************************
//** AndroidManifest.xml
**************************************************************

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="foo.foo.foo">

    <!-- permission for GPS location -->
    <!--<uses-permission android:name="android.permission.INTERNET" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />-->
    <!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />-->
    <!--<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />-->
    <!--<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />-->
    <!--<uses-permission android:name="android.permission.CALL_PHONE" />-->
    <!--<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>-->
    <!--<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />-->

    <!-- Tablet Fix -->
    <uses-feature android:name="android.permission.INTERNET" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_FINE_LOCATION" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_NETWORK_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.ACCESS_WIFI_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CHANGE_WIFI_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CHANGE_NETWORK_STATE" android:required="false"/>
    <uses-feature android:name="android.permission.CALL_PHONE" android:required="false"/>
    <uses-feature android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:required="false"/>
    <uses-feature android:name="android.permission.READ_EXTERNAL_STORAGE" android:required="false"/>

    <application
        android:name=".TestApplication"
        android:allowBackup="true"
        android:hardwareAccelerated="false"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".SplashScreen" android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name=".MAINACTIVITY" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.SEND" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="image/*" />
            </intent-filter>
        </activity>

        <activity android:name=".AgencyActivity"></activity>

    </application>

    <supports-screens
        android:resizeable="false"
        android:smallScreens="true"
        android:normalScreens="true"
        android:largeScreens="true"
        android:xlargeScreens="true"
        android:anyDensity="true"
        android:requiresSmallestWidthDp="320"
        android:compatibleWidthLimitDp="320"
        android:largestWidthLimitDp="720"/>

    <compatible-screens>
        <!--no small size screens -->

        <!--all normal size screens -->
        <screen android:screenSize="normal" android:screenDensity="ldpi" />
        <screen android:screenSize="normal" android:screenDensity="mdpi" />
        <screen android:screenSize="normal" android:screenDensity="hdpi" />
        <screen android:screenSize="normal" android:screenDensity="xhdpi" />

        <!-- all large size screens -->
        <screen android:screenSize="large" android:screenDensity="ldpi" />
        <screen android:screenSize="large" android:screenDensity="mdpi" />
        <screen android:screenSize="large" android:screenDensity="hdpi" />
        <screen android:screenSize="large" android:screenDensity="xhdpi" />

        <!-- all xlarge size screens -->
        <screen android:screenSize="xlarge" android:screenDensity="ldpi" />
        <screen android:screenSize="xlarge" android:screenDensity="mdpi" />
        <screen android:screenSize="xlarge" android:screenDensity="hdpi" />
        <screen android:screenSize="xlarge" android:screenDensity="xhdpi" />

        <!-- Special case for Nexus 7 -->
        <screen android:screenSize="large" android:screenDensity="213" />

        <screen android:screenSize="normal" android:screenDensity="480" />
        <screen android:screenSize="large" android:screenDensity="480" />
        <screen android:screenSize="xlarge" android:screenDensity="480" />`

    </compatible-screens>

</manifest>

如何在Android中构建支持所有屏幕尺寸和设备的UI

问题描述

2 个解决方案

解决方案1
0 2017-07-25 16:40:52

解决方案2
0 2017-07-25 16:49:14

如何在Android中构建支持所有屏幕尺寸和设备的UI

问题描述

2 个解决方案

解决方案1 0 2017-07-25 16:40:52

解决方案2 0 2017-07-25 16:49:14

解决方案1
0 2017-07-25 16:40:52

解决方案2
0 2017-07-25 16:49:14