不同屏幕上的布局问题

时间:2017-01-17 22:13:53

标签: android android-layout android-linearlayout android-gridview

我在5.2英寸设备(LG G2)上开发并测试了我的应用程序。

5.2 inch screen

只是我在更大的5.5英寸设备(OnePlus 3T)上启动应用程序,看起来不太好,如下所示:

5.5 inch screen

这是主要活动:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:id="@+id/layout_main_menu"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#b2b2b2"
          android:orientation="vertical">

<!-- android:layout_height="wrap_content" -->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:padding="2dp"
    app:titleMarginStart="20dp"
    app:titleTextAppearance="@style/MyMaterialTheme.Base.TitleTextStyle"
    app:titleTextColor="@color/textColorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:textStyle="bold|italic"/>

</android.support.v7.widget.Toolbar>


<!--android:columnWidth="160dp"-->
<GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:gravity="center"
    android:horizontalSpacing="20dp"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:verticalSpacing="20dp"></GridView>

</LinearLayout>

这是子项目的布局xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/item"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="#FFFFFFFF"
android:gravity="center_horizontal"
android:orientation="horizontal"
tools:context="de.dk.masterfitness.ActMain" >

<!-- PART I. -->
<!-- THIS IS THE BAR ON THE LEFT -->

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:background="@android:color/holo_green_light" />

<!-- PART II. -->
<!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="6"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_weight="2"
        android:background="#FFFFFFFF"
        android:orientation="horizontal" >

        <!-- ViewGroup with texts -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_weight="2"
            android:background="#FFFFFFFF"
            android:orientation="vertical" >

            <!-- First is fitted with triangle -->

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

                <ImageView
                    android:id="@+id/iv_training"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:rotation="90.0"
                    android:src="@drawable/triangle" />

                <TextView
                    android:id="@+id/tv_header"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@android:color/black"
                    android:textStyle="bold" />
            </LinearLayout>

            <TextView
                android:id="@+id/tv_text"
                android:layout_width="200dp"
                android:layout_height="70dp"
                android:paddingLeft="20dp"
               android:textAppearance="?android:attr/textAppearanceSmall" />
        </LinearLayout>

        <!-- nothing more than single vertical line -->

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#F1999999" >
        </View>
    </LinearLayout>
</LinearLayout>

<!-- PART III. -->
<!-- BUTTON ON THE RIGHT -->

<TextView
    android:layout_width="10dp"
    android:layout_height="match_parent"
    android:layout_weight="6"
    android:gravity="center"
    android:text=">"
    android:textAlignment="gravity"
    android:textColor="@android:color/holo_green_light"
    android:textSize="40dp"
    android:textStyle="bold" />
</LinearLayout>

我在这里做错了什么?

编辑:

我搜索了一下,找到了一个解决方案,用以下代码动态设置GridView的最小高度:

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

int width = metrics.widthPixels;
int height = metrics.heightPixels;

此外,我将这些代码行添加到我的适配器:

gridView = inflater.inflate(R.layout.act_main_menu_sub, null);
gridView.setMinimumHeight(ActMainMenu.height/2);

在我的情况下,我必须将屏幕高度除以2,因为有2行。如果我这样做,结果如下:

enter image description here

View现在可以滚动,项目大小相同。但它不适合屏幕。

如果我将高度除以3,我的5.5设备看起来会更好:

enter image description here

但我不喜欢这个解决方案,如果我选择3而不是2,我不明白为什么看起来更好。

7 个答案:

答案 0 :(得分:3)

1.使用多个布局并创建不同的uis https://developer.android.com/guide/practices/screens_support.html

2.根据您正在尝试的比例找到解决方案

我就是这样做的;

首先我得到一个模特。我的模型高度为1920像素,宽度为1080(通常是HDTV分辨率,宽高比为16:9)

在那张图片中,我知道视图的位置

然后对于任何视图/任何其他屏幕,我使用相同的比率来使用LayoutParams

来定位它们

这是我用来定位视图的线性LayoutParam示例:

        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        height = displaymetrics.heightPixels;
        width = displaymetrics.widthPixels;

    LinearLayout.LayoutParams topLenP= new LinearLayout.LayoutParams(300 * width / 1080, 400 * width / 1920); 
        //topLenP.topMargin = x* height / 1920;
        //topLenP.leftMargin = y* width / 1080;
    myView.setLayoutParams(topLenP);

我在这里做了什么,正如我在模型视图中所说的那样,这个视图需要300宽度,400高度,所以根据比例调整我的卷曲屏幕的大小(使用卷曲屏幕大小),然后我将这些值设置为这个myView

答案 1 :(得分:2)

您可以使用PercentageRelativeLayout获得更好的结果。

以下是它的一些推荐链接,希望它可以帮助你

https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

https://inthecheesefactory.com/blog/know-percent-support-library/en

答案 2 :(得分:1)

为此,您需要从5.2设备获得网格视图单元格的宽高比。

(单元格的高度和宽度)

Ratio = Width/Height 

如果您的UI总是有两列,那么您需要获得列宽,然后计算GridView单元格的高度。

然后从适配器的获取视图传入Grid View Child Layoutparams。

此外,如果您使用重量进行儿童布局,那么最好的方法是在所有屏幕尺寸的手机中保持相同的布局。

对于所有这些,您必须进行一些计算以获得宽高比,然后计算子布局的实际Layoutparams值。

答案 3 :(得分:1)

更改您的layout.xml我的意思是子项目的布局xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/item"
              android:layout_width="match_parent"
              android:layout_height="100dp"
              android:layout_gravity="center_horizontal"
              android:background="#FFFFFFFF"
              android:weightSum="10"
              android:orientation="horizontal">

    <!-- PART I. -->
    <!-- THIS IS THE BAR ON THE LEFT -->

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/holo_green_light" />

    <!-- PART II. -->
    <!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="8"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight="2"
            android:background="#FFFFFFFF"
            android:orientation="horizontal" >

            <!-- ViewGroup with texts -->

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:layout_weight="2"
                android:background="#FFFFFFFF"
                android:orientation="vertical" >

                <!-- First is fitted with triangle -->

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

                    <ImageView
                        android:id="@+id/iv_training"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/triangle"                         
                        android:rotation="90.0"/>

                    <TextView
                        android:id="@+id/tv_header"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />
                </LinearLayout>

                <TextView
                    android:id="@+id/tv_text"
                    android:layout_width="200dp"
                    android:layout_height="70dp"
                    android:paddingLeft="20dp"
                    android:textAppearance="?android:attr/textAppearanceSmall" />
            </LinearLayout>

            <!-- nothing more than single vertical line -->

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#F1999999" >
            </View>
        </LinearLayout>
    </LinearLayout>

    <!-- PART III. -->
    <!-- BUTTON ON THE RIGHT -->

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=">"
        android:textAlignment="gravity"
        android:textColor="@android:color/holo_green_light"
        android:textSize="40dp"
        android:layout_weight="1"
        android:textStyle="bold" />
</LinearLayout>

答案 4 :(得分:1)

希望这会有所帮助
有关子项目布局,请参阅以下代码 我所做的是,我最小化layout_weight属性的使用,更改文本大小以使用单位sp中的维度并更改gravitylayout_gravity值。

注意:最好尽量少量使用layout_weight,并且应避免使用嵌套layout_weight

`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/item"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:background="#FFFFFFFF"
    android:gravity="center_vertical"
    android:orientation="horizontal"
     >

    <!-- PART I. -->
    <!-- THIS IS THE BAR ON THE LEFT -->

    <TextView
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_green_light" />

    <!-- PART II. -->
    <!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFFFF"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:orientation="horizontal" >

            <!-- ViewGroup with texts -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:background="#FFFFFFFF"
                android:orientation="horizontal" >

                <!-- First is fitted with triangle -->
                <ImageView
                    android:id="@+id/iv_training"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:rotation="90.0"
                    android:src="@drawable/triangle" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/tv_header"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@android:color/black"
                        android:text="Header text"
                        android:textStyle="bold" />
                    <TextView
                        android:id="@+id/tv_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="This is Description Text\nDescription text"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
                </LinearLayout>


            </LinearLayout>

            <!-- nothing more than single vertical line -->


        </LinearLayout>
    </LinearLayout>

    <!-- PART III. -->
    <!-- BUTTON ON THE RIGHT -->
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#F1999999" >
    </View>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text=">"
        android:textColor="@android:color/holo_green_light"
        android:textSize="40sp"
        android:textStyle="bold" />
</LinearLayout>

`

答案 5 :(得分:1)

使用初始布局xml并将其放在这些布局目录中(使用相同的文件名):

res/layout-sw320dp
res/layout-sw480dp
res/layout-sw600dp
res/layout-sw720dp

然后使用为每个屏幕尺寸配置的AVD创建仿真器。由于并不总是明显哪个仿真器配置满足哪个屏幕尺寸(无法使用AVD尺寸),因此将其添加到应用程序类以进行调试以验证正在使用的屏幕尺寸布局:

    DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    float dpHeight = displayMetrics.heightPixels / displayMetrics.density;
    float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
    Log.e(TAG,"dpHeight= "+dpHeight+" dpWidth="+dpWidth);
    Log.e(TAG,"Selected configuration = "+getString(R.string.selected_configuration));

它将显示为一个例子:

dpHeight= 592.0 dpWidth=384.0
Selected configuration = sw320dp

最后,修改每个布局配置,使每个模拟设备/屏幕尺寸看起来都令人满意。

答案 6 :(得分:-2)

你必须学习如何制作支持多种屏幕尺寸的布局,请通过链接

https://developer.android.com/guide/practices/screens_support.html