带有十字按钮的 GalleryView

Question

我使用了 Universal Image Loader。
我成功实现了UIL。
我能够 select 一张图片，然后将它放在画廊视图中。
画廊有一个 OnClickListener，当 onCLick 图像将被删除时。
我的问题是我希望图像在图像上方有一个交叉按钮。
尝试更改布局但没有成功..
我希望它看起来像这样。

这是我的 Activity..

package com.thesis.juandirection.juandirectionfinale.fragments;



import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v4.content.res.TypedArrayUtils;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;

import java.util.ArrayList;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.display.RoundedBitmapDisplayer;
import com.thesis.juandirection.juandirectionfinale.R;
import com.thesis.juandirection.juandirectionfinale.Constants;
import com.thesis.juandirection.juandirectionfinale.SimpleImageActivity;

public class ImageGalleryFragment extends ReviewAdapter {

    public static final int INDEX = 3;
    private ImageAdapter mAdapter;

    @SuppressWarnings("deprecation")
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fr_image_gallery, container, false);
        final Gallery gallery = (Gallery) rootView.findViewById(R.id.gallery);
        final ImageView imageview = (ImageView) rootView.findViewById(R.id.imgAdd);

        mAdapter = new ImageAdapter(getActivity());
        gallery.setAdapter(mAdapter);

        DisplayMetrics metrics = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(metrics);
        ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) gallery.getLayoutParams();
        mlp.setMargins(-((metrics.widthPixels * 2 + 500) / 3), mlp.topMargin,
                mlp.rightMargin, mlp.bottomMargin);
        gallery.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Constants.IMAGES_SELECTED.remove(position);
                mAdapter.notifyDataSetChanged();

            }
        });

        imageview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getContext(), SimpleImageActivity.class);
                intent.putExtra(Constants.Extra.FRAGMENT_INDEX, ImageGridFragment.INDEX);
                startActivity(intent);
            }
        });

        if (Constants.IMAGES_SELECTED.size()>0) {
            imageview.setVisibility(View.INVISIBLE);
        }else{
            imageview.setVisibility(View.VISIBLE);
        }
        return rootView;
    }


    /*private void startImagePagerActivity(int position) {
        Intent intent = new Intent(getActivity(), SimpleImageActivity.class);
        intent.putExtra(Constants.Extra.FRAGMENT_INDEX, ImagePagerFragment.INDEX);
        intent.putExtra(Constants.Extra.IMAGE_POSITION, position);
        startActivity(intent);
    }*/

    private static class ImageAdapter extends BaseAdapter {
        //private static final String[] IMAGE_URLS = Constants.IMAGES_SELECTED;
        ArrayList<String> IMAGE_URLS = new ArrayList<>();
        private LayoutInflater inflater;

        private DisplayImageOptions options;

        ImageAdapter(Context context) {
            inflater = LayoutInflater.from(context);
            options = new DisplayImageOptions.Builder()
                    .showImageOnLoading(R.drawable.ic_stub)
                    .showImageForEmptyUri(R.drawable.ic_empty)
                    .showImageOnFail(R.drawable.ic_error)
                    .cacheInMemory(true)
                    .cacheOnDisk(true)
                    .considerExifParams(true)
                    .bitmapConfig(Bitmap.Config.RGB_565)
                    .displayer(new RoundedBitmapDisplayer(20))
                    .build();
        }

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

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

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

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            IMAGE_URLS = (ArrayList<String>) Constants.IMAGES_SELECTED.clone();
            ImageView imageView = (ImageView) convertView;
            if (imageView == null) {
                imageView = (ImageView) inflater.inflate(R.layout.item_gallery_image, parent, false);
            }
            ImageLoader.getInstance().displayImage(IMAGE_URLS.get(position), imageView, options);

            return imageView;
        }
    }
}

我的布局.. item_gallery_image.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="120dip"
    android:background="#b6b6b6">


    <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/image"
        android:layout_width="90dip"
        android:layout_height="90dip"
        android:adjustViewBounds="true"
        android:contentDescription="@string/descr_image"
        android:scaleType="centerCrop" />


    <Button
        android:id="@+id/btn"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:text="X"
        />
</FrameLayout>

提前致谢！... 编辑：Post 示例输出。顺便提一句。当我运行程序使用XML时，程序关闭。

Answer 1

在您的 ImadgeAdapter#getView 中，您伪造了一个包含图像视图和十字按钮的框架布局，因此结果

inflater.inflate(R.layout.item_gallery_image, parent, false)

将是 FrameLayout 类型，但您将其转换为 imageView，这就是为什么应用程序将 crash.so 您应该使用 ViewHolder 来保存 imageView，如下所示：

 @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        IMAGE_URLS = (ArrayList<String>) Constants.IMAGES_SELECTED.clone();
        FrameLayout layout = (FrameLayout) convertView;
        if (layout == null) {
            layout = (FrameLayout) inflater.inflate(R.layout.item_gallery_image, parent, false);
        }
        ImageView imageView = (ImageView)layout.findViewById(R.id.image);
        ImageLoader.getInstance().displayImage(IMAGE_URLS.get(position), imageView, options);

        return layout;
    }

当然你也应该使用 ViewHolder 来保持视图。

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#b6b6b6">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:src="@drawable/ic_process" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_setting_light" />

只需将 FrameLayout 更改为相对布局并使用 ImageView 而不是带文本的 Button "X"

带有十字按钮的 GalleryView

GalleryView with Cross Button

android

android-studio

android-gallery

universal-image-loader

galleryview