在片段的对话框中显示网格视图

Question

我是 android 编程的初学者，这是我在 StackOverflow 中的第一个问题。我有一个首选项片段，点击首选项时，我试图在对话框中显示一个网格视图强>。网格视图是动态加载的。我尝试了很多方法来做到这一点，但没有一个对我有用。

这是我在 MyPreferenceFragment 中扩展 PreferenceFragment 的代码

Preference iconPref = (Preference)findPreference("pref_icon");
iconPref.setOnPreferenceClickListener(new OnPreferenceClickListener() {    
    @Override
    public boolean onPreferenceClick(Preference arg0) {
        Log.i(TAG, "Preparing grid view layout");
        GridView gridview = (GridView)getActivity().findViewById(R.id.icons_gridview);
        gridview.setAdapter(new ImageAdapter(getActivity()));
        Log.i(TAG, "Icons image adapter ready");

        gridview.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(getActivity(), "" + position, Toast.LENGTH_SHORT).show();
            }
        });

        Log.i(TAG, "Creating dialog");
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());   
        builder.setView(gridview);
        builder.show();
        return false;
    }
});

这是我的 ImageAdapter.java 代码

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        ImageView imageView;
        if (convertView == null) {  
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } 
        else 
        {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
        R.drawable.ic_img1, R.drawable.ic_img2,
        R.drawable.ic_img3, R.drawable.ic_img4,
        R.drawable.ic_img5, R.drawable.ic_img6,
        R.drawable.ic_img7
    };
}

最后，这是我的 Xml 布局文件：icon_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/icons_gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="90dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

我期待任何帮助或替代方法。并提前感谢...

Answer 1

第 1 步：在布局内使用图像视图来存储图像。

image_item.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent" 
      >

     <ImageView 
          android:id="@+id/icon_item"
          android:layout_width="75dp"
          android:layout_height="75dp"
          android:padding="5dp"
          android:layout_centerInParent="true"
          android:contentDescription="@string/desc_list_item_icon"
          android:src="@drawable/ic_img_default"
           />
</RelativeLayout>

第 2 步： 创建一个类来保存有关要放入网格视图中的项目的信息。 我只为该项目放置了图像。

GridViewItem.java

public class GridViewItem {
    public final int icon;       // the drawable id for the ListView item ImageView

    public GridViewItem(int icon) {
        this.icon = icon;
    }
    public int getIcon(){
        return this.icon;
    }
}

第 3 步：我们需要一个适配器类来设置适配器。

ImageAdapter.java

public class ImageAdapter extends BaseAdapter
{
    private Context context;
    private ArrayList<GridViewItem> gridViewItems;  

    public ImageAdapter(Context context, ArrayList<GridViewItem> gridViewItems)
    {
        this.context = context;
        this.gridViewItems = gridViewItems;
    }

    @Override
    public int getCount() 
    {
        return gridViewItems.size();
    }

    @Override
    public Object getItem(int position) 
    {       
        return gridViewItems.get(position);
    }

    @Override
    public long getItemId(int position) 
    {
       return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        if (convertView == null) 
        {
             LayoutInflater mInflater = (LayoutInflater)
                  context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
             convertView = mInflater.inflate(R.layout.image_item, null);
        }

        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon_item);
        imgIcon.setImageResource(gridViewItems.get(position).getIcon());

        return convertView;
    }
}

第 4 步：最后，我们需要创建并填充网格视图并将其设置在对话框中。

在片段中，

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
GridView gridView = new GridView(getActivity());

ArrayList<GridViewItem>  mList = new ArrayList<GridViewItem>();

mList.add(new GridViewItem(R.drawable.ic_img1));
mList.add(new GridViewItem(R.drawable.ic_img2));
:
mList.add(new GridViewItem(R.drawable.ic_img9));
mList.add(new GridViewItem(R.drawable.ic_img10));

ImageAdapter iconItems = new ImageAdapter(getActivity(), mList);

gridView.setAdapter(iconItems);
gridView.setNumColumns(4);               // Number of columns
gridView.setChoiceMode(GridView.CHOICE_MODE_SINGLE);       // Choice mode
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        // do something here
        Toast.makeText(getActivity(), "Position: " + position, Toast.LENGTH_SHORT).show();
        iconDialog.dismiss(); // Dismiss dialog after click on item
    }
});
builder.setView(gridView);
builder.setTitle("Select an icon");
iconDialog = builder.create();
iconDialog.show();