如何在Android中構建支持所有屏幕尺寸和設備的UI

我目前正在嘗試開發一個Android應用程序，但我暫時停留了一段時間，現在嘗試縮放活動中的視圖。如何在Android中構建支持所有屏幕尺寸和設備的UI

在圖片中你可以看到分辨率寬度爲10px（這只是爲了讓你更容易理解）。屏幕的尺寸從5英寸到10英寸。藍色矩形只是一個EditText，這是我想要在不同設備上縮放的。

因此，您可以看到，兩個設備中的EditText具有相同的大小但像素數量不同。我希望這兩個設備看起來都完全一樣，我已經嘗試了所有解決方案，但似乎沒有任何東西能夠真正解決我的問題。

（這僅是一個例子形象地說，我畫，藉以說明問題，但第二個形象是什麼，我儘量做到和它真正出錯）

這是我試圖讓固定：

來源

2017-07-25 muyat

我不你不太瞭解你的問題。你究竟想達到什麼目的？使所有設備中的編輯文本在px中具有相同的寬度？或者儘可能使寬度變寬？請問您可以發佈您的XML佈局？ – allo86

@Al Lelopath我希望佈局完全一樣。正如你所看到的，editText大小相同，但是較大設備上的那個應該更大。如果有可能，我想使用'％'而不是'dp'，但是沒有... – muyat

maxWidth應該幫助你在這裏居中 –

基本上是這樣的，應該做的工作適合你：

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

來源

2017-07-25 16:40:52

將這個結合maxWidth和scrollView用於小屏幕，這應該很好。 –

@ A.Steenbergen但是如果我需要使用DP來分離不同的視圖或將SP用於文本大小呢？ – muyat

對於保證金，您應該使用DP，但是對於線性佈局，即使使用layout_margins –

假設您正在使用Android Studio。您可以導入此百分比庫，使您可以設置各自寬度和高度的百分比。這將使您能夠根據設備（例如手機，7英寸平板電腦，10英寸平板電腦）設置不同的百分比寬度和高度，並獲得相同的外觀和感覺。我在當前的項目中使用它，並且完美運行。

，並確保你必須爲每個設備即文件夾應該如下不同的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).

然後加入支持在AndroidManifest.xml中的畫面，如下圖所示。

只需添加以下依賴於你的gradle產出即

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

然後如下圖所示使用...請注意如何百分比來設置佈局寬度和高度即

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>

來源

2017-07-25 16:49:14 nocholla

如何在Android中構建支持所有屏幕尺寸和設備的UI

回答

相關問題