XML 具有不同 Android API 的布局

Question

我一直在 Android 上针对不同的 API 测试我的应用程序。

我已经针对 API 17 - 22 进行了测试。

对于 API 17 和 18，我不明白，但 XML 布局在预览窗格中的显示似乎与模拟器上的不同。

我正在使用 Genymotion 模拟器 API 18 (768 X 1280) 和 API 17 (768 X 1280)。

这是图片在预览窗格中的样子：

这是一个完美的圆形图像视图，XML如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recyclerlistholder"
    >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/group_container">

        <com.example.simon.customshapes.CircularImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:background="@drawable/circle"
            android:layout_centerVertical="true"
            android:scaleType="centerCrop"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="8dp"
            android:id="@+id/groupicon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="G"
            android:id="@+id/group_letter"
            android:layout_centerInParent="true"
            android:textColor="@color/white"
            android:textSize="24sp"/>

    </RelativeLayout>

    <TextView
        android:layout_toRightOf="@+id/group_container"
        android:layout_toEndOf="@+id/group_container"
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:id="@+id/name"
        tools:text="Golf"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:id="@+id/group_desc"
        tools:text="Sports"
        android:layout_below="@+id/desc"
        android:layout_alignLeft="@+id/name"
        android:layout_alignStart="@+id/name" />

</RelativeLayout>

这是加载到 circularImageView 中的可绘制对象的 XML：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    <solid android:color="@color/primary"/>
    <size android:width="80dp" android:height="80dp"/>
</shape>

CircularImageView 的代码可以在 google:

找到

package com.example.simon.customshapes;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by Simon on 2015/07/25.
 */
public class CircularImageView extends ImageView {

    public CircularImageView(Context context) {
        super(context);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        //getting the padding adjustments
        int w = getWidth(), h = getHeight();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();

        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth() / factor), (int) (bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

}

这是它在实际模拟器上的样子：

你可以看到圆圈被压扁了。

当我运行在模拟器 API 19 - 22 (1080 X 1920) 上使用此应用程序时，模拟器会显示预览窗格中显示的 circularImageView。

起初我以为可能是屏幕尺寸问题，因为 API 19 - 22 在 1080 X 1920 和 API 17 - 18 在 768 X 1280 但后来我改变了尺寸API 17 & 18 到 1080 X 1920 的模拟器，它仍然显示相同的压扁圆圈。

为什么 API 17 - 18 没有正确显示我的圈子？

Answer 1

我终于设法解决了这个问题，方法是用 xml 中不同项目的边距替换边距设置，如下所示：

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/group_container">

    <com.example.simon.customshapes.CircularImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@drawable/group_circle"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"
        android:id="@+id/groupicon" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="G"
        android:id="@+id/group_letter"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:textSize="24sp"/>

</RelativeLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/group_container"
    android:layout_toEndOf="@+id/group_container"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_marginTop="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="16sp"
        android:id="@+id/group_name"
        tools:text="Golf"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="12sp"
        android:id="@+id/group_desc"
        tools:text="Sports" />

</LinearLayout>

我不确定为什么较低的 API 不遵守边距设置但填充我的 xml 正确地在较高的 API 中达到正确的效果和较低的。

XML 具有不同 Android API 的布局

XML layout with different Android APIs

xml

android

android-emulator

android-custom-view

genymotion