لا يمكن لمكتبة تطوير تطبيقات Android AndroidStaggeredGrid رؤية الصور بتنسيق عرض StaggeredGrid

Question

أقوم بتطوير تطبيق Android، حيث أفترض أن أعرض جميع صور المعرض في جزء واحد.لقد حصلت على الجزء الذي يعمل مع جميع صور المعرض الموجودة به كصور مصغرة.ثم أردت عرض جميع الصور بتنسيق Mosaic ولكن لم أتمكن من العثور على أي شيء بخصوص ذلك.لذلك قررت استخدام مكتبة AndroidStaggeredGrid لعرض الصور بأسلوب ETsy.لقد قمت باستيراد المكتبة بنجاح، وقمت بإجراء بعض التغييرات على التعليمات البرمجية وفقًا لصفحة github الخاصة بـ AndroidStaggeredGrid.لكن الصور لا تزال تظهر بنفس تنسيق المعرض والأعمدة العادية.يمكن للشخص الرجاء مساعدتي في ذلك.أدناه هو الرمز.

المحول - هذا محول لعرض الصور الخاص بي.لقد قمت هنا بإضافة لون الخلفية فقط لاختبار ما إذا كان يعمل بشكل جيد.لكنها ليست كذلك.

package com.ultimate.camera.adapters;

import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.ImageView;

import com.etsy.android.grid.util.DynamicHeightImageView;
import com.ultimate.camera.R;
import com.ultimate.camera.adapters.items.PhotoItem;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

public class PhotoAdapter extends ArrayAdapter<PhotoItem>{
private static final String TAG = "PhotoAdaptor";
    private Context context;
    private int resourceId;
    private final Random mRandom;
    private final ArrayList<Integer> mBackgroundColors;

    private static final SparseArray<Double> sPositionHeightRatios = new SparseArray<Double>();

    public PhotoAdapter(Context context, int resourceId,
                                 List<PhotoItem> items, boolean useList) {
        super(context, resourceId, items);
        mRandom = new Random();
        this.context = context;
        this.resourceId = resourceId;
        mBackgroundColors = new ArrayList<Integer>();
        mBackgroundColors.add(R.color.orange);
        mBackgroundColors.add(R.color.green);
        mBackgroundColors.add(R.color.blue);
        mBackgroundColors.add(R.color.yellow);
        mBackgroundColors.add(R.color.grey);
    }
 private class ViewHolder {
        DynamicHeightImageView photoImageView;
    }

    /**
     * Populate the view holder with data.
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;
        PhotoItem photoItem = getItem(position);
        View viewToUse = null;

 LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        if (convertView == null) {
            holder = new ViewHolder();
            viewToUse = mInflater.inflate(resourceId, null);
            holder.photoImageView = (DynamicHeightImageView) viewToUse.findViewById(R.id.imageView);
            viewToUse.setTag(holder);
        } else {
            viewToUse = convertView;
            holder = (ViewHolder) viewToUse.getTag();
        }

        double positionHeight = getPositionRatio(position);
        int backgroundIndex = position >= mBackgroundColors.size() ?
                position % mBackgroundColors.size() : position;
        Log.d(TAG, "getView position:" + position + " h:" + positionHeight);

        // Set the thumbnail

        holder.photoImageView.setImageURI(photoItem.getThumbnailUri());
        holder.photoImageView.setHeightRatio(positionHeight);

        viewToUse.setBackgroundResource(mBackgroundColors.get(backgroundIndex));

        return viewToUse;
    }

    private double getPositionRatio(final int position) {
        double ratio = sPositionHeightRatios.get(position, 0.0);

if (ratio == 0) {
            ratio = getRandomHeightRatio();
            sPositionHeightRatios.append(position, ratio);
            Log.d(TAG, "getPositionRatio:" + position + " ratio:" + ratio);
        }
        return ratio;
    }

    private double getRandomHeightRatio() {
        return (mRandom.nextDouble() / 2.0) + 1.0; // height will be 1.0 - 1.5 the width
    }
}

PhotoItem java تهدف هذه الواجهة إلى الحصول على photoItem للمحول

package com.ultimate.camera.adapters.items;

import android.net.Uri;
public class PhotoItem {
private Uri thumbnailUri;
    private Uri fullImageUri;

    public PhotoItem(Uri thumbnailUri,Uri fullImageUri) {
        this.thumbnailUri = thumbnailUri;
        this.fullImageUri = fullImageUri;
    }

    /**
     * Getters and setters
     */
    public Uri getThumbnailUri() {
        return thumbnailUri;
    }

    public void setThumbnailUri(Uri thumbnailUri) {
        this.thumbnailUri = thumbnailUri;
    }

    public Uri getFullImageUri() {
        return fullImageUri;
    }

    public void setFullImageUri(Uri fullImageUri) {
        this.fullImageUri = fullImageUri;
    }
}

PhotoGalleryFragment XML Layot لمعرض الصور

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!--<FrameLayout-->

        <!--android:layout_width="fill_parent"-->
        <!--android:layout_height="fill_parent">-->
        <!--<GridView-->
            <!--style="@style/GridView.PhotoGallery"-->
            <!--android:id="@android:id/list"-->
            <!--android:numColumns="3" />-->

        <com.etsy.android.grid.StaggeredGridView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@android:id/list"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            app:item_margin="8dp"
            app:column_count="2"


            ></com.etsy.android.grid.StaggeredGridView>
        <TextView
            android:id="@+id/empty"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:gravity="center"
            android:visibility="invisible"/>
    <!--</FrameLayout>-->
</LinearLayout>

صورة عنصر XML

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <FrameLayout
        android:layout_width="@dimen/photo_width"
        android:layout_height="@dimen/photo_height">


        <com.etsy.android.grid.util.DynamicHeightImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/imageView"
            android:adjustViewBounds="false"
            android:gravity="center"
            android:scaleType="centerCrop"/>
    </FrameLayout>
</RelativeLayout>

PhotoGalleryFragment.Java

package com.ultimate.camera.fragments;

import android.app.Activity;
import android.app.LoaderManager;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Loader;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ListAdapter;
import android.widget.TextView;

import com.etsy.android.grid.StaggeredGridView;
import com.ultimate.camera.R;
import com.ultimate.camera.activities.MainActivity;
import com.ultimate.camera.adapters.PhotoAdapter;
import com.ultimate.camera.adapters.items.PhotoItem;
import com.ultimate.camera.utilities.PhotoGalleryAsyncLoader;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public class SimplePhotoGalleryListFragment extends BaseFragment implements AbsListView.OnItemClickListener,
        LoaderManager.LoaderCallbacks<List<PhotoItem>>  {
protected OnFragmentInteractionListener mListener;
   // protected AbsListView mListView;
    protected PhotoAdapter mAdapter;
    protected ArrayList<PhotoItem> mPhotoListItem;
    protected TextView mEmptyTextView;
    protected ProgressDialog mLoadingProgressDialog;
    protected StaggeredGridView mListView;

    /**
     * Required empty constructor
     */
    public SimplePhotoGalleryListFragment() {
        super();
    }

    /**
     * Static factory method
     * @param sectionNumber
     * @return
     */
    public static SimplePhotoGalleryListFragment newInstance(int sectionNumber) {
        SimplePhotoGalleryListFragment fragment = new SimplePhotoGalleryListFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_SECTION_NUMBER, sectionNumber);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Create an empty loader and pre-initialize the photo list items as an empty list.
        Context context = getActivity().getBaseContext();

        // Set up empty mAdapter
        mPhotoListItem = new ArrayList<PhotoItem>() ;
        mAdapter = new PhotoAdapter(context,
                R.layout.photo_item,
                mPhotoListItem, false);

        // Prepare the loader.  Either re-connect with an existing one,
        // or start a new one.
        getLoaderManager().initLoader(0, null, this);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);


    }

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container,
                             Bundle savedInstanceState) {
        View view = null;
        view = inflater.inflate(R.layout.fragment_photo_gallery, container, false);

        // Set the mAdapter
        mListView = (StaggeredGridView) view.findViewById(android.R.id.list);
        ((AdapterView<ListAdapter>) mListView).setAdapter(mAdapter);
        mEmptyTextView = (TextView)view.findViewById(R.id.empty);

        // Show the empty text / message.
        resolveEmptyText();

        // Set OnItemClickListener so we can be notified on item clicks
        mListView.setOnItemClickListener(this);

        return view;
    }
protected void resolveEmptyText(){
        if(mAdapter.isEmpty()){
            mEmptyTextView.setVisibility(View.VISIBLE);
            setEmptyText();
        } else {
            mEmptyTextView.setVisibility(View.INVISIBLE);
        }
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        try {
            mListener = (OnFragmentInteractionListener) activity;
            // Show a progress dialog.
            mLoadingProgressDialog = new ProgressDialog(getActivity());
            mLoadingProgressDialog.setMessage("Loading Photos...");
            mLoadingProgressDialog.setCancelable(true);
            mLoadingProgressDialog.show();
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnFragmentInteractionListener");
        }
    }

    @Override
    public void onDetach() {
        super.onDetach();
        mListener = null;
        cancelProgressDialog();
    }

    @Override
    public void onPause(){
        super.onPause();
        cancelProgressDialog();
    }

    @Override
    public void onStop(){
        super.onStop();
        cancelProgressDialog();
    }

    /**
     * This is only triggered when the user selects a single photo.
     * @param parent
     * @param view
     * @param position
     * @param id
     */

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        if (null != mListener) {
            // Tell the share builder to add the photo to the share operation.
            PhotoItem photoListItem = (PhotoItem)this.mAdapter.getItem(position);
            String imagePath = photoListItem.getThumbnailUri().getPath();
            mListener.onFragmentInteraction(MainActivity.SELECT_PHOTO_ACTION);
            resetFragmentState();
        }
    }

    /**
     * Used when hitting the back button to reset the mFragment UI state
     */
    protected void resetFragmentState(){
        // Clear view state
        getActivity().invalidateOptionsMenu();
        ((BaseAdapter) mListView.getAdapter()).notifyDataSetChanged();
    }
public void setEmptyText() {
        mEmptyTextView.setText("No Photos!");
    }

    /**
     * Loader Handlers for loading the photos in the background.
     */
    @Override
    public Loader<List<PhotoItem>> onCreateLoader(int id, Bundle args) {
        // This is called when a new Loader needs to be created.  This
        // sample only has one Loader with no arguments, so it is simple.
        return new PhotoGalleryAsyncLoader(getActivity());
    }

    @Override
    public void onLoadFinished(Loader<List<PhotoItem>> loader, List<PhotoItem> data) {
        // Set the new data in the mAdapter.
        mPhotoListItem.clear();

        for(int i = 0; i < data.size();i++){
            PhotoItem item = data.get(i);
            mPhotoListItem.add(item);
        }

        mAdapter.notifyDataSetChanged();
        resolveEmptyText();
        cancelProgressDialog();
    }

    @Override
    public void onLoaderReset(Loader<List<PhotoItem>> loader) {
        // Clear the data in the mAdapter.
        mPhotoListItem.clear();
        mAdapter.notifyDataSetChanged();
        resolveEmptyText();
        cancelProgressDialog();
    }

    /**
     * Save cancel for the progress loader
     */
    private void cancelProgressDialog(){
        if(mLoadingProgressDialog != null){
            if(mLoadingProgressDialog.isShowing()){
                mLoadingProgressDialog.cancel();
            }
        }
    }
}

مخرجاتي

يمكنك أن ترى في الصور التي أخرجتها هي صور مصغرة بنفس الحجم، ولكن ليس لدي نص بالرغم من ذلك.لكنني أتوقع أن تكون جميع الصور ذات أحجام مختلفة.

سأكون ممتنًا حقًا إذا ساعدني شخص ما في هذا.وأيضًا إذا كان أي شخص يعرف كيفية إنشاء تشكيل فسيفساء للصور، فقد أعطيت صورة فورمات الفسيفساء أيضًا

Answer 1

بعد أن خدشت رأسي مرة أخرى لبضعة مزيد من الوقت، وأخيرا وجدت الجواب.كانت المشكلة في ملف تخطيط PhotoItem (PhotoItem.XML) حيث قمت بتحديد تخطيط لكل عنصر صورة سيظهر في جزء.كان هناك FrameLayout باعتباره الأصل لقسم DynamicImageView، والذي كان له عرضه وارتفاعه الخاصان بسبب ذلك، ولا يسمح بتعيين حامل ارتفاع ديناميكي.photoImageView.setHeightRation(positionHeight) إلى PhotoItem.لذلك، كان التغيير الوحيد هو PhotoItem.XML، ولا بد لي من الاحتفاظ ببقية الكود كما هو.

لذلك اضطررت إلى إزالة قسم FrameLayout والاحتفاظ فقط بـ DynamicImageView كتخطيط PhotoItem.

PhotoItem.XML

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

        <com.etsy.android.grid.util.DynamicHeightImageView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/imageView"
            android:adjustViewBounds="false"
            android:gravity="center"
            android:scaleType="centerCrop"/>

</RelativeLayout>

ثم سار الأمر بشكل جيد، وقد أرفقت لقطة الشاشة أدناه :)

ما زلت أبحث عن حل عرض الفسيفساء بالرغم من ذلك

شكرًا

Answer 2

لقد حصلت على جميع الصور بنفس الحجم بسبب هولدر.photoImageView.setHeightRatio(positionHeight);لقد جلست على نسبة الارتفاع لصورك، لذا قم بإزالة هذا الخط وكل تأثيره..حاول إزالة هولدر.photoImageView.setHeightRatio(positionHeight);