【问题标题】:Layout issues on different screens不同屏幕上的布局问题
【发布时间】:2017-01-28 11:59:20
【问题描述】:

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

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

这是主要活动:

<?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 行。如果我这样做,结果如下所示:

视图现在可以滚动并且项目具有相同的大小。但它不适合屏幕。

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

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

【问题讨论】:

  • 那么现在你想在哪里改变布局?
  • 这是因为你使用 textApperance 代替文本大小,使用 textSize="22dp",或者作为它的 sute 你的要求,记住使用 dp 而不是 sp 来定义你的 textsize。我相信这会有所帮助。

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


【解决方案1】:

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

这里有一些推荐链接,希望对你有帮助

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

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

【讨论】:

    【解决方案2】:

    1.使用多布局,创建不同的uihttps://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 高,所以根据比例(使用 currant 屏幕尺寸)调整我的黑醋栗屏幕的尺寸,然后我将这些值设置为这个myView

    【讨论】:

      【解决方案3】:

      使用您的初始布局 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
      

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

      【讨论】:

        【解决方案4】:

        为此,您需要从 5.2 设备中获取网格视图单元格的纵横比。

        (单元格的高度和宽度)

        Ratio = Width/Height 
        

        如果您的 UI 总是有两列,那么您需要获取列宽,然后为 GridView Cell 计算高度。

        然后从Adapter的get view传入Grid View Child Layoutparams。

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

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

        【讨论】:

          【解决方案5】:

          更改您的 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>
          

          【讨论】:

            【解决方案6】:

            希望这会有所帮助
            请参阅下面的代码以了解子项目布局。
            我所做的是,我最小化layout_weight 属性的使用,将文本大小更改为使用单位sp 中的dimen 并更改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>
            

            `

            【讨论】:

              【解决方案7】:

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

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

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多