如何为不同尺寸的Android创建UI

时间:2019-06-01 12:29:47

标签: android xamarin xamarin.android

我已经在两部手机上进行过测试。 摩托G5s Mi note 7 pro

我的UI在Moto g5s上看起来很完美 但是在Mi note 7 pro上,字体看起来很小。

我已经附上了两部手机的屏幕截图。

Moto G5:http://prntscr.com/nw9rhi

Note 7专业版:http://prntscr.com/nw9r4y

实际用户界面:http://prntscr.com/nw9rvv

我所期望的在所有设备上看起来都一样。

这是我的布局。我有一个viewpager。因此为Text创建了Item布局。当滑动它时,它会像这样更改文本。

我想要这样。我只在不同手机上设计有问题。 http://prntscr.com/nw9u1j

//TourLayout.axml
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

 <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tourbg"
        android:scaleType="fitXY"
        android:adjustViewBounds="true"
        android:id="@+id/imageView" />
    <LinearLayout 
          android:layout_width="match_parent"
          android:weightSum="1"
          android:orientation="vertical"
          android:layout_height="match_parent">
           <LinearLayout 
                android:layout_width="match_parent"
                android:layout_weight="0.24"
                android:layout_height="0dp">
            <RelativeLayout
                android:id="@+id/welcomeLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom">
                <JammberSplits.Droid.Views.PieView
                    android:layout_height="@dimen/margin_90"
                    android:id="@+id/pieView"
                    android:layout_marginLeft="@dimen/margin_30"
                    android:layout_marginTop="@dimen/margin_10"
                    android:layout_width="@dimen/margin_90">
                </JammberSplits.Droid.Views.PieView>
            </RelativeLayout>
          </LinearLayout>
         <LinearLayout 
            android:layout_width="match_parent"
            android:layout_weight="0.56"
            android:layout_height="0dp">
             <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/LoginCenterLayout">
                <android.support.v4.view.ViewPager
                    android:id="@+id/viewpager"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"/>

             </RelativeLayout>
        </LinearLayout>
         <LinearLayout 
            android:layout_width="match_parent"
            android:layout_weight="0.20"
            android:layout_height="0dp">
           <RelativeLayout
                android:id="@+id/SignUpLayout"
                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_centerHorizontal="true">

            <LinearLayout        
                                android:id="@+id/viewPagerCountDots"                         
                                android:layout_width="match_parent"                      
                                android:layout_height="match_parent"                        
                                android:layout_marginBottom="@dimen/margin_05"                      
                                android:layout_above="@+id/btnNext"                      
                                android:layout_centerHorizontal="true"                   
                                android:gravity="center"                         
                                android:orientation="horizontal" />
                        <Button
                          android:layout_width="wrap_content"
                          android:layout_height="@dimen/margin_40"
                          android:text="Next"
                          android:layout_marginTop="@dimen/margin_10"
                          android:layout_marginBottom="@dimen/margin_20"
                          android:layout_alignParentBottom="true"
                          android:id="@+id/btnNext"
                         android:textColor="@color/colorWhite"
                         android:textSize="@dimen/textSize_15"
                         android:background="@drawable/button_transparen"
                         app:fontFamily="@font/lato_light"
                         android:paddingLeft="@dimen/margin_50"
                         android:paddingRight="@dimen/margin_50"
                         android:layout_centerHorizontal="true"
                         android:inputType="none|textCapWords" />
                    </RelativeLayout>
            </LinearLayout>
        </LinearLayout>
</RelativeLayout>

//TourItemLayout.axml

 <?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">



    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SONG"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:id="@+id/lblTourWizFirstLine"
            android:layout_marginRight="@dimen/margin_38"
            app:fontFamily="@font/lato_bold"
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"
             />
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="SPLITS"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizSecondLine"
            android:layout_below="@+id/lblTourWizFirstLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>
        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="MADE"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizThirdLine"
            android:layout_below="@+id/lblTourWizSecondLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="EASY"
            android:lines="1"
            android:maxLines="1"
            android:ellipsize="end"
            android:layout_marginRight="@dimen/margin_38"
            android:layout_marginTop="@dimen/margin_20_minus"
            android:id="@+id/lblTourWizFourthLine"
            android:layout_below="@+id/lblTourWizThirdLine"
            app:fontFamily="@font/lato_bold" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:textSize="@dimen/textSize_73"/>

        <TextView 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Invite your co-writers\nto collaborate on a\nnew project"
            android:layout_marginTop="@dimen/margin_70"
            android:lines="3"
            android:maxLines="3"
            android:ellipsize="end"
            android:id="@+id/lblDescriptionText"
            android:layout_below="@+id/lblTourWizThirdLine"
            app:fontFamily="@font/lato_regular" 
            android:textColor="@color/colorWhite"
            android:layout_marginLeft="@dimen/margin_38"
            android:layout_marginRight="@dimen/margin_85"
            android:textSize="@dimen/textSize_18"/>

        <!--<ImageView android:id="@+id/TextTour"
                   android:src="@drawable/tour1text"
                   android:layout_centerVertical="true"

                   android:layout_marginLeft="@dimen/margin_38"
                   android:scaleType="fitStart" 
                   android:layout_width="wrap_content"
                   android:layout_height="wrap_content"/>-->

    </RelativeLayout>



</RelativeLayout>

3 个答案:

答案 0 :(得分:1)

有很多方法可以实现这种行为。例如,您可以为具有最小宽度限定符的其他电话定义调光资源。

https://developer.android.com/training/multiscreen/screensizes

答案 1 :(得分:0)

为了支持多种设备和多种屏幕支持,提供了不同的选项。

1)您可以在res-> values文件夹中创建不同的dimens文件dimens.xml(small,normal,large,xlarge)。

2)为不同的屏幕尺寸提供不同的xml文件。 (不推荐)

3)使用约束布局。

答案 2 :(得分:0)

根据您的描述,您想要支持不同的屏幕尺寸,我发现您可以看一看的文章:

1。声明应用程序支持的屏幕尺寸

2。不同屏幕尺寸的布局

https://www.c-sharpcorner.com/article/xamarin-android-create-android-app-supporting-multiple-screens/