2015-12-21 132 views
0

我一直在針對Android上的不同API測試我的應用。使用不同Android API的XML佈局

我測試對API 17 - 22

對於API 17 & 18,我不明白,但XML佈局似乎比什麼是模擬器上的預覽窗格中顯示不同。

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

這是圖片的樣子在預覽窗格:

Golf

這是一個完美的圓的ImageView,它的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> 

這是XML for drawable加載到circularImageView中:

<?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的代碼可以在谷歌中找到:

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; 
    } 

} 

這是什麼樣子的實際模擬器:

golf on emulator

你可以看到圓壓扁。

當我在仿真器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沒有正確顯示我的圈子的原因是什麼?

+0

你有沒有在任何真實的設備上看到同樣的問題?在模擬器出現問題時,我也遇到了類似的奇怪問題,但它在真實設備上運行。 – Eagle11

+0

我其實認爲問題在於我已經加載到我的circularimageview中的drawable。我將很快上傳代碼。 Unfort我沒有任何實際的設備在API 17或18 – Simon

回答

0

我終於成功地解決了這個在我的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和較低的API中實現正確的效果。