Android: Anzeigen von Bildern im Vollbild mit der Beschriftung auf "onClick" Ereignis

Question

Ich bin ein Anfänger für die Android-Entwicklung. Ich habe eine Android-Bildansicht, die Web-Bild importieren, indem Sie Picasso 2.5.2-Bibliothek verwenden. Es funktioniert. Nach dem Klicken auf diese Bildansicht möchte ich einen Android-Dialog im Vollbildmodus mit diesem Bild erstellen. Ich habe folgenden Code dafür benutzt. Nach einem Klick auf die Bildansicht wird jedoch ein Dialog ohne Vollbild angezeigt. Schließlich möchte ich den Vollbilddialog vergrößern und verkleinern. Ich möchte diese Art von Vollbild auf Bildansicht onClickListener. Auch sehen, wie das Bild unten einen Titel hat, und ich brauche auch die Bildunterschrift (wie in Facebook)

Hier ist mein Code

Mainactivity.java

import android.app.Dialog; 
import android.content.Context; 
import android.content.DialogInterface; 
import android.graphics.Bitmap; 
import android.graphics.drawable.ColorDrawable; 
import android.graphics.drawable.Drawable; 
import android.net.Uri; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.widget.ImageView; 
import android.widget.RelativeLayout; 

import com.squareup.picasso.Picasso; 

public class MainActivity extends AppCompatActivity { 

    ImageView imageView1; 
    Context context; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     initUi(); 
    } 

    public void initUi(){ 
     imageView1 = (ImageView)findViewById(R.id.image); 
     Picasso.with(this) 
       .load(Uri.parse("http://p.qpic.cn/videoyun/0/2449_43b6f696980311e59ed467f22794e792_1/640")) 
       .into(imageView1); 
     imageView1.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       showImage(); 
      } 
     }); 
    } 

    public void showImage() { 
     Dialog builder = new Dialog(this, android.R.style.Theme_Light); 
     builder.requestWindowFeature(Window.FEATURE_NO_TITLE); 
     builder.getWindow().setBackgroundDrawable(
       new ColorDrawable(android.graphics.Color.TRANSPARENT)); 
     builder.setOnDismissListener(new DialogInterface.OnDismissListener() { 
      @Override 
      public void onDismiss(DialogInterface dialogInterface) { 
       //nothing; 
      } 
     }); 

     ImageView imageView = new ImageView(this); 
     Picasso.with(this) 
       .load(Uri.parse("http://p.qpic.cn/videoyun/0/2449_43b6f696980311e59ed467f22794e792_1/640")) 
       .into(imageView); 
     builder.addContentView(imageView, new RelativeLayout.LayoutParams(
       ViewGroup.LayoutParams.WRAP_CONTENT, 
       ViewGroup.LayoutParams.WRAP_CONTENT)); 
     builder.show(); 
    } 
} 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_add_info_other" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    android:orientation="vertical"> 

    <ScrollView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <TextView 
       android:text="Image buttons" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:textColor="@android:color/black" 
       android:textSize="16sp"/> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/image"/> 


     </LinearLayout> 

    </ScrollView> 

</LinearLayout> 

Answer 1

Set Bild Ernte zu zentrieren und mit Ihrer Bildschirmgröße wie

Picasso.with(MainActivity.this) 
      .load(Uri.parse("http://p.qpic.cn/videoyun/0/2449_43b6f696980311e59ed467f22794e792_1/640")) 
      .noFade() 
      .resize(800, 800) 
      .centerCrop() 
      .into(imageView); 

Answer 2

Verwendung unter xml für Layout Größe ändern, hinzugefügt ich noch einen Image verwendet nur die Sicht auf Klick kleinen image_view

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_add_info_other" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    android:orientation="vertical"> 

    <ScrollView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <TextView 
       android:text="Image buttons" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="5dp" 
       android:textColor="@android:color/black" 
       android:textSize="16sp"/> 

      <ImageView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:id="@+id/image"/> 


     </LinearLayout> 

    </ScrollView> 
    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
    /> 

</RelativeLayout> 

sichtbar machen

Answer 3

Sie können Chrisbane's PhotoView lib zum Zoomen des Bildes verwenden.

Öffnen Sie die Detailseite, indem Sie den Pfad zu senden,

public void showImage() { 
    Intent intent = new Intent(this, ImageDeatilActvity.class); 

    intent.putExtra("path", "http://p.qpic.cn/videoyun/0/2449_43b6f696980311e59ed467f22794e792_1/640"); 

    startActivity(intent); 
} 

komplette ImageDeatilActvity.java

public class ImageDeatilActvity extends AppCompatActivity implements View.OnSystemUiVisibilityChangeListener { 

    private boolean mIsFullScreen; 

    private Toolbar mToolbar; 

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

     setContentView(R.layout.activity_image_deatil_actvity); 

     mToolbar = (Toolbar) findViewById(R.id.toolbar); 

     if (mToolbar != null) { 
      setSupportActionBar(mToolbar); 
     } 

     getSupportActionBar().setDisplayHomeAsUpEnabled(true); 

     final Drawable upArrow = ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_material); 

     upArrow.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP); 
     getSupportActionBar().setHomeAsUpIndicator(upArrow); 

     mIsFullScreen = true; 

     String path = getIntent().getStringExtra("path"); 

     PhotoView photoView = (PhotoView) findViewById(R.id.photo_view); 

     photoView.setOnPhotoTapListener(new PhotoViewAttacher.OnPhotoTapListener() { 
      @Override 
      public void onPhotoTap(View view, float x, float y) { 
       updateView(); 
      } 

      @Override 
      public void onOutsidePhotoTap() { 
       updateView(); 
      } 
     }); 

     Glide.with(this).load(path).into(photoView); 
    } 

    @Override 
    public void onSystemUiVisibilityChange(int visibility) { 
     if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) { 
      mIsFullScreen = false; 
     } 

     updateView(); 
    } 

    public void updateView() { 
     mIsFullScreen = !mIsFullScreen; 

     if (mIsFullScreen) { 
      hideSystemUI(); 
     } else { 
      showSystemUI(); 
     } 
    } 

    private void hideSystemUI() { 
     mToolbar.animate().translationY(-mToolbar.getHeight()).setInterpolator(new AccelerateInterpolator(2)).start(); 
    } 

    private void showSystemUI() { 
     mToolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(2)).start(); 
    } 

    public int getStatusBarHeight() { 
     int result = 0; 
     int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android"); 
     if (resourceId > 0) { 
      result = getResources().getDimensionPixelSize(resourceId); 
     } 
     return result; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
     switch (item.getItemId()) { 
      case android.R.id.home: 
       finish(); 
       return true; 
     } 

     return super.onOptionsItemSelected(item); 
    } 
} 

Details Aktivität Layout

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="in.muthu.stackoverflow.ImageDeatilActvity"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:layout_alignParentTop="true" 
     android:background="#33000000" 
     android:fitsSystemWindows="true" 
     app:contentScrim="@android:color/transparent" 
     app:popupTheme="@style/AppTheme.AppBarOverlay"/> 

    <uk.co.senab.photoview.PhotoView 
     android:id="@+id/photo_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

</RelativeLayout> 

In meinem Beispiel bin ich Verwenden Sie Glide nicht Picaso, weil Android offizielle Empfehlung ist Glide, Wenn Sie möchten, können Sie das ändern.