使用网络图片地址实现放大显示图片

功能:主要实现点击被加载的网络图片后,有放大动画效果,并全屏看网络图片,按返回键或点击图片则关闭查看界面。

使用环境:Android Studio 3.0及以上,在模块build.gradle的dependencies加入以下Glide库依赖:

implementation 'com.github.bumptech.glide:glide:3.8.0'
implementation 'jp.wasabeef:glide-transformations:2.0.1'

涉及文件:加载动画对应布局,dialog_imageloading.xml;图片查看界面对应布局,activity_image_enlarged.xml;图片查看界面,ImageEnlargedActivity.java;自定义加载动画,ImageLoadingDialog.java;加载动画对话框使用的主题文件:styles.xml。

具体代码:

activity_image_enlarged.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.lingtoo.coachpad.activity.ImageEnlargedActivity">

    <ImageView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:transitionName="image"
        android:keepScreenOn="true" />
</FrameLayout>

 dialog_imageloading.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent"
    android:gravity="center"
    android:orientation="vertical" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:background="@android:color/transparent" />

</LinearLayout>

ImageEnlargedActivity.java

// import ...

/**
 * An example full-screen activity that shows and hides the system UI (i.e.
 * status bar and navigation/system bar) with user interaction.
 */
public class ImageEnlargedActivity extends AppCompatActivity {
    private ImageView fullscreen_content;
    ImageLoadingDialog dialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_enlarged);
        setStatusBar();
        dialog = new ImageLoadingDialog(this);
        dialog.setCanceledOnTouchOutside(false);
        dialog.show();
        String imageUrl = getIntent().getStringExtra("imageUrl");
        fullscreen_content = (ImageView) findViewById(R.id.fullscreen_content);


        Glide.with(this)
                .load(imageUrl)
//                .placeholder(R.drawable.loading) //占位符 也就是加载中的图片,可放个gif
//                .error(R.drawable.failed)
                .crossFade()
                .into(new GlideDrawableImageViewTarget(fullscreen_content) {
                          @Override
                          public void onResourceReady(GlideDrawable drawable, GlideAnimation anim) {
                              super.onResourceReady(drawable, anim);
                              //在这里添加一些图片加载完成的操作
                              dialog.dismiss();
                          }});

//        Log.d("-----",Const.BASIC_IMAGE_URL+imageUrl);
        fullscreen_content.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }
}

ImageLoadingDialog.java

// import ...

public class ImageLoadingDialog extends Dialog {

	public ImageLoadingDialog(Context context) {
		super(context, R.style.ImageloadingDialogStyle);
	}

	private ImageLoadingDialog(Context context, int theme) {
		super(context, theme);
	}

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

}

styles.xml

<resources>
    <style name="ImageloadingDialogStyle" parent="android:Theme.Dialog">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowContentOverlay">@null</item><!--对话框是否有遮盖 -->
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:backgroundDimEnabled">true</item>
    </style>
</resources>

调用方法:点击图片后,执行以下函数。

// imgView 对应的是当前页面显示图片的Imageview, rawPath为图片网络地址    
public void enLargeImage(final ImageView imgView, final String rawPath) {
        Intent intent = new Intent(this, ImageEnlargedActivity.class);
        intent.putExtra("imageUrl", rawPath);// rawPath为网络图片地址
        //与xml文件对应
        //image名称与加载图片界面xml文件对应
        ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imgView, "image");
        ActivityCompat.startActivity(this, intent, options.toBundle());
    }

猜你喜欢

转载自blog.csdn.net/zzhceo/article/details/83345433