【问题标题】:How to highlight the grid view item on select?如何在选择时突出显示网格视图项?
【发布时间】:2013-10-10 09:44:38
【问题描述】:

我正在创建一个包含图像和文本的网格视图布局。我想要多选项目,它工作正常,但我想突出显示选中的网格项目。

这是我的代码:

public class FragMent1 extends Fragment{

        BaseAdapter MyAdapter;
    private Context mContext;

    @SuppressLint("ValidFragment")
    public FragMent1(Context c) {
        mContext = c;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        //View view = inflater.inflate(R.layout.g, null);
        View view = inflater.inflate(R.layout.gridview,null);
        final GridView listView = (GridView) view.findViewById(R.id.mainGrid);
        listView.setAdapter(new Adapter());
        //listView.setSelection(1);
        listView.setChoiceMode(GridView.CHOICE_MODE_MULTIPLE_MODAL);
        listView.setMultiChoiceModeListener(new MultiChoiceModeListener() {

            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                // TODO Auto-generated method stub
                return false;
            }

            @Override
            public void onDestroyActionMode(ActionMode mode) {
                // TODO Auto-generated method stub

            }

            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                // TODO Auto-generated method stub

                mode.setTitle("Select Items");
                mode.setSubtitle("One item selected");
                return true;

            }

            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                // TODO Auto-generated method stub


                int selectCount = listView.getCheckedItemCount();
                switch (selectCount) {
                case 1:
                    mode.setSubtitle("One item selected");

                    break;
                default:
                    mode.setSubtitle("" + selectCount + " items selected");

                    break;
                }

                return true;
            }

            @Override
            public void onItemCheckedStateChanged(ActionMode mode, int position,
                    long id, boolean checked) {
                // TODO Auto-generated method stub



                int selectCount = listView.getCheckedItemCount();
                switch (selectCount) {
                case 1:
                    mode.setSubtitle("One item selected");
                    break;
                default:
                    mode.setSubtitle("" + selectCount + " items selected");
                    break;
                }

            }
        });


        return view;
    }

    private class Adapter extends BaseAdapter {

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

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

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

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

            View myView = convertView;

            ImageView image;
            if (convertView == null) {
                image = new ImageView(FragMent1.this.getActivity());
                image.setLayoutParams(new GridView.LayoutParams(85, 85));
                image.setScaleType(ImageView.ScaleType.CENTER_CROP);



                LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);           
                myView = inflater.inflate(R.layout.grid_items_ontap, null);


                // Add The Image!!!           
                ImageView iv = (ImageView)myView.findViewById(R.id.grid_item_image_OnTap);
                iv.setImageResource(mThumbIds[position]);


                // Add The Text!!!
                TextView tv = (TextView)myView.findViewById(R.id.grid_item_text_onTap);
                tv.setText(names[position] );






            }
            return myView;
        }

        private Integer[] mThumbIds = {
                R.drawable.car, R.drawable.car,
                R.drawable.car, R.drawable.car,
                R.drawable.car,R.drawable.car,R.drawable.car
        };

        private String[] names={"ab","cd","ef","gh","ij","kl","mn"};


    }
}

我应该在代码中添加什么来突出显示将被选中的网格项。

请给我一些建议。 提前致谢。

【问题讨论】:

  • 当你在adapter中膨胀视图时,你可以设置一个Styles.xml文件中定义的Style。
  • 你能解释我吗?我没听懂你。
  • 我还想知道,在我上面的代码中有 MultiChoiceModeListener() 方法,它可以在长按时选择网格项目,但我需要点击它应该被选中。你能告诉我任何删除的方法吗长按我上面的代码。所以,我可以满足我的要求。
  • 为什么“GridView”被称为列表视图?好混乱..

标签: android


【解决方案1】:

您可以使用选择器突出显示项目

在drawable文件夹中创建一个xml文件

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/blue" android:state_selected="true"/>
    <item android:drawable="@color/transparent"/>

</selector>

并设置你的gridview的listSelector,比如

android:listSelector="@drawable/list_selector"

【讨论】:

  • 可以正常工作,但是当我还选择其他项目时,我想保留该突出显示的项目。意味着无论项目被选中,它都应该被突出显示。
  • 它在我的应用程序中不起作用,你能帮忙看看我的帖子吗?谢谢。 stackoverflow.com/questions/28125358/…
  • 如果我将 selector.xml 更改为以下。它会起作用的。为什么? schemas.android.com/apk/res/android"> 我正在使用 android 4.4.2 的模拟器
【解决方案2】:
  1. 创建 ImageAdapter 类
  2. 将此参数添加到您的类 private int selectedPosition = -1
  3. 将此方法添加到您的 ImageAdapter 类中

    public void setSelectedPosition(int position) {
        selectedPosition = position;
    }
    
  4. 将这些行添加到 ImageAdapter 类的 getView 方法的末尾

    if (position == selectedPosition) {
            gridView.setBackgroundColor(Color.BLACK);
        } else {
            gridView.setBackgroundColor(Color.TRANSPARENT);
        }
    
  5. 在您的活动(或片段)中从 ImageAdapter 类创建对象
  6. 然后只需添加这些行进行测试

    GridView gridView = (GridView) view.findViewById(R.id.gridview);
    gridView.setAdapter(adapterImage);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                                int position, long id) {
            adapterImage.setSelectedPosition(position);
            adapterImage.notifyDataSetChanged();
        }
    });
    

【讨论】:

    【解决方案3】:

    如果您的网格视图位于相对布局内,您可以在此处设置触摸侦听器以使用自定义可绘制对象突出显示所选项目(这里我使用九个补丁图像来指定选择)

    private RelativeLayout.OnTouchListener touchListener = new RelativeLayout.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if(touchEnabled==false)
                    return false;
                try {
                    if (oldView != null) {
                        oldView.setBackgroundResource(R.color.transparent);
                    }
                    setSelection(((ViewHolder)v.getTag()).pos);
                    v.setBackgroundResource(R.drawable.list_pressed);
                    oldView = v;
                } catch (Exception e) {
                }
                return false;
            }
        };   
    

    或者你也可以使用选择器

    在drawable文件夹中创建一个xml文件

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@color/blue" android:state_selected="true"/>
        <item android:drawable="@color/transparent"/>
    
    </selector>
    

    并设置你的gridview的listSelector,比如

    android:listSelector="@drawable/list_selector"

    【讨论】:

      【解决方案4】:

      我在childItems 上用setTag 解决了这个问题 这是我的示例代码

       yourGridView.setOnItemClickListener((parent1, view, position1, id1) -> {
      
                  if (view.getTag()!=null && view.getTag().equals("Examplename")){
                      view.setBackgroundColor(yourColor);
                      view.setTag("");
                  }else{
      
                      view.setTag("Examplename");
                      view.setBackgroundColor(Color.BLUE);
                      int Nums=gridListItems.getChildCount();
                      for (int i=0;  i<=Nums-1; i++ ){
                          if (i!=position1){
                           View child=   gridListItems.getChildAt(i);
                          child.setBackgroundColor(yourColor);
                          }
                      }
                  }
      
              });
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-01-07
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-06-13
        • 1970-01-01
        • 2017-09-06
        相关资源
        最近更新 更多