如何在点击时编程实现将ImageView全屏显示？

Question

这是我的需求。我有4张图片，它们在一个LinearLayout中，而这个LinearLayout是RelativeLayout的子级。我已经成功实现了onClickListener。也许我的问题有点不同，但一切都是相关的。

我不知道如何将图片扩展到全屏，因为这些图片在一个LinearLayout中，而这个LinearLayout又在一个RelativeLayout中，当我向您展示xml代码时，可能一切就清楚了。

我想在单击时使ImageView全屏，并能够在单击后退按钮时返回。为此，我可能需要使用onBackPressed。

这些图片在底部。

以下是xml代码：

<?xml version="1.0" encoding="utf-8"?>

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/url"
        android:fillViewport="true"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="5dp"
        android:scrollbars="none" >

        <RelativeLayout                   
            android:id="@+id/relativeLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <!-- Thumbnail Image -->

            <com.dusandimitrijevic.modification.TouchImageView
                android:id="@+id/thumbnail"
                android:layout_width="140dp"
                android:layout_height="220dp"
                android:layout_alignParentLeft="true"
                android:layout_marginRight="8dp"
                android:src="@drawable/ic_horor_filmovi_ikonica" />

            <!-- Naslov Filma -->
            <TextView
                android:id="@+id/naslov"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:textColor="#7F0000"
                android:textSize="@dimen/title_movie"
                android:layout_toRightOf="@id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail" >

            </TextView>
            <!-- Godina izdanja Filma -->
            <TextView
                android:id="@+id/releaseYear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/naslov"
                android:layout_alignStart="@+id/naslov"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_below="@+id/naslov"
                android:layout_marginTop="3dp"
                android:textColor="@color/dark_red" />

            <ImageView
                android:id="@+id/rating_star"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/thumbnail"
                android:layout_marginBottom="42dp"
                android:layout_toRightOf="@+id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail"
                android:src="@drawable/ic_actions_rating_icon" />

            <Button
                android:id="@+id/url_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/thumbnail"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_toRightOf="@+id/thumbnail"
                android:layout_toEndOf="@+id/thumbnail"
                style="@style/UrlDugme" />

            <TextView
                android:id="@+id/rating"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/rating_star"
                android:layout_alignTop="@+id/rating_star"
                android:layout_toRightOf="@+id/rating_star"
                android:layout_toEndOf="@+id/rating_star"
                android:gravity="center"
                android:textColor="@color/dark_red"
                android:textSize="@dimen/rating" />

            <!-- Opis Filma -->
            <RelativeLayout
                android:id="@+id/relativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/thumbnail"
                android:layout_marginTop="14dp"
                android:background="@drawable/layout_round_rect_shape" >

                <TextView
                    android:id="@+id/description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginLeft="18dp"
                    android:layout_marginTop="16dp"
                    android:scrollbars="vertical"
                    android:textColor="@color/dark_red"
                    android:textSize="18sp" />
            </RelativeLayout>
            <!-- Opis Filma Zavrsetak -->


            <!-- Glumci -->
            <RelativeLayout
                android:id="@+id/relativeLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/relativeLayout1"
                android:layout_marginTop="12dp"
                android:background="@drawable/layout_round_rect_shape"
                android:orientation="vertical" >

                <LinearLayout
                    android:id="@+id/linearLayoutActors"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image1"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image2"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />

                    <com.android.volley.toolbox.NetworkImageView
                        android:id="@+id/Image3"
                        android:layout_width="40dp"
                        android:layout_height="140dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="16dp"
                        android:layout_weight="1"
                        android:scaleType="fitCenter"
                        android:src="@drawable/ic_horor_filmovi_ikonica" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linearLayoutTextView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/linearLayoutActors"
                    android:orientation="horizontal" >

                    <TextView
                        android:id="@+id/ime1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />

                    <TextView
                        android:id="@+id/ime2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />

                    <TextView
                        android:id="@+id/ime3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:text="Ime"
                        android:textColor="#7F0000"
                        android:textSize="16sp" />
                </LinearLayout>
            </RelativeLayout>
            <!-- Glumci -->

                    <!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->
                    <LinearLayout
                        android:layout_marginTop="12dp"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentStart="true"
                        android:background="@drawable/layout_round_rect_shape"
                        android:id="@+id/linearLayoutImages"
                        android:layout_below="@+id/relativeLayout2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal" >

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image1"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>    

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image2"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image3"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                           </com.dusandimitrijevic.modification.TouchImageView>     

                            <com.dusandimitrijevic.modification.TouchImageView
                                android:id="@+id/image4"
                                android:adjustViewBounds="true"
                                android:layout_weight="1"
                                android:layout_width="115dp"
                                android:layout_height="150dp"
                                android:src="@drawable/ic_horor_filmovi_ikonica" >
                            </com.dusandimitrijevic.modification.TouchImageView>                                                    

                    </LinearLayout>
                    <!-- IMAGES I WANT TO MAKE FULLSCREEN ON CLICK -->

        </RelativeLayout>

    </ScrollView>       

</RelativeLayout>

这里是onClickListener:

image1.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 115, getResources().getDisplayMetrics());
            int px1 = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 150, getResources().getDisplayMetrics());
            LinearLayout.LayoutParams p = new LinearLayout.
                    LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            p.weight = 1;
            if(isImageFitToScreen) {
                image1.setMinimumWidth(px);
                image1.setMinimumHeight(px1);
                image1.setAdjustViewBounds(true);
                isImageFitToScreen=false;
            }else{
                image1.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
                image1.setScaleType(ImageView.ScaleType.FIT_XY);
                isImageFitToScreen=true;
            }
        }
    });

- Dusan Dimitrijevic

---

在您的根布局中创建一个没有背景（或使用“gone”可见性）的ImageView，然后在单击时将图像加载到其中，并在返回按下时再次删除它。可能更简单。 - PPartisan

Answer 1

为了提供一个替代Ben的答案并补充我的早先评论，一种可能性是在你的xml中创建一个ImageView，它占据整个屏幕，并将其可见性设置为gone。在按下按钮时，将图像加载到此ImageView中，在返回操作时再次将其可见性设置为gone。

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

    <ScrollView>
        <!-- Everything else! -->
    </ScrollView>       

    <ImageView
        android:id="@+id/full_screen_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

</RelativeLayout>

在你的 Activity 的 onCreate() 方法中：

@Override
public void onCreate(Bundle mySavedInstances) {
  ImageView fullScreenContainer = (ImageView) findViewById(R.id.full_screen_container);

  image1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //However it is you load your images
            fullScreenContainer.setImageDrawawble(R.drawable.example);
            fullScreenContainer.setVisibility(View.VISIBLE);
        }
  });
}

@Override
public void onBackPressed() {
    if (fullScreenContainer.getVisibility() == View.VISIBLE) {
        fullScreenContainer.setImageDrawable(null);
        fullScreenContainer.setVisibility(View.GONE);
    } else {
        super.onBackPressed();
    }
}

- PPartisan

---

这个 onBackPressed 方法应该放在 OnClickListener 内部吗？ - Dusan Dimitrijevic

在最后的else中确保调用super.onBackPressed()。否则正常的返回行为将无法工作。 - Bugs Happen

@BugsHappen 很好的观点。已添加到我的答案中。当然，这也取决于Dusan想要发生什么，但是需要调用super.onBackPressed()来完成Activity，就像使用返回键时通常发生的那样。 - PPartisan

如果我想让ImageView全屏，我应该将scaleType设置为FitXY吗？ - Dusan Dimitrijevic

@DusanDimitrijevic 你有检查过你的 NetworkImageView 是否响应任何点击事件吗？ - PPartisan

Answer 2

欢迎来到stackoverflow Dusan，

我有类似的经历，但我做的只是将全屏图像放入新活动中，并将图像作为字节传递并在全屏imageview中显示。只要他们按下返回键，他们就会回到之前的位置。我认为在这里尝试更改布局参数有点过度。

- Ben

---

我会尝试。你能给我一些例子吗？因为我是新手，需要一些帮助。 - Dusan Dimitrijevic

将图像作为字节传递并在第二个活动中接收。 - Dusan Dimitrijevic

不，我是从Json中传递这些图像，并且我会尽力让您更好地了解我的情况。我有一个ListView，并从Json填充该ListView。我已经在那个ListView中设置了那4张图片并将它们作为字符串传递到此活动中，我希望它们在单击时可以全屏显示。 - Dusan Dimitrijevic

是的，它们来自于互联网，我正在使用Universal Loading Image库从那里加载它们。这是加载图像的方法。imageLoader.displayImage(prosledjenaSlika1, image1, options); imageLoader.displayImage(prosledjenaSlika2, image2, options); imageLoader.displayImage(prosledjenaSlika3, image3, options); imageLoader.displayImage(prosledjenaSlika4, image4, options); - Dusan Dimitrijevic

prosledjenaSlika1 是我从 ListView 传递的字符串，image1 是 ImageView。 - Dusan Dimitrijevic

Answer 3

创建新的Activity或Fragment并在新的Activity或Fragment中将图像设置为ImageView。在这里使用Fragment是更好的方法，因为用户可以连续点击多个图像。创建或销毁Fragment的成本较低。

可以通过将图像转换为字节数组来将图像传递给另一个Activity。更好的方法是将图像保存在服务器或数据库（如Firebase等），并在应用程序中使用生成的URL。这样比传递字节数组更容易在Activity或Fragment之间传递URL。

- Abdul Muqeet