واکنون ایزی گرام 3 | ایزی گرام 3 با کلی امکانات جدید منتشر شد | کلیک کنید

کار با کتابخانه عکس اندروید Fresco ، picasso و glide

دسته‌بندی: آموزش
شهریور ۳۰, ۱۳۹۷

کار با کتابخانه عکس اندروید Fresco ، picasso و glide

در این آموزش برنامه نویسی اندروید به نحوه کار با انواع کتابخانه عکس اندروید Fresco ، picasso و glide می پردازیم.

کتابخانه عکس اندروید : Fresco

کتابخانه های عکس اندروید Fresco برای بارگذاری یا همان Load عکس در ImageView اندروید استفاده می شود این کتاب خانه در اپلیکیشن FaceBook نیز استفاده شده است و به گونه ای خود FaceBook منتشر کننده این کتاب خانه می باشد.

 

ویژگی های کتابخانه عکس اندروید Fresco :

در این کتابخانه Caching پیشرفته وجود دارد. و می توان آن را برقرار و یا لغو نمود.
در این کتابخانه عکس اندروید می توانید بر روی عکس Draw و یا کشیدن انجام دهید.
همچنین پشتیبانی از لود فایل به صورت local , سرور , drawable و content provider انجام می شود.

 

نحوه ی کار با کتابخانه عکس اندروید Fresco  :

 

نحوه ی کار با کتابخانه عکس اندروید Fresco

 

در آغاز وارد  فایل Build.gradle از نوع Module می شویم و در قسمت dependencies خط زیر را اضافه می نماییم.

 

implementation 'com.facebook.fresco:fresco:0.6.1'

 

سپس پروژه را sync می نماییم.

 

بعد از ان وارد فایل AndroidManifest.xml شده و دسترسی زیر را ایجاد می نماییم.

 

<uses-permission android:name="android.permission.INTERNET"/>

 

این دسترسی مربوط به اینترنت است.

 

پس از اینکار وارد اکتیویتی که قرار است عکس ها را لود کند رفته و کتاب خانه را initialise نمایید.

 

حواستان باشد که قبل از setContentView خط زیر را بگذارید.

 

Fresco.initialize(context);

 

سپس وارد layout شده و view زیر را بگذارید.

 

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:actualImageScaleType="focusCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:roundAsCircle="false"
fresco:roundedCornerRadius="1dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/corner_color"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/border_color" />

 

بررسی ویژگی های استفاده شده در این کد:

 

fresco:roundWithOverlayColor=”@color/blue” : مشخص کننده رنگ دایره است.

 

fresco:roundAsCircle : برای  گرد کردن استفاده می شود.

 

fresco:actualImageScaleType : تعیین کننده مقیاس نمایش عکس است.

 

fresco:placeholderImage : قبل از لود عکس ها در صورتی که  قصد داشته باشید view خالی نباشد به این شکل می توانید یک  placeholder به وجود آورید.

 

fresco:placeholderImageScaleType : این کد تعیین کننده ی مقیاس لود عکس placeholder است.

 

fresco:roundedCornerRadius=”۵dp” : در صورتی که قصد داشته باشیم عکس گرد شود اندازه را به این ویژگی بدید این اندازه میزان گردی را مشخص می کند.

 

fresco:failureImage : در صورتی که عکس لود نشود می توانید یک عکس برای آن در نظر بگیرید.

 

fresco:failureImageScaleType : تعیین مقیاس های عکس لود نشده .

 

جهت  لود نمودن عکس از اینترنت یا سرور  مثل زیر عمل نمایید:

 

Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/master/docs/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

 

جهت تنظیم  کد PlaceHolder مانند زیر انجام دهید:

 

mSimpleDraweeView.getHierarchy().setPlaceholderImage(placeholderImage);

 

اگر می خواهید با کد عکس خطا را تنظیم کنید اینگونه پیش بروید:

 

mSimpleDraweeView.getHierarchy().setFailureImage(failureImage);

 

لینک هایی که توسط این کتاب خانه پشتیبانی می شود در جدول زیر ذکر شده است.

 

نوع SCHEME متد های پشتیبانی شده
File on network http://, https:// HttpURLConnection or network layer
File on device file:// FileInputStream
Content provider content:// ContentResolver
Asset in app asset:// AssetManager
Resource in app res:// as in res:///12345 Resources.openRawResource
Data in URI data:mime/type;base64, Following data URI spec (UTF-8 only)

 

در صورتی که قصد دارید عکس Base64 را لود کنید می توانید مثل زیر عمل کنید.

 

String dataUri =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAABkCAIAAAAQQmk9AAAD2ElEQVR42u2cvW/cMAzF" +
"+T927t49c/fu3bN3zp6hQ4EbMhRIhg5BOmRIgQBN02u+2/QBAozL2WfT0pNFKRSIwPAltvwL70kkJcuztzlNHI" +
"Hzcl7Oy3k5r3Lt+OrReWnbj9u/bz7/xE/npWofv/0BL/x0XtNt/fgPsILh2HlNtE/fbzteOHZeE8719stVxwvH" +
"۱lzMFq+D87sOVjCccV4727vVry1eOOO8htvhxf0WrGA477xUzmXQxazwWl0+DMIKhk+d14v2/uvvEV741Hm9iB" +
"ZHYAUzElGKfecy5WLleYXoWmMWIvDyvEJ0rTELEbjU4lxGXExqcS4jLlaS11Z0rbHiEXhJXpupG72VTfJIRc5l" +
"wcWK8doVXWusYARejNeu6FpjBSNwqc65yrqYVOdcZV2sAC9NdK2xIhF4AV6a6FpjRSJwqdS5SrnY0rw+nKyJvH" +
"C1BnmdrZ/gCAfnd3ET+snpPq6M6+MulfFCp2F4ABjEBRY3g08x3DHcOnQjdKkkL8Qi6MHq8mGTy8JQoseHjiP6" +
"j6eIiKtkJDPVcdk/vcGd9o6uq+Ay1/BceDo8Y8dxJMsm/ZxB+mSyDQOHfi5E+l+3Vv0owu/6X1gZVKhaJCmr2A" +
"۲qm7AyxS3ZSNZbiMn15mFNzydeG7LJesr0/Cs9V1WLaXJqqvnqa0CmTEBq5/dtI9Nna2fEQ5j7Lh8PLhBvzlpc" +
"JnMzDS0hw7PMzWrMjrebQRYBKzKfg9vUHmOi/3H5ssj8V9Vh5mBgmD1fWCmyFFip+dXqkCXCIuSjcftaYib0M3" +
"۲hCid/bx8Za6Edrd5hGRlxVSKzPpSjXEYpuNmtP1oLM+nLePj1WjvIcqx5ylLf3j+9KQ4LfahmPYCFckmm1TtZ" +
"eFkIyNGHOnjN3bKRz3JsBuHzGt/5uaTl2GXK52VnFpZjZ4M0Kfb5JF+aFPt8kk/mtfn2GwtG3zlD5sVdzmtwQb" +
"C0KvaZJJ/Mi7v82eACajIva3Uj+rYZaVjsc0i+NCz2OSTf86vleLHEfu/o+vDinlWp40q+mBJ7XGEzKYpjazsl" +
"mbwSYxd8cfrajDM4nxhjWeSVIvaTldTEqjBR8mm8+q9qVKYQ9Fk9/GZc8oP40shi9VrIedy/HX81dyiwWK/VP8" +
"OWqEdX7fRDAfpmjleKqEeHE/qhwBYvjdhTlsdEDwUsyZcFxH6WqEcXpcaHApbk513PFC3q0W6+S0ZtrWfq95Ii" +
"۶sShgCX5HF75RJ04FFjhdbZ+yi3qlKGA8sIFofj/MqKeOBRQ9IHAK+ypf7bdwrsOzOXvm2/Oy3k5L+flvJyXt3" +
"۷۷Dzs5iMw8JSAYAAAAAElFTkSuQmCC";

final SimpleDraweeView simpleDraweeView =findViewById(R.id.drawee_view);
simpleDraweeView.setImageURI(dataUri, null);
;

 

وجود عکس در کش را با این کد بررسی کنید:

 

ImagePipeline imagePipeline = Fresco.getImagePipeline();
Uri uri;
boolean inMemoryCache = imagePipeline.isInBitmapMemoryCache(uri);

 

با کد زیر خالی کردن کش عکس ها را انجام دهید:

 

ImagePipeline imagePipeline = Fresco.getImagePipeline();
imagePipeline.clearMemoryCaches();
imagePipeline.clearDiskCaches();
imagePipeline.clearCaches();

 

کد زیر تعیین کننده ی کیفیت عکس نمایش به شکل کمترین و بیشترین

 

 resolution
Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setLowResImageRequest(ImageRequest.fromUri(lowResUri))
.setImageRequest(ImageRequest.fromUri(highResUri))
.setOldController(mSimpleDraweeView.getController())
.build();
mSimpleDraweeView.setController(controller);

 

کتابخانه عکس اندروید : picasso

 

همچنین ببینید :   معرفی نسخه های اندروید از آغاز تا اکنون

کتابخانه عکس اندروید : picasso

 

picasso کتابخانه ی عکس قدرتمند و محبوبی است که وظیفه دانلود ، نمایش ، کش کردن تصویر را به عهده دارد.

 

در صورتی که قصد دارید در اپلیکیشن خود عکسی از وب یا حافظه گوشی لود کنید این کتابخانه  به شما کمک خواهد کرد.

 

آدرس گیتهاب کتابخانه  picasso

 

برای استفاده از آن اول شما باید Dependency را در فایل build.gradle در اندروید استدیو خود اضافه نمایید.

 

dependencies { compile 'com.squareup.picasso:picasso:۲.۵.۲' }

dependencies {
compile 'com.squareup.picasso:picasso:2.5.2'
}

 

روش استفاده :

 

در اندروید برای به نمایش در آوردن یک تصویر به ImageView نیاز است. بنابراین یک ImageView داخل xml خود قرار میدهیم تا بتوانیم عکس مورد نظر رو داخل اون نمایش دهیم.

 

<ImageView android:id="@+id/imageView" android:layout_width="۳۰۰dp" android:layout_height="۳۰۰dp" />

<ImageView
android:id="@+id/imageView"
android:layout_width="300dp"
android:layout_height="300dp"
/>

 

اکنون باید ImageView رو درون کلاس جاوا مد نظر initi نماییم.

 

ImageView imageView = (ImageView) findViewById(R.id.imageView);

 

حال زمان به کار بردن پیکاسو رسیده است ، اگر بخواهیم عکسی را  از داخل وب به ImageView ست نماییم این گونه انجام می دهیم.

 

String myUrl=”http://mrmaterial.ir/wp-content/themes/newmrmaterial/img/mr-logo.png”; Picasso.with(getApplicationContext()) .load(myUrl) .error(R.drawable.img_error) .placeholder(R.drawable.img_place_holder) .into(imageView);

String myUrl=”http://mrmaterial.ir/wp-content/themes/newmrmaterial/img/mr-logo.png”;
Picasso.with(getApplicationContext())
.load(myUrl)
.error(R.drawable.img_error)
.placeholder(R.drawable.img_place_holder)
.into(imageView);

 

myUrl : رشته string که آدرس عکس را داخل آن گذاشتیم.

 

()With :در این قسمت Context صفحه را به پیکاسو می دهیم. درصورتی که کلاس Activity داشتیم میتوانیم از getApplicationContext() استفاده نماییم و برای fragment از getActivity قابل استفاده است.

 

()Load : در اینجا باید آدرس عکسی که می خواهید نمایش دهید. آدرس را در myUrl می گذارید بعد myUrl را قرار می دهیم.

 

برای نمایش تصاویری که در drawable قرار دارد به صورت زیر عمل میکنیم.

 

.load(R.drawable.image)

 .

 

()Error : در این قسمت در صورتی که عکسی دارید که درون  load قرار دادید و این عکس به هر دلیلی خراب شده است آن را جایگذین می کنیم.

 

()placeholder : گذاشتن  عکس اولیه قبل از لود  عکس اصلی .

 

()Into : جای نمایش عکس اخذ شده با picasso می باشد که ما در imageView گذاشتیم.

 

بهتر است بدانید که تنها ۳ پارامتر (with,load,into) اجباری است و بقیه موارد را می توانید حذف کنید

 

کتابخانه عکس اندروید : Glide

 

کتابخانه عکس اندروید : Glide

 

در این قسمت به معرفی کتابخانه عکس اندروید Glide می پردازیم. امکانات کتابخانه ی گلاید شامل  قابلیت کش کردن تصاویر  و امکان نمایش gif است.

 

جهت به نمایش در آوردن عکس از دو روش  آدرس url و یا فراخوانی از drawable می توان استفاده نمود. روش کار به این طریق است که بایدمتعلقات (Dependency)  را در فایل build.gradle در اندروید استدیو خود اضافه نمایید.

 

repositories { mavenCentral() // jcenter() works as well because it pulls from Maven Central } dependencies { compile 'com.github.bumptech.glide:glide:۳.۷.۰' compile 'com.android.support:support-v۴:۱۹.۱.۰' }

repositories {
mavenCentral() // jcenter() works as well because it pulls from Maven Central
}

dependencies {
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.android.support:support-v4:19.1.0'
}

 

نحوه استفاده :

 

Glide .with(context) .load(url) .into(myImageView);

Glide
.with(context)
.load(url)
.into(myImageView);

 

در کمترین حالت جهت به کار بردن  احتیاج به ۳ پارامتر است.

 

()With : این پارامتر Context صفحه را به Glide می دهد. در صورتی که کلاس شما Activity است میتوانید از this استفاده کنید و برای fragment از getActivity نیز استفاده می شود.

()Load : اینجا شما باید آدرس عکسی که قرار است نمایش دهد را قرار دهید . برای تصاویری که در اینترنت است (url) باید آدرس عکس را به صورت کامل درون “” بگذارید .

 

مثال :

 

.load(“http://mrmaterial.ir/wp-content/themes/newmrmaterial/img/mr-logo.png”)

 

جهت به نمایش در آوردن تصاویری که در drawable هستند اینگونه انجام دهید:

 

.load(R.drawable.image)

 

()Into : اینجا آدرس ImageView که قرار است تصویر درون آن باشد را می گذاریم.

 

امیدوارم از این آموزش لذت برده باشید.

پیام بگذارید


تومان