Android drawable 根据设备屏幕尺寸变化

Question

我要设计下面UI。为了实现同样的目标，我尝试使用可绘制对象。 但问题是：可绘制对象在不同屏幕尺寸上显示不同。 对于屏幕尺寸 6.0：可绘制对象为椭圆形，下方为圆形。

UI 设计尝试达到：

content_layout:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="16dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.mediaagility.drawablesample.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linear3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:background="@drawable/linear">

        <TextView
            android:id="@+id/textview3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/bg_layout"
            android:gravity="center"
            android:text="10"
            android:textColor="@android:color/white"
            android:textSize="22sp" />

    </LinearLayout>
</LinearLayout>

linear_layout 可绘制：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">


    <stroke
        android:width="3dip"
        android:color="#FFB300" />
    <corners android:radius="10dip"
        />
    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />
    </shape>

bg_layout:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

    <gradient
        android:angle="-90"
        android:endColor="#1c75d1"
        android:gradientRadius="20dp"
        android:type="linear"
        android:startColor="#609ede" />


    <padding
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp" />
</shape>

main.class:

 LinearLayout linear1 = (LinearLayout) findViewById(R.id.linear1);
        LinearLayout linear2 = (LinearLayout) findViewById(R.id.linear2);
        LinearLayout linear3 = (LinearLayout) findViewById(R.id.linear3);


        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        );

        layoutParams.width = ApplicationUtils.getScreenWidth(this) / 4 +50;
        layoutParams.height = ApplicationUtils.getScreenWidth(this) / 4 +50;
        layoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL;
        layoutParams.leftMargin = ApplicationUtils.dpToPx(4);
        layoutParams.rightMargin = ApplicationUtils.dpToPx(4);

        linear1.setLayoutParams(layoutParams);
        linear2.setLayoutParams(layoutParams);
        linear3.setLayoutParams(layoutParams);

Please help me by suggesting how to design below UI which independent on screen size.

Answer 1

不要使用多个可绘制的背景，而是尝试使用这种方式：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="4dp"
        android:right="4dp"
        android:bottom="4dp"
        android:left="4dp">
        <shape
            android:shape="oval">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item>
        <shape
            android:shape="oval">
            <stroke android:width="4dp"
                android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

现在将背景设置为 TextView 为：

android:layout_width="your_width"
android:layout_height="your_height"    
android:background="@drawable/drawable_name"

这样，您就不必寻找 LinearLayout。

Answer 2

因为您在 LinearLayout 中设置固定大小，所以它会拉伸。如果不需要，请将其删除。

你的 xml 看起来不错你需要在这里锻炼

layoutParams.width = ApplicationUtils.getScreenWidth(this) / 4 +50;
layoutParams.height = ApplicationUtils.getScreenWidth(this) / 4 +50;

如果你想支持固定大小的多屏幕那么你应该使用dimens.xml不同的dpi文件夹

值-sw320dp-hdpi
值-sw320dp-mdpi
值-sw320dp-xhdpi
值-sw320dp-xxhdpi
值-sw320dp-xxxhdpi

此答案将指导您如何使用 dimens.xml。 , two

Answer 3

将可绘制对象导入项目的最简单、最快捷的方法是使用 drawable importer。这解决了不同屏幕尺寸的不同设备中图像尺寸的问题。

Android drawable 根据设备屏幕尺寸变化

Android drawable changing according to device screen size

android

android-layout

android-drawable