如何点击图片并使其像WhatsApp消息一样扩展到全屏?

时间:2017-12-02 18:46:35

标签: android android-layout

如果您点击WhatsApp中的图片信息,它将展开并占据整个屏幕。我还没有弄清楚如何做到这一点,并且到目前为止依赖于打开一个占据全屏以显示图像的Dialog。虽然在WhatsApp中图片扩展到全屏,但它并不像那些光滑。

这是我目前为AlertDialog提供的代码。

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Item item1 = new Item("Message 1");
        Item item2 = new Item("Message 2");
        Item item3 = new Item("Message 3");
        Item item4 = new Item("Message 4");
        ArrayList<Item> itemsArrayList = new ArrayList<>(); // calls function to get items list
        itemsArrayList.add(item1);
        itemsArrayList.add(item2);
        itemsArrayList.add(item3);
        itemsArrayList.add(item4);

        CustomAdapter adapter = new CustomAdapter(this, itemsArrayList);

        final ListView lv  = (ListView) findViewById(R.id.listView);
        lv.setAdapter(adapter);
    }
}

CustomAdapter.java

import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

class CustomAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<Item> items;

    public CustomAdapter(Context context, ArrayList<Item> items) {
        this.context = context;
        this.items = items;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(context).
                    inflate(R.layout.list_view_row, parent, false);
        }

        Item currentItem = (Item) getItem(position);

        TextView textViewItemName = (TextView)
                convertView.findViewById(R.id.textView1);
        final ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView1);

        textViewItemName.setText(currentItem.getText());

        if (position == 0) {
            imageView.setImageResource(R.drawable.a);
        } else{
            imageView.setImageResource(R.drawable.anime);
        }


        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Dialog mSplashDialog = new Dialog(CustomAdapter.this.context);
                mSplashDialog.setContentView(R.layout.zoom_layout);
                ImageView imageView = (ImageView) mSplashDialog.findViewById(R.id.imageViewZoom);
                imageView.setImageDrawable(imageView.getDrawable());

                mSplashDialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
                mSplashDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
                mSplashDialog.show();
            }
        });
        return convertView;
    }
}

有人能指出我如何做到这一点的资源或提供一些示例代码让我开始吗?

我已尝试在How to Zoom in/Out an ImageView(not using Canvas) in android实施解决方案,但ImageView已经缩放,并且不会对点击做出响应。此外,我的默认图像尺寸大于屏幕,因此它被切断了。

2 个答案:

答案 0 :(得分:0)

您可以使用PhotoView库放大/缩小:

1)在下面添加到您的模块gradle:

compile 'com.commit451:PhotoView:1.2.4'

2)

PhotoViewAttacher photoAttacher;
photoAttacher = new PhotoViewAttacher(My_Image);
photoAttacher.update();

如果您需要全屏缩放,则可以使用:

说明:setScaleType属性可用于调整图像大小以匹配ImageView的大小。

myImageView = (ImageView) findViewById(R.id.my_img);

        myImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isImageFullScreen) {
                    isImageFullScreen=false;
                    myImageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
                    myImageView.setAdjustViewBounds(true);
                }else{
                    isImageFullScreen=true;
                    myImageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
                    myImageView.setScaleType(ImageView.ScaleType.FIT_XY);
                }
            }
        });

答案 1 :(得分:0)

我认为您可以为全屏图像设置活动,并编码转换动画,以便获得所需的效果。 查看此链接,因为它可能会有所帮助。 Android - How to create a transition from an item in listview to a whole activity?