Autore Topic: Zoom di una immagine all'interno di un viewpager  (Letto 461 volte)

Offline ValerioAdo

  • Utente normale
  • ***
  • Post: 323
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    Huawei Ascend g525
  • Sistema operativo:
    windows 8.1
Zoom di una immagine all'interno di un viewpager
« il: 01 Ottobre 2015, 11:59:03 CEST »
0
Salve a tutti!

Con la mia app ho un view pager che uso come galleria di immagini ma, oltre allo scorrimento laterale vorrei che , quando l'utente tappa, l'immagine si ingrandisca (un po come in questo tutorial Zooming a View | Android Developers).

Ma ho riscontrato un sacco di problemi, dal fatto che il view pager non "ascoltasse" l'OnClickListener al fatto che ora non mi appare l'immagine da zommare....


Al momento faccio "partire" lo zoom usando un bottone nella action bar della scheda

questo è il codice:
Codice (Java): [Seleziona]
public class Scheda extends AppCompatActivity {

    TextView title,name,description,price,OriginalPrice,Quantity;

    Bitmap zoomImage;

    String titolo,nome,descrizione,prezzo,prezzoOriginale,quantità,Left;
    String Url="";

    ViewPager mPager;

    String Status="0";
    String Number="";

    int LIST,ID;
    ActionBar actionBar ;

    ImageAdapter adapter;
    AlertDialog.Builder adb;

    // Hold a reference to the current animator,
    // so that it can be canceled mid-way.
    private Animator mCurrentAnimator;

    // The system "short" animation time duration, in milliseconds. This
    // duration is ideal for subtle animations or animations that occur
    // very frequently.
    private int mShortAnimationDuration;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.scheda);

        //pic=(ImageView) findViewById(R.id.Pic);

        title=(TextView)findViewById(R.id.Title);
        name=(TextView)findViewById(R.id.Nome);
        description=(TextView)findViewById(R.id.Description);
        price=(TextView)findViewById(R.id.Prezzo);
        OriginalPrice=(TextView)findViewById(R.id.PrezzoTrue);
        Quantity=(TextView)findViewById(R.id.Quantity);
        mPager=(ViewPager)findViewById(R.id.Pic);

        ImageView purchase=(ImageView) findViewById(R.id.imageView4);

        adapter= new ImageAdapter(this);

        // Retrieve and cache the system's default "short" animation time.
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);

        actionBar= getSupportActionBar();

        Intent intent = getIntent();
        Bundle extras = intent.getExtras();

         ID = extras.getInt("ID");
         LIST = extras.getInt("List");

....

}

  @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu items for use in the action bar
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.scheda_menu, menu);
        actionBar.setTitle(titolo);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle presses on the action bar items
        switch (item.getItemId()) {
            case R.id.info:
                Info();
                return true;
            case R.id.zoom:
                zoomImageFromThumb(mPager, zoomImage);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

    public void zoomImageFromThumb(final View thumbView, Bitmap imageResId) {

        // If there's an animation in progress, cancel it
        // immediately and proceed with this one.
        if (mCurrentAnimator != null) {
            mCurrentAnimator.cancel();
        }

        //zoomImage=mPager.getDrawingCache();

        Drawable zoom=mPager.getBackground();

        // Load the high-resolution "zoomed-in" image.
        final ImageView expandedImageView = (ImageView) findViewById(
                R.id.expanded_image);
        expandedImageView.setImageDrawable(zoom);

        // Calculate the starting and ending bounds for the zoomed-in image.
        // This step involves lots of math. Yay, math.
        final Rect startBounds = new Rect();
        final Rect finalBounds = new Rect();
        final Point globalOffset = new Point();

        // The start bounds are the global visible rectangle of the thumbnail,
        // and the final bounds are the global visible rectangle of the container
        // view. Also set the container view's offset as the origin for the
        // bounds, since that's the origin for the positioning animation
        // properties (X, Y).
        thumbView.getGlobalVisibleRect(startBounds);
        findViewById(R.id.container)
                .getGlobalVisibleRect(finalBounds, globalOffset);
        startBounds.offset(-globalOffset.x, -globalOffset.y);
        finalBounds.offset(-globalOffset.x, -globalOffset.y);

        // Adjust the start bounds to be the same aspect ratio as the final
        // bounds using the "center crop" technique. This prevents undesirable
        // stretching during the animation. Also calculate the start scaling
        // factor (the end scaling factor is always 1.0).
        float startScale;
        if ((float) finalBounds.width() / finalBounds.height()
                > (float) startBounds.width() / startBounds.height()) {
            // Extend start bounds horizontally
            startScale = (float) startBounds.height() / finalBounds.height();
            float startWidth = startScale * finalBounds.width();
            float deltaWidth = (startWidth - startBounds.width()) / 2;
            startBounds.left -= deltaWidth;
            startBounds.right += deltaWidth;
        } else {
            // Extend start bounds vertically
            startScale = (float) startBounds.width() / finalBounds.width();
            float startHeight = startScale * finalBounds.height();
            float deltaHeight = (startHeight - startBounds.height()) / 2;
            startBounds.top -= deltaHeight;
            startBounds.bottom += deltaHeight;
        }

        // Hide the thumbnail and show the zoomed-in view. When the animation
        // begins, it will position the zoomed-in view in the place of the
        // thumbnail.
        thumbView.setAlpha(0f);
        expandedImageView.setVisibility(View.VISIBLE);

        // Set the pivot point for SCALE_X and SCALE_Y transformations
        // to the top-left corner of the zoomed-in view (the default
        // is the center of the view).
        expandedImageView.setPivotX(0f);
        expandedImageView.setPivotY(0f);

        // Construct and run the parallel animation of the four translation and
        // scale properties (X, Y, SCALE_X, and SCALE_Y).
        AnimatorSet set = new AnimatorSet();
        set
                .play(ObjectAnimator.ofFloat(expandedImageView, View.X,
                        startBounds.left, finalBounds.left))
                .with(ObjectAnimator.ofFloat(expandedImageView, View.Y,
                        startBounds.top, finalBounds.top))
                .with(ObjectAnimator.ofFloat(expandedImageView, View.SCALE_X,
                        startScale, 1f)).with(ObjectAnimator.ofFloat(expandedImageView,
                View.SCALE_Y, startScale, 1f));
        set.setDuration(mShortAnimationDuration);
        set.setInterpolator(new DecelerateInterpolator());
        set.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                mCurrentAnimator = null;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                mCurrentAnimator = null;
            }
        });
        set.start();
        mCurrentAnimator = set;

        // Upon clicking the zoomed-in image, it should zoom back down
        // to the original bounds and show the thumbnail instead of
        // the expanded image.
        final float startScaleFinal = startScale;
        expandedImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (mCurrentAnimator != null) {
                    mCurrentAnimator.cancel();
                }

                // Animate the four positioning/sizing properties in parallel,
                // back to their original values.
                AnimatorSet set = new AnimatorSet();
                set.play(ObjectAnimator
                        .ofFloat(expandedImageView, View.X, startBounds.left))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.Y, startBounds.top))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.SCALE_X, startScaleFinal))
                        .with(ObjectAnimator
                                .ofFloat(expandedImageView,
                                        View.SCALE_Y, startScaleFinal));
                set.setDuration(mShortAnimationDuration);
                set.setInterpolator(new DecelerateInterpolator());
                set.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        thumbView.setAlpha(1f);
                        expandedImageView.setVisibility(View.GONE);
                        mCurrentAnimator = null;
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {
                        thumbView.setAlpha(1f);
                        expandedImageView.setVisibility(View.GONE);
                        mCurrentAnimator = null;
                    }
                });
                set.start();
                mCurrentAnimator = set;
            }
        });
    }


}

mentre questo è l'xml che uso:
Codice (XML): [Seleziona]
<?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:id="@+id/container">

    <android.support.v4.view.ViewPager
       android:layout_width="match_parent"
       android:layout_height="260dp"
       android:id="@+id/Pic"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_marginLeft="15dp"
       android:layout_marginRight="15dp"
       android:layout_marginTop="15dp"
       android:layout_marginBottom="5dp"/>

    <TextView
       android:layout_width="150dp"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceMedium"
       android:id="@+id/Nome"
       android:layout_below="@+id/Pic"
       android:layout_alignLeft="@+id/Pic"
       android:layout_alignStart="@+id/Pic"
       android:text="nome" />

    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceSmall"
       android:id="@+id/Prezzo"
       android:layout_below="@+id/Nome"
       android:layout_alignLeft="@+id/Nome"
       android:layout_alignStart="@+id/Nome"
       android:layout_alignRight="@+id/Nome"
       android:layout_alignEnd="@+id/Nome"
       android:text="prezzo" />

    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceSmall"
       android:id="@+id/PrezzoTrue"
       android:layout_below="@+id/Prezzo"
       android:layout_alignLeft="@+id/Nome"
       android:layout_alignStart="@+id/Nome"
       android:layout_alignRight="@+id/Nome"
       android:layout_alignEnd="@+id/Nome"
       android:text="prezzo o" />

    <TextView
       android:layout_width="60dp"
       android:layout_height="wrap_content"
       android:textAppearance="?android:attr/textAppearanceSmall"
       android:id="@+id/Quantity"
       android:text="numeri"
       android:layout_above="@+id/Prezzo"
       android:layout_alignRight="@+id/Pic"
       android:layout_alignEnd="@+id/Pic" />

    <ImageView
       android:id="@+id/expanded_image"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:visibility="invisible" />

    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/imageView2"
       android:layout_marginBottom="17dp"
       android:background="@android:drawable/ic_menu_call"
       android:layout_alignParentBottom="true"
       android:layout_alignLeft="@+id/scrollView"
       android:layout_alignStart="@+id/scrollView" />

    <ScrollView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/scrollView"
       android:layout_above="@+id/imageView2"
       android:layout_alignRight="@+id/Pic"
       android:layout_alignEnd="@+id/Pic"
       android:layout_marginBottom="5dp"
       android:layout_alignLeft="@+id/Prezzo"
       android:layout_alignStart="@+id/Prezzo"
       android:layout_below="@+id/PrezzoTrue">

        <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textAppearance="?android:attr/textAppearanceMedium"
           android:id="@+id/Description"
           android:text="descrizione" />
    </ScrollView>

    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/imageView3"
       android:layout_alignTop="@+id/imageView2"
       android:layout_centerHorizontal="true"
       android:background="@android:drawable/ic_menu_mapmode" />

    <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/imageView4"
       android:layout_alignTop="@+id/imageView3"
       android:layout_alignRight="@+id/Quantity"
       android:layout_alignEnd="@+id/Quantity"
       android:background="@android:drawable/btn_star_big_on" />

</RelativeLayout>

avete suggerimenti?
grazie mille in anticipo!