Question

我有6张图片已下载as shown here，但我图库中的GridView只显示其中5张images。

我试图复制Instagram如何显示其图库，所选图像占据了屏幕的60％，而图库图像占据了其余部分。

fragment_gallery.xml

<?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/relLayoutl">
        <!--toolbar-->
        <include layout="@layout/snippet_top_gallerybar"/>

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="100"
        android:layout_below="@+id/relLayoutl">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="60">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/galleryImageView"
                android:scaleType="centerCrop"/>

            <ProgressBar
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/progressBar"
                android:layout_centerInParent="true"/>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="40">
        <GridView
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:numColumns="5"
            android:verticalSpacing="1.5dp"
            android:horizontalSpacing="1.5dp"
            android:gravity="center"
            android:layout_marginTop="1dp"
            android:stretchMode="none"
            android:id="@+id/gridView">

        </GridView>
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

我创建了一个方形视图来生成方格单元

layout_grid_imageview.xml

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

    <com.example.sheldon.instagramclone.Util.SquareImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/gridViewImage"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"/>

    <ProgressBar
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:id="@+id/gridProgressBar"/>
</RelativeLayout>

GalleryFragment.java

public class GalleryFragment extends Fragment {

private static final int NUM_COLUMNS = 4;
private ImageView mExit;
private Spinner mSpinner;
private TextView mNext;
private ProgressBar mProgressBar;
private List<String> directories;
private GridView mGridView;
private ImageView mGalleryImage;
private HashMap<String, ArrayList<String>> directoryToImage;
private String append = "file:/";
private String mSelectedImage;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_gallery, container, false);
    mExit = (ImageView) view.findViewById(R.id.exitShare);
    mSpinner = (Spinner) view.findViewById(R.id.shareSpinner);
    mNext = (TextView) view.findViewById(R.id.shareNext);
    mProgressBar = (ProgressBar) view.findViewById(R.id.progressBar);
    mGridView = (GridView) view.findViewById(R.id.gridView);
    mGalleryImage = (ImageView) view.findViewById(R.id.galleryImageView);
    mExit.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            getActivity().finish();
        }
    });

    mNext.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.d(TAG, "onClick: Navigating to next step in sharing photo");
            Intent intent = new Intent(getActivity(), NextActivity.class);
            intent.putExtra("selected_image", mSelectedImage);
            startActivity(intent);
        }
    });
    init();

    return view;
}

private void init() {
    ImageFinder imageFinder = new ImageFinder();
    imageFinder.getImages(getActivity());
    directoryToImage = imageFinder.getImageMapping();
    directories = new ArrayList<>(directoryToImage.keySet());
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), R.layout.spinner_item, directories);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        mSpinner.setAdapter(adapter);
        mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
            Log.d(TAG, "onItemSelected: " + directories.get(position));
            setUpGridView(directories.get(position));
        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {

        }
    });
}

private void setUpGridView(String directory) {
    final ArrayList<String> imgURLS = directoryToImage.get(directory);
    Log.d(TAG, "setUpGridView: Displaying " + directory + "  with " + imgURLS.size() + " images");
    int gridWidth = getResources().getDisplayMetrics().widthPixels;
    int imageWidth = gridWidth / NUM_COLUMNS;
    Log.d(TAG, "setUpGridView: Image Width is " + imageWidth);
    mGridView.setColumnWidth(imageWidth);
    GridImageAdapter adapter = new GridImageAdapter(getActivity(), R.layout.layout_grid_imageview, append, imgURLS);
    mGridView.setAdapter(adapter);
    UniversalImageLoader.setImage(imgURLS.get(0),mGalleryImage, mProgressBar, append);
    mSelectedImage = imgURLS.get(0);
    mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        UniversalImageLoader.setImage(imgURLS.get(position), mGalleryImage, mProgressBar, append);
        mSelectedImage = imgURLS.get(0);
    }
});}

我使用名为Universal Image loader

的库显示图像

GridImageAdapter.java

public class GridImageAdapter extends ArrayAdapter<String>{

private Context mContext;
private LayoutInflater mInflater;
private int layoutResource;
private String mAppend;
private ArrayList<String> imgURLs;

public GridImageAdapter(Context context, int layoutResource, String append, ArrayList<String> imgURLs) {
    super(context, layoutResource, imgURLs);
    mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    mContext = context;
    this.layoutResource = layoutResource;
    mAppend = append;
    this.imgURLs = imgURLs;
}

private static class ViewHolder{
    SquareImageView image;
    ProgressBar mProgressBar;
}

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

    final ViewHolder holder;
    if(convertView == null){
        convertView = mInflater.inflate(layoutResource, parent, false);
        holder = new ViewHolder();
        holder.mProgressBar = (ProgressBar) convertView.findViewById(R.id.gridProgressBar);
        holder.image = (SquareImageView) convertView.findViewById(R.id.gridViewImage);

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

    String imgURL = getItem(position);
    Log.d(TAG, "getView: Loading position " + position + ", displaying " + imgURL + ", with image " + holder.image);

    ImageLoader imageLoader = ImageLoader.getInstance();

    imageLoader.displayImage(mAppend + imgURL, holder.image, new ImageLoadingListener() {
        @Override
        public void onLoadingStarted(String imageUri, View view) {
            if(holder.mProgressBar != null){
                holder.mProgressBar.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onLoadingFailed(String imageUri, View view, FailReason failReason) {
            if(holder.mProgressBar != null){
                holder.mProgressBar.setVisibility(View.GONE);
            }
        }

        @Override
        public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
            if(holder.mProgressBar != null){
                holder.mProgressBar.setVisibility(View.GONE);
            }
        }

        @Override
        public void onLoadingCancelled(String imageUri, View view) {
            if(holder.mProgressBar != null){
                holder.mProgressBar.setVisibility(View.GONE);
            }
        }
    });

    return convertView;
}

第一次发帖，所以如果这篇帖子有任何问题我很抱歉。

Answer 1

很抱歉在我的帖子中如此笼统和不清楚，我不太确定代码的哪一部分是问题区域。在再次查看代码之后，我注意到了一个愚蠢的错误。我在fragment_gallery.xml中将GridView的numColumns属性设置为5，但是使用private static final int NUM_COLUMNS = 4计算了GalleryFragment.java中的列宽。我假设这导致图像显示在不存在的第5列中。

Android：GridView只显示几张图片

1 个答案: