2017-07-25 101 views
0

我目前正在尝试开发一个Android应用程序,但我暂时停留了一段时间,现在尝试缩放活动中的视图。如何在Android中构建支持所有屏幕尺寸和设备的UI

在图片中你可以看到分辨率宽度为10px(这只是为了让你更容易理解)。屏幕的尺寸从5英寸10英寸。蓝色矩形只是一个EditText,这是我想要在不同设备上缩放的。

因此,您可以看到,两个设备中的EditText具有相同的大小但像素数量不同。我希望这两个设备看起来都完全一样,我已经尝试了所有解决方案,但似乎没有任何东西能够真正解决我的问题。

(这仅是一个例子形象地说,我画,借以说明问题,但第二个形象是什么,我尽量做到和它真正出错)

enter image description here

这是我试图让固定:

enter image description here

+0

我不你不太了解你的问题。你究竟想达到什么目的?使所有设备中的编辑文本在px中具有相同的宽度?或者尽可能使宽度变宽? 请问您可以发布您的XML布局? – allo86

+0

@Al Lelopath我希望布局完全一样。正如你所看到的,editText大小相同,但是较大设备上的那个应该更大。如果有可能,我想使用'%'而不是'dp',但是没有... – muyat

+0

maxWidth应该帮助你在这里居中 –

回答

0

基本上是这样的,应该做的工作适合你:

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

将这个结合maxWidth和scrollView用于小屏幕,这应该很好。 –

+0

@ A.Steenbergen但是如果我需要使用DP来分离不同的视图或将SP用于文本大小呢? – muyat

+0

对于保证金,您应该使用DP,但是对于线性布局,即使使用layout_margins –

0

假设您正在使用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>