2014-02-03 3 views
8

Я ищу для реализации пользовательского интерфейса, подобного Картам Google Play.пустое пространство при масштабировании изображения в gridview

Я создал GridView и фон карты в виде XML-файла. Теперь, я ищу, чтобы соответствовать изображениям на карте, чтобы нижняя тень была видна, но ширина изображения совпадает с шириной карты. Проблема в том, что вокруг изображения есть пробел, хотя я устанавливаю GridView.LayoutParams пропорционально размеру изображения. Я пробовал разные scaleType, но никто не работал. Кроме того, как только я получу ширину изображения в соответствии с шириной карты, как я могу убедиться, что нижняя тень все еще видна?

enter image description here

Мой адаптер изображение класса

package me.zamaaan.wallpaper; 

import android.content.Context; 
import android.util.TypedValue; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.GridView; 
import android.widget.ImageView; 

public class ImageAdapter extends BaseAdapter{ 
    private Context mContext; 

    // Keep all Images in array 
    public Integer[] mThumbIds = { 
      R.drawable.background1, R.drawable.background2, 
      R.drawable.background3, R.drawable.background4, 
      R.drawable.background1, R.drawable.background2, 
      R.drawable.background1, R.drawable.background2, 
      R.drawable.background3, R.drawable.background4, 
      R.drawable.background1, R.drawable.background2, 
      R.drawable.background3 
    }; 


    // Constructor 
    public ImageAdapter(Context c){ 
     mContext = c; 
    } 
    @Override 
    public int getCount() { 
     // TODO Auto-generated method stub 
     return mThumbIds.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     // TODO Auto-generated method stub 
     return mThumbIds[position]; 
    } 

    @Override 
    public long getItemId(int arg0) { 
     // TODO Auto-generated method stub 
     return 0; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     ImageView imageView = new ImageView(mContext); 
     imageView.setImageResource(mThumbIds[position]); 
     imageView.setScaleType(ImageView.ScaleType.FIT_XY); 
     int width_dp = 109; 
     double height_dp = width_dp/0.5625; 
     int width_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, width_dp, mContext.getResources().getDisplayMetrics()); 

     int height_px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (int)height_dp, mContext.getResources().getDisplayMetrics()); 

     imageView.setLayoutParams(new GridView.LayoutParams(width_px, height_px)); 
     imageView.setBackgroundResource(R.drawable.bg_card); 

     return imageView; 
    } 

} 

bg_card.xml

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
     <shape android:shape="rectangle" 
       android:dither="true"> 

      <corners android:radius="2dp"/> 

      <solid android:color="#ccc" /> 

     </shape> 
    </item> 

    <item android:bottom="2dp"> 
     <shape android:shape="rectangle" 
       android:dither="true"> 

      <corners android:radius="2dp" /> 

      <solid android:color="@android:color/white" /> 

      <padding android:bottom="8dp" 
        android:left="8dp" 
        android:right="8dp" 
        android:top="8dp" /> 
     </shape> 
    </item> 
</layer-list> 

gridview.xml

<?xml version="1.0" encoding="utf-8"?> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/landscape" 
    android:orientation="horizontal" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center_horizontal" 
    android:background="#eeeeee" 
    android:gravity="center"> 

<GridView 
    android:id="@+id/grid_view" 
    android:layout_marginTop="16.50dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:numColumns="3" 
    android:paddingBottom="8dp" 
    android:horizontalSpacing="11dp" 
    android:verticalSpacing="7dp" 
    android:gravity="center" 
    android:stretchMode="columnWidth" 
    > 

</GridView> 

</RelativeLayout> 

Фактический размер изображений являются

720x1280px 

ответ

7

Ваши изображения не заполняют карту, потому что в вашем фоне карты у вас есть отступы 8dp по обе стороны

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    ... 
    <item android:bottom="2dp"> 
     <shape android:shape="rectangle" 
       android:dither="true"> 
      <corners android:radius="2dp" /> 
      <solid android:color="@android:color/white" /> 
      <padding android:bottom="8dp" 
        android:left="8dp" 
        android:right="8dp" 
        android:top="8dp" /> 
     </shape> 
    </item> 
</layer-list> 

Снимите прокладку чтобы он заполнил ширину.

Если вы хотите сохранить тень, а лучше было бы создать 9-патч для фона, так что вы можете определить, где содержание сидит, что-то вроде:

enter image description here

черных линий на самой левой и верхней сторонах представлены масштабируемые области, а линии на самой нижней и правой сторонах представляют области, в которых находится контент (обратите внимание, что область содержимого с правой стороны делает не покрывает область тени).

Смежные вопросы