Android： `onClick`イベントのキャプション付きフルスクリーンで画像を表示

Question

私はアンドロイド開発の初心者です。私はピカソ2.5.2ライブラリを使用してWeb画像をインポートするアンドロイド画像ビューを持っています。それは働いている。その画像ビューをクリックした後、その画像で全画面のAndroidダイアログを作成したいと思います。私はそれに次のコードを使用しました。しかし、イメージビューをクリックすると、ダイアログがフルスクリーンなしで表示されます。最後に、フルスクリーンのダイアログをズームインしてズームアウトしたいと思います。私は画像ビューonClickListenerでフルスクリーンのこの種のが欲しい。また、ここでは

下の画像にタイトルを持っており、私も（Facebookの中のような）画像のキャプションが必要かを確認することは私のコードは

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

セットの画像作物を中央にレイアウトするためのXML以下

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

使用のようなあなたの画面サイズにサイズを変更するために、私はちょうど小さなimage_viewのクリックで視認性が見えるように使用するものよりImageViewの追加

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

Answer 3

Chrisbane's PhotoView libを使用して画像を拡大することができます。

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); 
} 

コンプリート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); 
    } 
} 

アクティビティ（詳細）レイアウト、私の例では

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

、パスを送信することにより、詳細ページを開き、私はGlideを使用していないPicaso、あなたはそれを変更することができますしたい場合はAndroidの 公式勧告は、Glideですので。