web-dev-qa-db-ja.com

Android Image Dialog / Popup

Androidアプリケーションで画像のポップアップ/カムアップのみを行うことは可能ですか？AlertDialogの通常のビューをオーバーライドして画像のみを含むようにすることと似ています。

解決策：@ blessenmの助けのおかげで答えを見つけることができました。アクティビティをダイアログとしてマスクするのが理想的な方法のようです。以下は私が使用したコードです。このダイアログ形式のアクティビティは、新しいアクティビティを開始するのと同じ方法で、アプリケーションの必要に応じて呼び出すことができます

ImageDialog.Java

public class ImageDialog extends Activity {

    private ImageView mDialog;


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



        mDialog = (ImageView)findViewById(R.id.your_image);
        mDialog.setClickable(true);


        //finish the activity (dismiss the image dialog) if the user clicks 
        //anywhere on the image
        mDialog.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
        });

    }
}

your_dialog_layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/image_dialog_root" 
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@Android:color/transparent"
    Android:gravity = "center">

    <ImageView
        Android:id="@+id/your_image"  
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:src = "@drawable/your_image_drawable"/>

</FrameLayout>

これを達成するには、アクティビティに次のスタイルを設定することが重要です：

styles.xml

  <style name="myDialogTheme" parent="@Android:style/Theme.Dialog">
    <item name="Android:windowNoTitle">true</item>
    <item name="Android:windowFrame">@null</item>
    <item name="Android:background">@Android:color/transparent</item>
    <item name="Android:windowBackground">@Android:color/transparent</item>
    <item name="Android:windowIsFloating">true</item>
    <item name="Android:backgroundDimEnabled">false</item>
    <item name="Android:windowContentOverlay">@null</item>
   </style>

最後のステップは、マニフェストのアクティビティに対してこのスタイルを次のように宣言することです：

 <activity Android:name=".ImageDialog" Android:theme="@style/myDialogTheme" />
androiddialogandroid-imageviewandroid-alertdialog
47
Abhijit

通常のダイアログを使用したい場合は、このようなものが機能するはずです

Dialog settingsDialog = new Dialog(this);
settingsDialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
settingsDialog.setContentView(getLayoutInflater().inflate(R.layout.image_layout
        , null));
settingsDialog.show();

image_layout.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content" Android:layout_height="wrap_content"
    Android:orientation="vertical">
    <ImageView Android:layout_width="wrap_content" 
        Android:layout_height="wrap_content" Android:src="YOUR IMAGE"/>
    <Button Android:layout_width="wrap_content" Android:layout_height="wrap_content"
        Android:text="OK" Android:onClick="dismissListener"/>
</LinearLayout>
41
blessenm

XMLなし：

public void showImage() {
    Dialog builder = new Dialog(this);
    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);
    imageView.setImageURI(imageUri);
    builder.addContentView(imageView, new RelativeLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, 
            ViewGroup.LayoutParams.MATCH_PARENT));
    builder.show();
}
58
Oded Breiner

より柔軟で推奨される方法は、DialogFragmentを使用することです。 3.0より前のバージョンをサポートする場合は、互換性ライブラリを使用できます

1
jperera

Dialogを使用しなくても、このライブラリを使用して非常に簡単に画像をポップアップできます。

https://github.com/chathuralakmal/AndroidImagePopup

1
Im Batman

これを行うにはいくつかの方法があります。ただし、既存のアクティビティの上に画像が浮いているように見せたい場合は、マニフェストで定義されているAndroid：theme = "@ style/Theme.Transparent"でアクティビティを使用できます。次に、画面の中央に単一のImageViewを配置するようにレイアウトを設計します。ユーザーはこれから抜け出すために戻るボタンを押す必要がありますが、それはあなたが望むもののように聞こえます。

実際のダイアログのように見せたい場合は、Theme.Dialogを使用して、常にダイアログスタイルのアクティビティを使用することもできます。または、ダイアログを使用してカスタマイズすることもできます。

1
SBerg413

Kotlinでダイアログフラグメントを作成することで簡単に実行できます。

BigImageDialog.kt

    class BigImageDialog():DialogFragment() {
    private var imageUrl = ""
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            imageUrl = arguments.getString("url")
        }
    }
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?): View {
        val v = inflater!!.inflate(R.layout.dialog_big_image, container, false)
        this.dialog.window.requestFeature(Window.FEATURE_NO_TITLE)
        Picasso.get().load(imageUrl).into(v.bigImageView)
        return v
    }

    override fun onStart() {
        super.onStart()

        val dialog = dialog
        if (dialog != null) {
            dialog.window.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
        }
    }

    companion object {
        @JvmStatic
        fun newInstance(imageUrl: String) =
                BigImageDialog().apply {
                    arguments = Bundle().apply {
                        putString("url", imageUrl)
                    }
                }
    }
}

dialog_big_image.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout 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">

    <ImageView
        Android:id="@+id/bigImageView"
        Android:layout_width="0dp"
        Android:layout_height="0dp"
        Android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>

オープニングダイアログ：

"smallImageView".setOnClickListener { BigImageDialog.newInstance("image url").show(fragmentManager,"") }
1
Bayar Şahintekin

以下を試してください：
画像zoom_in/zoom_outもあります。

ステップ1：
追加compile 'com.github.chrisbanes.photoview:library:1.2.4'あなたのbuild.gradle
ステップ2：
次のxmlを追加します

custom_fullimage_dialoge.xml

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
              Android:id="@+id/layout_root" Android:orientation="horizontal"
              Android:layout_width="fill_parent" Android:layout_height="fill_parent"
              Android:padding="10dp">
    <ImageView Android:id="@+id/fullimage" Android:layout_width="fill_parent"
               Android:layout_height="fill_parent">
    </ImageView>

    <TextView Android:id="@+id/custom_fullimage_placename"
              Android:layout_width="wrap_content" Android:layout_height="fill_parent"
              Android:textColor="#FFF">
    </TextView>
</LinearLayout>

ステップ3：

private void loadPhoto(ImageView imageView, int width, int height) {

    final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Android.graphics.Color.TRANSPARENT));
    //dialog.setContentView(R.layout.custom_fullimage_dialog);
    LayoutInflater inflater = (LayoutInflater) this.getSystemService(LAYOUT_INFLATER_SERVICE);
    View layout = inflater.inflate(R.layout.custom_fullimage_dialog,
            (ViewGroup) findViewById(R.id.layout_root));
    ImageView image = (ImageView) layout.findViewById(R.id.fullimage);
    image.setImageDrawable(imageView.getDrawable());
    image.getLayoutParams().height = height;
    image.getLayoutParams().width = width;
    mAttacher = new PhotoViewAttacher(image);
    image.requestLayout();
    dialog.setContentView(layout);
    dialog.show();

}

ステップ4：

user_Image.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Display display = getWindowManager().getDefaultDisplay();
        int width = display.getWidth();
        int height = display.getHeight();
        loadPhoto(user_Image,width,height);
    }
});
1
Vakas