android: 從網絡加載 svg 文件並在圖像視圖中顯示

Question

我想從網絡加載一個 svg 文件並在 ImageView 中顯示這個文件。 對於非矢量圖像，我使用Picasso庫。

是否也可以將此庫用於 svg 文件？
有沒有辦法從網絡加載 svg 文件並在 ImageView 中顯示它？
我使用svg-android庫來顯示 svg 文件，但我不知道如何從網絡獲取 svg 圖像，該庫的所有示例都使用本地文件。

Answer 1

更新：對於較新的版本，請查看 Glide 示例（ https://github.com/bumptech/glide/tree/master/samples/svg ）

——

您可以使用 Glide ( https://github.com/bumptech/glide/tree/v3.6.0 ) 和 AndroidSVG ( https://bitbucket.org/paullebeau/androidsvg )。

還有一個來自 Glide 的示例： https : //github.com/bumptech/glide/tree/v3.6.0/samples/svg/src/main/java/com/bumptech/svgsample/app

設置 GenericRequestBuilder

requestBuilder = Glide.with(mActivity)
    .using(Glide.buildStreamModelLoader(Uri.class, mActivity), InputStream.class)
            .from(Uri.class)
            .as(SVG.class)
            .transcode(new SvgDrawableTranscoder(), PictureDrawable.class)
            .sourceEncoder(new StreamEncoder())
            .cacheDecoder(new FileToStreamDecoder<SVG>(new SvgDecoder()))
            .decoder(new SvgDecoder())
                    .placeholder(R.drawable.ic_facebook)
                    .error(R.drawable.ic_web)
            .animate(android.R.anim.fade_in)
            .listener(new SvgSoftwareLayerSetter<Uri>());

使用帶有 uri 的 RequestBuilder

Uri uri = Uri.parse("https://de.wikipedia.org/wiki/Scalable_Vector_Graphics#/media/File:SVG_logo.svg");
            requestBuilder
                    .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                            // SVG cannot be serialized so it's not worth to cache it
                    .load(uri)
                    .into(mImageView);

Answer 2

請參閱在 android 中使用矢量圖像在真實設備上出現問題。 SVG-android

在用戶帖子中，他提出了類似的問題並建議他使用：

在你的布局文件中為 ImageView 創建一個成員變量；

private ImageView mImageView;

// intialize in onCreate(Bundle savedInstanceState)
mImageView = (ImageView) findViewById(R.id.image_view);

下載圖片

private class HttpImageRequestTask extends AsyncTask<Void, Void, Drawable> {
    @Override
    protected Drawable doInBackground(Void... params) {
        try {


            final URL url = new URL("http://upload.wikimedia.org/wikipedia/commons/e/e8/Svg_example3.svg");
            HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
            InputStream inputStream = urlConnection.getInputStream();
            SVG svg = SVGParser. getSVGFromInputStream(inputStream);
            Drawable drawable = svg.createPictureDrawable();
            return drawable;
        } catch (Exception e) {
            Log.e("MainActivity", e.getMessage(), e);
        }

        return null;
    }

    @Override
    protected void onPostExecute(Drawable drawable) {
        // Update the view
        updateImageView(drawable);
    }
}

然后將 drawable 應用到 Imageview

@SuppressLint("NewApi")
private void updateImageView(Drawable drawable){
    if(drawable != null){

        // Try using your library and adding this layer type before switching your SVG parsing
        mImageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mImageView.setImageDrawable(drawable);
    }
}

SVGParser 可在https://github.com/pents90/svg-android 獲得

Answer 3

使用這個Glide based library加載 xml

添加依賴

  compile 'com.github.ar-android:AndroidSvgLoader:1.0.0'

對於最新的 android 依賴 Gradle，請改用它

implementation 'com.github.ar-android:AndroidSvgLoader:1.0.0'

主文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/ivimage"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

主活動.java

public class MainActivity extends AppCompatActivity {

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

        ImageView image = (ImageView) findViewById(R.id.ivimage);

        SvgLoader.pluck()
                .with(this)
                .setPlaceHolder(R.mipmap.ic_launcher, R.mipmap.ic_launcher)
                .load("http://www.clker.com/cliparts/u/Z/2/b/a/6/android-toy-h.svg", image);

    }

    @Override protected void onDestroy() {
        super.onDestroy();
        SvgLoader.pluck().close();
    }
}

Answer 4

Kotlin 和 Coil 庫從 URL 加載 SVG：

1. 在 build.gradle 中添加 Kotlin 圖片加載庫（模塊：app）（也支持其他圖片）：

    implementation("io.coil-kt:coil:0.11.0") implementation("io.coil-kt:coil-svg:0.11.0")

2. 將以下擴展函數添加到項目的任何 Kotlin 文件中，（在類之外而不是類內）：

在這里，我在 xml 中使用了 AppCompatImageView，如果您只使用 ImageView，請從下面的函數中將 AppCompatImageView 替換為 ImageView。

fun AppCompatImageView.loadSvgOrOthers(myUrl: String?) {
    myUrl?.let {
        if (it.toLowerCase(Locale.ENGLISH).endsWith("svg")) {
            val imageLoader = ImageLoader.Builder(this.context)
                .componentRegistry {
                    add(SvgDecoder(this@loadSvgOrOthers.context))
                }
                .build()
            val request = LoadRequest.Builder(this.context)
                .data(it)
                .target(this)
                .build()
            imageLoader.execute(request)
        } else {
            this.load(myUrl)
        }
    }
}

3. 現在使用如下：

    myAppCompatImageView.loadSvgOrOthers("https[:]//example[.]com/image.svg")

希望這會有所幫助，誰想使用 Kotlin 加載任何圖像。

Answer 5

希望下面的代碼對你有用。

1. 在build.gradle 中添加此依賴項

   implementation 'com.github.corouteam:GlideToVectorYou:v2.0.0'

2. 現在開始在MainActivity.java 中工作

   ImageView image = (ImageView) findViewById(R.id.ivimage);

   String url= https://your_url/banking.svg GlideToVectorYou.init().with(this).load(Uri.parse(url),image);

Answer 6

使用 Glide V4 或更高版本加載 SVG

在 app.gradle > dependencies 添加依賴

implementation 'com.github.qoqa:glide-svg:2.0.4'
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

創建新類 SampleAppGlideModule.java 並轉到 Build>Make Project(ctrl+f9)

import android.content.Context;
import android.util.Log;

import androidx.annotation.NonNull;

import com.bumptech.glide.GlideBuilder;
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public class SampleAppGlideModule extends AppGlideModule {



    @Override
    public boolean isManifestParsingEnabled() {
        return super.isManifestParsingEnabled();
    }

    @Override
    public void applyOptions(@NonNull Context context, @NonNull GlideBuilder builder) {
        super.applyOptions(context, builder);
        builder.setLogLevel(Log.DEBUG);
    }
}

使用 Glide V4 或更高版本加載 SVG

GlideApp.with(this)                      
.load(contentLangModels.get(i).getContentImage()).into(contentLangBinding.ivExtra);

Answer 7

你可以使用這個庫

https://github.com/2coffees1team/GlideToVectorYou

正如他所說：“該庫基於 Glide，並提供相同的功能 + svg 支持”。

Answer 8

您可以使用線圈圖像加載庫，

將以下依賴項添加到您的應用程序級 build.gradle 文件中，

def coilVersion = '1.2.2'
implementation "io.coil-kt:coil:$coilVersion"
implementation "io.coil-kt:coil-svg:$coilVersion"

現在創建這個方法，

fun ImageView.loadImageFromUrl(imageUrl: String) {
val imageLoader = ImageLoader.Builder(this.context)
    .componentRegistry { add(SvgDecoder(this@loadImageFromUrl.context)) 
}
    .build()

val imageRequest = ImageRequest.Builder(this.context)
    .crossfade(true)
    .crossfade(300)
    .data(imageUrl)
    .target(
        onStart = {
            //set up an image loader or whatever you need
        },
        onSuccess = { result ->
            val bitmap = (result as BitmapDrawable).bitmap
            this.setImageBitmap(bitmap)
            //dismiss the loader if any
        },
        onError = {
            /**
             * TODO: set an error drawable
             */
        }
    )
    .build()

imageLoader.enqueue(imageRequest)

}

現在你可以從你的 ImageView 調用這個擴展函數，

imgView.loadImage(imageUrl)

這將適用於 svgs、pngs。 我還沒有嘗試過使用 jpg，但也應該與它們一起使用。