android - 如何为不同大小的 Android 创建 UI

Question

我在两部手机上进行了测试。摩托G5s小米note 7 pro

我的用户界面在 Moto g5s 上看起来很完美但在 Mi note 7 pro 上它看起来很小。

我附上了两部手机的截图。

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

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

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

如我所料它在所有设备上看起来都一样。

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

我想要这样。我只对不同手机的设计有疑问。 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>

Answer 1

有很多方法可以实现这种行为。例如，您可以为具有最小宽度限定符的不同手机定义维度资源。

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