مدیریت و نمایش تصاویر در اندروید

مدیریت و نمایش تصاویر در اندروید

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

اندروید ارائه دهنده ویوهایی برای نمایش تصاویر از منابع گوناگون است و جابجایی بین این تصاویر را نیز میسر می سازد. بسیاری از ویوها ImageView و برخی دیگر ImageSwitcher هستند.

این ویوها از سطح عملکرد بالایی برای نمایش تصاویر در رابط کاربری برخوردارند، در نتیجه به جای نگرانی از بابت نحوه رندر شدن این تصاویر، می توانیم بر روی خود تصاویر و کیفیت آنها متمرکز شویم. در این مقاله قصد داریم نحوه استفاده از این ویوها در رابط کاربری را شرح دهیم، با ما همراه باشید.

استفاده از ImageView برای نمایش تصاویر

ImageView کلاسی است که اندروید برای رندر تصاویر در اختیار توسعه دهندگان قرار داده است. کار را با ساخت برنامه ای که از ImageView برای نمایش تصاویر استفاده می کند، آغاز می کنیم، در این برنامه یک دکمه نیز وجود دارد که وظیفه آن تغییر تصاویر در ImageView است. شما می توانید کدهای مربوط به این بخش را در GitHub نیز بیابید.

یک پروژه اندروید بیسیک با یک اکتیویتی که ویوی اصلی از فایل لی اوت را ست می کند، بسازید. پس از آن فایل لی اوت را باز کنید و به صورتی که در زیر نمایش داده شده ImageView و دکمه را به آن اضافه کنید.

<?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:paddingLeft="16dp"

android:paddingRight="16dp"

android:orientation="vertical">

<ImageView

android:id="@+id/imageDisplay"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<Button

android:id="@+id/btnRotateImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Next Image" />

</LinearLayout>

در کد بالا یک LinearLayout ساخته شده و یک ImageView برای نمایش تصویر به آن اضافه شده، دکمه ای نیز برای چرخش بین تصاویر قرار داده شده است.

تعدادی تصویر به پوشه منبع اضافه کنید، این کار باید مطابق با اندازه صفحات نمایشی باشد که قصد پشتیبانی از آنها را دارید، در زیر نحوه کار نمایش داده شده است:

blog_15160_1

حال لازم است کد اکتیویتی خود را مطابق زیر تغییر دهید، برای این کار باید از نام های مناسب برای پروژه خود استفاده کنید:

public class ImageChangingActivity extends Activity {

private Integer images[] = {R.drawable.pic1, R.drawable.pic2, R.drawable.pic3};

private int currImage = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_image_changing);

setInitialImage();

setImageRotateListener();

}

private void setImageRotateListener() {

final Button rotatebutton = (Button) findViewById(R.id.btnRotateImage);

rotatebutton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

currImage++;

if (currImage == 3) {

currImage = 0;

}

setCurrentImage();

}

});

}

private void setInitialImage() {

setCurrentImage();

}

private void setCurrentImage() {

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

imageView.setImageResource(images[currImage]);

}

}

در قسمت بالا آرایه ای از آی دی ها ریسورس برای تصاویر ذخیره شده در پوشه ریسورس ها ساخته شد. در متد OnCreate کانتنت ویو را برای لی اوت ساخته شده ست کردیم. در تابع setImageRotateListener یک لیسنر برای ایونت onClick برای دکمه ساخته شده ایجاد شده است، این تابع وظیفه تغییر شمارنده CurrentImage را بر عهده دارد، علاوه بر این تصویر جدید را در ImageView قرار می دهد.

تابع setCurrentImage آبجکت ImageView را با استفاده از تابع findViewById می گیرد، سپس با کمک تابع setImageResource، آی دی تصویر کنونی را ست می کند، در نتیجه تصویر مورد نظر در ImageView به نمایش گذاشته می شود.

با اجرای برنامه باید تصویر را در ImageView مشاهده کنید و با زدن دکمه تصاویر را تغییر دهید.

blog_15160_2

استفاده از ویوی ImageSwitcher در اندروید

در مثال بالا تصاویر را در ImageView جابجا نمودیم، اما این جابجایی آنچنان که باید نرم و سریع نیست، به منظور نمایش و جابجایی بین تصاویر می توان از ویوی ImageSwitcher استفاده کرد.

می توانید از طریق این لینک کدهای مربوط به این مثال را دریافت کنید.

اول از همه یک ویوی ImageSwitcher به لی اوت خود بیفزایید:

<?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:paddingLeft="16dp"

android:paddingRight="16dp"

android:orientation="vertical">

<ImageSwitcher

android:id="@+id/imageSwitcher"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<Button

android:id="@+id/btnRotateImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Next Image" />

</LinearLayout>

سپس کد زیر را به اکتیویتی خود اضافه کنید، با این کار ImageSwitcher راه اندازی شده و یک نمونه از آن ساخته می شود، بدین ترتیب می توانید یک دکمه را برای تغییر تصویر با ترنزیشن ست کنید.

public class ImageSwitcherExampleActivity extends Activity {

private Integer images[] = {R.drawable.pic1, R.drawable.pic2, R.drawable.pic3};

private int currImage = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_image_switcher_example);

initializeImageSwitcher();

setInitialImage();

setImageRotateListener();

}

private void initializeImageSwitcher() {

final ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);

imageSwitcher.setFactory(new ViewFactory() {

@Override

public View makeView() {

ImageView imageView = new ImageView(ImageSwitcherExampleActivity.this);

return imageView;

}

});

imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left));

imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));

}

private void setImageRotateListener() {

final Button rotatebutton = (Button) findViewById(R.id.btnRotateImage);

rotatebutton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

currImage++;

if (currImage == 3) {

currImage = 0;

}

setCurrentImage();

}

});

}

private void setInitialImage() {

setCurrentImage();

}

private void setCurrentImage() {

final ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);

imageSwitcher.setImageResource(images[currImage]);

}

}

کد بالا یک آبجکت از ImageSwithcer را گرفته و پس از آن ViewFactory را که یک ImageView خالی ایجاد می کند، ست می نماید. پس از این کار انیمیشن هایی برای محو شدن تصاویر ست شده اند. تابع setCurrentImage برای ست کردن تصاویر در ImageSwitcher آپدیت شده است.

با این کار جابجایی بین تصاویر با انیمیشن ها و افکت های نمایش همراه می شود.

blog_15160_3

دانلود و ست کردن تصاویر از اینترنت و استفاده در ImageView

کدهای این بخش را می توانید به کمک لینک GitHub دریافت نمایید.

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

نباید هیچگونه عملیات مرتبط با شبکه را در ترد رابط کاربری انجام دهید، عملیات دانلود باید در یک ترد پس زمینه متفاوتی صورت پذیرد. این کار در تسک Async صورت می پذیرد. اول از همه باید مجوز دسترسی به اینترنت را در فایل AndroidManifest.xml تعیین کنید، نحوه انجام این کار در زیر نمایش داده شده است:

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

پس از آن تسک AsyncTask ساخته می شود، که با گرفتن ImageView و URL دانلود، تصویر موردنظر را دانلود می کند و تصویر را در ImageView قرار می دهد.

<?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:paddingLeft="16dp"

android:paddingRight="16dp"

android:orientation="vertical">

<ImageView

android:id="@+id/imageDisplay"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<Button

android:id="@+id/btnRotateImage"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Next Image" />

</LinearLayout>

تسک ImageDownloader async داده های تصویر را دانلود می کند و ImageView را ست می کند، کد کامل تا این مرحله باید مطابق زیر باشد:

public class ImagedownloaderActivity extends Activity {

private String imageUrls[] = {"http://www.abc.com/image1.jpg",

"http://www.abc.com/image2.jpg",

"http://www.abc.com/image3.jpg"

};

private class ImageDownloader extends AsyncTask<String, Void, Bitmap> {

ImageView bmImage;

public ImageDownloader(ImageView bmImage) {

this.bmImage = bmImage;

}

protected Bitmap doInBackground(String... urls) {

String url = urls[0];

Bitmap bitmap = null;

try {

InputStream in = new java.net.URL(url).openStream();

bitmap = BitmapFactory.decodeStream(in);

} catch (Exception e) {

Log.e("MyApp", e.getMessage());

}

return bitmap;

}

protected void onPostExecute(Bitmap result) {

bmImage.setImageBitmap(result);

}

}

private int currImage = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_imagedownloader);

setInitialImage();

setImageRotateListener();

}

private void setImageRotateListener() {

final Button rotatebutton = (Button) findViewById(R.id.btnRotateImage);

rotatebutton.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View arg0) {

currImage++;

if (currImage == 3) {

currImage = 0;

}

setCurrentImage();

}

});

}

private void setInitialImage() {

setCurrentImage();

}

private void setCurrentImage() {

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

ImageDownloader imageDownLoader = new ImageDownloader(imageView);

imageDownLoader.execute(imageUrls[currImage]);

}

}

در کد بالا URL های تصاویر در آرایه imageUrls ذخیره شده اند. در تابع setCurrentImage ،ImageView به تسک ImageDownloader Async و URL تصویر برای دانلود و ست شدن در ImageView ارسال شده اند.

جایگذاری یک گالری با استفاده از HorizontalScrollView

کدهای مربوط به این بخش ا می توانید از طریق لینک GitHub دریافت کنید.

در مثال های بالا نحوه نمایش یک تصویر در یک زمان مشخص با استفاده از ImageView نشان داده شده است، گاهی اوقات ممکن است به تعداد متغیری از تصاویر نیاز داشته باشیم و به کاربر امکان اسکرول کردن بین این تصاویر را دهیم. برای این کار باید یک LinearLayout را درون یک scrollView افقی قرار داده، سپس به صورت داینامیک ImageView را به آن LinearLayout اضافه کنید، برای این کار یک اکتیویتی جدید به نام ImageGalleryActivity ساخته و فایل لی اوت را مطابق زیر آپدیت کنید:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.example.imagegallery.ImageGalleryActivity">

<HorizontalScrollView

android:layout_width="match_parent"

android:layout_height="wrap_content">

<LinearLayout

android:id="@+id/imageGallery"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" />

</HorizontalScrollView>

</RelativeLayout>

کد اکتیویتی:

public class ImageGalleryActivity extends Activity {

private Integer images[] = {R.drawable.pic1, R.drawable.pic2, R.drawable.pic3};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_image_gallery);

addImagesToThegallery();

}

private void addImagesToThegallery() {

LinearLayout imageGallery = (LinearLayout) findViewById(R.id.imageGallery);

for (Integer image : images) {

imageGallery.addView(getImageView(image));

}

}

private View getImageView(Integer image) {

ImageView imageView = new ImageView(getApplicationContext());

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

lp.setMargins(0, 0, 10, 0);

imageView.setLayoutParams(lp);

imageView.setImageResource(image);

return imageView;

}

}

در کد بالا ImageViews به صورت دایناماک ساخته شده و حاشیه هایی به آنها افزوده شد، جهت قرارگیری این LinerLayout افقی است، با اجرای برنامه ما قادر به مشاهده تصاویر در یک گالری هستیم که به صورت افقی می توان در آن اسکرول کرد.

blog_15160_4

نتیجه گیری

تصاویر بخش عمده ای از رابط های موبایل امروزی را تشکیل داده اند، در این مطلب آموزشی چندین ابزار را که اندروید برای نمایش تصاویر در اختیار قرار می دهد، معرفی کردیم، زمان را از دست ندهید و کار با تصاویر را در اپلیکیشن اندروید خود آغاز کنید و بر جذابیت اپلیکیشن بیفزایید!

 

http://www.sitepoint.com برگرفته از

 

اینها را هم بخوانید