ExpandableListView 内的 GridView,在 Android 上有多项选择

GridView inside ExpandableListView with multiple choice on Android

在我的应用程序中,我需要在 expandableListView 中显示图像,它必须是图像的网格视图,并且这些图像可以选择,所以我有一个 expandableListAdapter,我在其中实现了一个网格视图适配器, 图片显示正常,如图 1 所示,现在我要实现的是图片 2,如何将 groupPosition 和 childPosition 传递给 gridAdapter 并在单击图片时使其突出显示? :

图二:

public class ExpandListAdapter extends BaseExpandableListAdapter {


    public static final int CHOICE_MODE_MULTIPLE = AbsListView.CHOICE_MODE_MULTIPLE;


    public static final int CHOICE_MODE_MULTIPLE_MODAL = AbsListView.CHOICE_MODE_MULTIPLE_MODAL;

    /**
     * No child could be selected
     */
    public static final int CHOICE_MODE_NONE = AbsListView.CHOICE_MODE_NONE;

    /**
     * One single choice per group
     */
    public static final int CHOICE_MODE_SINGLE_PER_GROUP = AbsListView.CHOICE_MODE_SINGLE;

    /**
     * One single choice for all the groups
     */
    public static final int CHOICE_MODE_SINGLE_ABSOLUTE = 10001;

    private Context context;
    private ArrayList<Group> groups;
    private ArrayList<ArrayList<Child>> child = new ArrayList();
    private ArrayList<Child> listchild;
    private GridAdapter adapter;
    private CustomGridView gridView;
    private SparseArray<SparseBooleanArray> checkedPositions;
    private static final String LOG_TAG = ExpandListAdapter.class.getSimpleName();

    private int choiceMode = CHOICE_MODE_MULTIPLE;

    public ExpandListAdapter(Context context, ArrayList<Group> groups) {
        this.context = context;
        this.groups = groups;
        checkedPositions = new SparseArray<SparseBooleanArray>();
        child = new ArrayList();
        for (int i = 0; i < groups.size(); i++) {
            child.add(i, groups.get(i).getItems());
        }
    }

    public ExpandListAdapter(Context context, ArrayList<Group> children, int choiceMode) {
        this(context, children);
        // For now the choice mode CHOICE_MODE_MULTIPLE_MODAL
        // is not implemented
        if (choiceMode == CHOICE_MODE_MULTIPLE_MODAL) {
            throw new RuntimeException("The choice mode CHOICE_MODE_MULTIPLE_MODAL " +
                    "has not implemented yet");
        }
        this.choiceMode = choiceMode;
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return child.get(childPosition);
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public View getChildView(final int groupPosition, final int childPosition,
                             boolean isLastChild, View convertView, ViewGroup parent) {


        if (convertView == null) {
            LayoutInflater infalInflater = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = infalInflater.inflate(R.layout.gridview, null);
        }


        listchild = new ArrayList<Child>();

        for (int j = 0; j < groups.get(groupPosition).getItems().size(); j++) {

            listchild.add(child.get(groupPosition).get(j));

        }

        gridView = (CustomGridView) convertView.findViewById(R.id.GridView_toolbar);

        gridView.setExpanded(true);
        adapter = new GridAdapter(context, listchild, checkedPositions, groupPosition, childPosition);
        gridView.setAdapter(adapter);// Adapter
        gridView.setChoiceMode(CustomGridView.CHOICE_MODE_MULTIPLE);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                setClicked(groupPosition, childPosition);
                System.out.println("position" + checkedPositions.get(groupPosition));
                if (checkedPositions.get(groupPosition) != null) {
                    boolean isChecked = checkedPositions.get(groupPosition).get(childPosition);

                    if(!isChecked){
                    }

                } else {
                    System.out.println("false");
                }

            }
        });


        return convertView;

    }

    public void setClicked(int groupPosition, int childPosition) {
        switch (choiceMode) {
            case CHOICE_MODE_MULTIPLE:
                SparseBooleanArray checkedChildPositionsMultiple = checkedPositions.get(groupPosition);
                // if in the group there was not any child checked
                if (checkedChildPositionsMultiple == null) {
                    checkedChildPositionsMultiple = new SparseBooleanArray();
                    // By default, the status of a child is not checked
                    // So a click will enable it
                    checkedChildPositionsMultiple.put(childPosition, true);
                    checkedPositions.put(groupPosition, checkedChildPositionsMultiple);
                } else {
                    boolean oldState = checkedChildPositionsMultiple.get(childPosition);
                    checkedChildPositionsMultiple.put(childPosition, !oldState);
                }
                break;
            // TODO: Implement it
            case CHOICE_MODE_MULTIPLE_MODAL:
                throw new RuntimeException("The choice mode CHOICE_MODE_MULTIPLE_MODAL " +
                        "has not implemented yet");
            case CHOICE_MODE_NONE:
                checkedPositions.clear();
                break;
            case CHOICE_MODE_SINGLE_PER_GROUP:
                SparseBooleanArray checkedChildPositionsSingle = checkedPositions.get(groupPosition);
                // If in the group there was not any child checked
                if (checkedChildPositionsSingle == null) {
                    checkedChildPositionsSingle = new SparseBooleanArray();
                    // By default, the status of a child is not checked
                    checkedChildPositionsSingle.put(childPosition, true);
                    checkedPositions.put(groupPosition, checkedChildPositionsSingle);
                } else {
                    boolean oldState = checkedChildPositionsSingle.get(childPosition);
                    // If the old state was false, set it as the unique one which is true
                    if (!oldState) {
                        checkedChildPositionsSingle.clear();
                        checkedChildPositionsSingle.put(childPosition, !oldState);
                    } // Else does not allow the user to uncheck it
                }
                break;
            // This mode will remove all the checked positions from other groups
            // and enable just one from the selected group
            case CHOICE_MODE_SINGLE_ABSOLUTE:
                checkedPositions.clear();
                SparseBooleanArray checkedChildPositionsSingleAbsolute = new SparseBooleanArray();
                checkedChildPositionsSingleAbsolute.put(childPosition, true);
                checkedPositions.put(groupPosition, checkedChildPositionsSingleAbsolute);
                break;
        }

        // Notify that some data has been changed
        notifyDataSetChanged();
        Log.v(LOG_TAG, "List position updated");
        Log.v(LOG_TAG, PrintSparseArrays.sparseArrayToString(checkedPositions));
    }

    public void setChoiceMode(int choiceMode) {
        this.choiceMode = choiceMode;
        // For now the choice mode CHOICE_MODEL_MULTIPLE_MODAL
        // is not implemented
        if (choiceMode == CHOICE_MODE_MULTIPLE_MODAL) {
            throw new RuntimeException("The choice mode CHOICE_MODE_MULTIPLE_MODAL " +
                    "has not implemented yet");
        }
        checkedPositions.clear();
        Log.v(LOG_TAG, "The choice mode has been changed. Now it is " + this.choiceMode);
    }

    @Override
    public int getChildrenCount(int nGroup) {
        return 1;

    }

    @Override
    public Object getGroup(int groupPosition) {
        return groups.get(groupPosition);
    }

    @Override
    public int getGroupCount() {
        return groups.size();
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {
        Group group = (Group) getGroup(groupPosition);
        if (convertView == null) {
            LayoutInflater inf = (LayoutInflater) context
                    .getSystemService(context.LAYOUT_INFLATER_SERVICE);
            convertView = inf.inflate(R.layout.group_item, null);
        }
        ExpandableListView mExpandableListView = (ExpandableListView) parent;
        mExpandableListView.expandGroup(groupPosition);
        TextView tv = (TextView) convertView.findViewById(R.id.group_name);
        tv.setText(group.getName());

        return convertView;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

}

网格适配器:

public class GridAdapter extends BaseAdapter {

    private Context mContext;
    private ArrayList<Child> child;
    ImageLoader imageLoader = AppController.getInstance().getImageLoader();
    private SparseArray<SparseBooleanArray> checkedPositions;
    int groupPosition, childPosition;

    public GridAdapter(Context context, ArrayList<Child> childValues, SparseArray<SparseBooleanArray> checkedPositions, int groupPosition, int childPosition) {
        mContext = context;
        child = childValues;
        this.checkedPositions = checkedPositions;
        this.childPosition = childPosition;
        this.groupPosition = groupPosition;
    }


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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;
        NetworkImageView i;
        childPosition = position;

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) mContext
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.child_item, null);
            holder = new ViewHolder();

            if (imageLoader == null)
                imageLoader = AppController.getInstance().getImageLoader();

            i = (NetworkImageView) convertView
                    .findViewById(R.id.flag);

            i.setImageUrl(String.valueOf(child.get(childPosition).getImage()), imageLoader);


            convertView.setTag(holder);

            System.out.println("position" + checkedPositions.get(groupPosition));
            if (checkedPositions.get(groupPosition) != null) {
                boolean isChecked = checkedPositions.get(groupPosition).get(childPosition);
                i.setBackgroundResource(R.color.bg);

                if(!isChecked){
                }

            } else {
                System.out.println("false");
            }


        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.text = (TextView) convertView.findViewById(R.id.label);
        holder.text.setText(child.get(position).getName());


        return convertView;
    }


    static class ViewHolder {
        TextView text;
    }


}

在我的假设中

ExpandListAdapter Class

  • 在getChildView()方法中childPosition不依赖于点击哪个国家的国旗,因为childPosition这里return是Grid的位置查看,而不是它下面的标志

  • 因此,无需在 GridView 的构造函数中传递 childPosition,因为 childPosition 将始终 return 1

  • 要获得实际的标记点击位置,请在您的 GridAdapter 中使用 onClickListener,例如:

@Override public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;
        NetworkImageView i;
        childPosition = position;

        if (convertView == null) {

        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        convertView.setOnclickListener(new OnClickListener{

          @Override 
          onClick(View v){
      isChecked=child.get(childPosition).isChecked();
         if(!isChecked){
            child.get(childPosition).setChecked(true);
         }
         else {
            child.get(childPosition).setChecked(false);
         }        

      });

No need to handle checked positions separately create two methods in your child class isChecked() and setChecked() to maintain check-uncheck state of flags. Change color of selected or checked flag here

        holder.text = (TextView) convertView.findViewById(R.id.label);
        holder.text.setText(child.get(position).getName());


        return convertView;
  }

并从 ExpandListAdapter Class 中删除检查逻辑:

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                    setClicked(groupPosition, childPosition);
                    System.out.println("position" + checkedPositions.get(groupPosition));
                    if (checkedPositions.get(groupPosition) != null) {
                        boolean isChecked = checkedPositions.get(groupPosition).get(childPosition);

                        if(!isChecked){
                        }

                    } else {
                        System.out.println("false");
                    }

                }
            });

您需要为您的 gridAdapter 设置一个 'OnItemClickListener',并重写 onItemClick 方法,如下所示。

注意:- 这将突出显示您单击的 ImageView,如果您碰巧在同一个 GridView 中单击另一个 ImageView,则该 ImageView 也会突出显示!就像 'multiple selection'.

gridAdapter.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            ImageView selectedFlagImageView = (ImageView) view;
            selectedFlagImageView.setBackgroundColor(Color.parseColor("#37a93400"));
        }
    });

这将为所选 ImageView 的背景着色。我在这里使用的颜色代码很简单,更多的 alpha 和更少的 RGB。(我使用 Android Studio 颜色选择器)

以下图片将让您了解在提供这样的背景颜色时它的外观。

无背景色:

背景颜色: