【问题标题】:How to allow an app to adapt to different screen widths automatically如何让应用自动适应不同的屏幕宽度
【发布时间】:2018-12-23 19:33:24
【问题描述】:

我对@9​​87654321@ 做了一些研究,但没有找到任何可行的解决方案。

我的问题: 我有一个包含在所有屏幕中的标题布局。根据屏幕的宽度,我想显示三种不同的标题布局之一。边注;我的应用只支持纵向模式。

我的布局是:

  • [Image] [Button][Text] [Button][Text] --> 用于大屏幕
  • [Image] [Button][Text] [Button] --> 用于中等屏幕
  • [图像] [按钮] [按钮] --> 用于小屏幕

它们应该由应用根据屏幕宽度自动选择。我想以编程方式解决此问题,因为我几乎需要在每个活动中都执行此操作,所以如果可以正确执行此操作以便系统可以处理它,那就太好了。

我试过了(但没用):

  • 将三种不同的布局放在名为“layout”、“layout-sw320dp”、“layout-sw400dp”的 3 个不同文件夹中
  • 将三种不同的布局放在名为“layout”、“layout-xxhdpi”、“layout-xxxhdpi”的 3 个不同文件夹中

非常感谢您提前回答!

编辑: 布局看起来实际上比这里描述的要复杂一些。实际布局如下:

<LinearLayout>
   <RelativeLayout>
     <ImageView />
     <LinearLayout>
        <LinearLayout>
           <ImageView />
           <TextView />
        </LinearLayout>
        <LinearLayout>
           <ImageView />
           <TextView />
        </LinearLayout>
     </LinearLayout>
   </RelativeLayout>
 </LinearLayout>

第一个 ImageView 中的图像也是从 Internet 加载的,在加载之前我不知道它的大小。

【问题讨论】:

    标签: android layout android-screen-support


    【解决方案1】:

    我为你创建了这个布局。您只需创建一个 XML 文件并将项目放置在此容器中。设置元素的重要性。如果空间不足,重要性较低的项目将被移除(GONE)。请告诉我您是否需要补充或更改。在我的设备上它可以工作。

    例子

    <com.sup.dev.android.views.widgets.layouts.LayoutImportance
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/red_700"
            android:text="text_1"
            app:LayoutImportance_Layout_importance="5"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/blue_700"
            app:LayoutImportance_Layout_importance="1"
            android:text="teeeeeeeeext_2"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/green_700"
            app:LayoutImportance_Layout_importance="2"
            android:text="teeeeeeeeext_3_teeeeext"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/amber_700"
            app:LayoutImportance_Layout_importance="3"
            android:text="teeeeeeeeext_4_teeeeeeeeeeeeeeeeeeext"/>
    
    </com.sup.dev.android.views.widgets.layouts.LayoutImportance>
    

    LayoutImportance.java

    public class LayoutImportance extends LinearLayout {
    
    private int lock;
    
    public LayoutImportance(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    
        if (lock == 0) for (int i = 0; i < getChildCount(); i++) getChildAt(i).setVisibility(VISIBLE);
    
        int w = MeasureSpec.getSize(widthMeasureSpec);
    
        super.onMeasure(MeasureSpec.makeMeasureSpec(w, MeasureSpec.UNSPECIFIED), heightMeasureSpec);
    
        if (getMeasuredWidth() > w) {
    
            ArrayList<View> children = new ArrayList<>();
            for (int i = 0; i < getChildCount(); i++) if (getChildAt(i).getVisibility() == VISIBLE) children.add(getChildAt(i));
            if(children.isEmpty())return;
    
            Collections.sort(children, (o1, o2) -> ((LayoutParams) o1.getLayoutParams()).importance - ((LayoutParams) o2.getLayoutParams()).importance);
            children.get(0).setVisibility(GONE);
    
            lock++;
            onMeasure(widthMeasureSpec, heightMeasureSpec);
            lock--;
        }
    
    }
    
    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof LayoutParams;
    }
    
    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams(getContext(), null);
    }
    
    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(getContext(), attrs);
    }
    
    @Override
    protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
        return new LayoutParams(p.width, p.height);
    }
    
    
    public static class LayoutParams extends LinearLayout.LayoutParams {
    
        public int importance;
    
        public LayoutParams(Context context, AttributeSet attrs) {
            super(context, attrs);
            TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LayoutImportance_Layout);
            importance = a.getInt(R.styleable.LayoutImportance_Layout_LayoutImportance_Layout_importance, 0);
            a.recycle();
        }
    
        public LayoutParams(int w, int h) {
            super(w, h);
        }
    
    }
    

    }

    attrs.xml

    <declare-styleable name="LayoutImportance_Layout">
        <attr name="LayoutImportance_Layout_importance" format="integer"/>
    </declare-styleable>
    

    【讨论】:

    • 我非常喜欢这个解决方案!但我有两个问题: 1. 我的标题中没有简单的元素列表,这只是为了简化问题。我实际上有多个布局和内容,如果需要,我需要隐藏一个或文本。我将把它添加到我最初的问题中。 2. 我有一个从网络加载的标题中的图像,所以我不知道图像的大小,直到我得到它......
    • 好的,我根据我的需要稍微调整了您的解决方案,现在它就像一个魅力。非常感谢!
    【解决方案2】:

    我认为您必须获取每个标题的布局宽度并为每个标题制作不同的布局。然后以编程方式检查屏幕尺寸,在扩展布局之前,您必须将标题设置为与您的宽度相符。

    使用此代码获取设备的宽度:

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

    然后

    if(width==smallDevice){   //or whatever condition you want
    setHeaderLayoutFor("smallDevice");
    }
    
    else if(width=="mediumDevice"){
    setHeaderLayoutFor("mediumDevice");
    }
    else if(width=="largerDevice"){
    setHeaderLayoutFor("largeDevice");
    }
    

    并使 setHeaderLayoutFor(String layoutType) 设置/膨胀布局。

    【讨论】:

      【解决方案3】:

      您可以使用“可扩展 dp”(sdp)。此尺寸单位随屏幕尺寸缩放。

      将 sdp 添加到您的项目(使用 Android Studio 和 Gradle):

      implementation 'com.intuit.sdp:sdp-android:1.0.5' 添加到您的 build.gradle 依赖项块中。

      dependencies {
        implementation 'com.intuit.sdp:sdp-android:1.0.5'
      }
      

      如下图所示设计你的xml:

      <RelativeLayout 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"
          android:background="@android:color/white"
          android:gravity="center">
              <LinearLayout
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:orientation="vertical">
      
                  <LinearLayout
                      android:id="@+id/give_us_a_review_landmine_main_layout"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:gravity="center"
                      android:orientation="vertical"
                      android:paddingBottom="@dimen/_27sdp"
                      android:paddingLeft="@dimen/_43sdp"
                      android:paddingRight="@dimen/_43sdp"
                      android:paddingTop="@dimen/_50sdp" >
      
                          <TextView
                              android:layout_width="wrap_content"
                              android:layout_height="wrap_content"
                              android:text="Intuit"
                              android:textColor="@android:color/black"
                              android:textSize="@dimen/_40sdp"/>
      
                              <LinearLayout
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:layout_marginTop="@dimen/_minus10sdp"
                                  android:paddingBottom="@dimen/_15sdp"
                                  android:orientation="horizontal" >
      
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:includeFontPadding="false"
                                  android:text="♡"
                                  android:textColor="#ED6C27"
                                  android:textSize="@dimen/_70sdp"
                                  android:textStyle="bold" />
      
                              <TextView
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:includeFontPadding="false"
                                  android:text="U"
                                  android:textColor="@android:color/black"
                                  android:textSize="@dimen/_70sdp" />
                              </LinearLayout>
      
                              <TextView
                                  android:id="@+id/give_us_a_review_landmine_text_1"
                                  android:layout_width="wrap_content"
                                  android:layout_height="wrap_content"
                                  android:gravity="center"
                                  android:paddingBottom="@dimen/_12sdp"
                                  android:text="Rate us so we can grow and help more people get their finances in check"
                                  android:textColor="@android:color/black"
                                  android:textSize="@dimen/_16sdp" />
      
                              <TextView
                                  android:id="@+id/give_us_a_review_landmine_text_2"
                                  android:layout_width="match_parent"
                                  android:layout_height="wrap_content"
                                  android:gravity="center"
                                  android:text="★★★★★"
                                  android:textColor="#747474"
                                  android:textSize="@dimen/_22sdp"
                                  android:textStyle="bold" />
      
                              <Button
                                  android:id="@+id/give_us_a_review_landmine_button"
                                  android:layout_width="match_parent"
                                  android:layout_height="wrap_content"
                                  android:layout_gravity="center"
                                  android:layout_marginTop="@dimen/_25sdp"
                                  android:padding="@dimen/_8sdp"
                                  android:text="Rate"
                                  android:textSize="@dimen/_15sdp"
                                  android:visibility="visible"
                                  android:textColor="@android:color/white"
                                  android:gravity="center"
                                  android:minWidth="120dp"
                                  android:includeFontPadding="false"
                                  android:background="#0ac775"
                                  android:singleLine="true" />
      
                  </LinearLayout>
              </LinearLayout>
      
      </RelativeLayout>
      

      查看链接了解更多信息:https://github.com/intuit/sdp

      【讨论】:

        猜你喜欢
        • 2021-08-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-10-16
        • 1970-01-01
        • 2015-11-25
        • 2019-07-09
        • 1970-01-01
        相关资源
        最近更新 更多