android - 在单击的网格项目顶部再显示一个图像

Question

我有包含 4 个项目的 GridView ，现在单击每个网格项目我需要在该单击的网格项目之上再显示一个图像。

如何实现？

这是我的适配器类获取 View :

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder view;
    LayoutInflater inflator = activity.getLayoutInflater();

    GridView.LayoutParams params = null;
    if (convertView == null) {
    view = new ViewHolder();
    convertView = inflator.inflate(R.layout.tile_row, null);

    view.textView = (TextView) convertView.findViewById(R.id.title);
    view.imageView = (ImageView) convertView.findViewById(R.id.icons);
    convertView.setTag(view);

    params = new GridView.LayoutParams(Width, Height);
    convertView.setLayoutParams(params);
    } else {
    view = (ViewHolder) convertView.getTag();
    }
    // set image view parameters
    setImageParamaeters(view.imageView);

    view.textView.setText(adapterNames.get(position));
    view.imageView.setImageResource(adapterIcondIds.get(position));

    if (params != null) {
    convertView.setLayoutParams(params);
    }

    convertView.setId(position);
    convertView.setOnClickListener(onClickListeners.get(position));

    return convertView;
}

Answer 1

您可以通过在网格项目顶部放置一个弹出窗口来完成此操作。为了找到网格项目在屏幕上的确切位置，您可以使用以下代码

Rect loc = new Rect();
int[] location = new int[2];
view.getLocationOnScreen(location);
loc.left = location[0];
loc.top = location[1];
loc.right = loc.left + view.getWidth();
loc.bottom = loc.top + view.getHeight();

变量 loc 保存被点击的 view 在屏幕上的确切位置，这只是方法的第二个参数

@Override
public void onItemClick(AdapterView<?> parent, View view,
        int position, long id) {
    // TODO Auto-generated method stub  
}

有了这些信息，您可以轻松实现您的需求。最好是计算 View 的中心并将弹出窗口的中心与单击 View 的中心对齐。

注意:如果部分 View 可见，您需要进行调整以显示弹出窗口。

已编辑:由于我没有听清您的问题，我添加了一张图片以更加清晰。

我已经提供了案例 1 的代码。对于案例 2，您需要修改布局，您可以在点击网格项时显示叠加图像

已编辑:实现案例 2

修改适配器代码，移动一些变量进行优化

public CustomAdapter(Activity activity, ...){
    inflator = activity.getLayoutInflater();
...
}
LayoutInflater inflator;

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

    if (convertView == null) {
        view = new ViewHolder();
        convertView = inflator.inflate(R.layout.tile_row, null);

        view.textView = (TextView) convertView.findViewById(R.id.title);
        view.imageView = (ImageView) convertView.findViewById(R.id.icons);
        view.clickedImage = (ImageView) convertView.findViewById(R.id.clickedImage);
        convertView.setTag(view);
    } else {
        view = (ViewHolder) convertView.getTag();
    }
    // set image view parameters
    view.textView.setText(adapterNames.get(position));
    view.imageView.setImageResource(adapterIcondIds.get(position));
    //add a int variable to the view holder
    view.position = position;
    if(position != clickedPosition){
        view.clickedImage.setVisibility(View.GONE);
    }
    convertView.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            ViewHolder holder = (ViewHolder)v.getTag();
            clickedPosition = holder.position;
            holder.clickedImage.setVisibility(View.VISIBLE);
            //you can also set the resource of the imageview here.
            notifyDataSetChanged();
        }
    });

    return convertView;
}
//this is used for resetting the previous view when a new view is clicked
int clickedPosition = -1;

To preserve the clicked state of an item in the grid view, i store the clicked item position of the grid. Now in onClick i change visibility of the clicked image(which was in GONE state), update the variable clickedPosition and simply call notifyDataSetChanged. This tells that the adapter that the dataset has changed and getView for all the visible grid items will be called. So, if you click item 1 initially, and then click item 3 then you will notice that item 1 has been reset when item 3 was clicked.

XML title_row.xml

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/droid_logo_black"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/clickedImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/login_help_logo" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>