آموزش ساخت تصاویر پس زمینه زنده

آموزش حاضر به شرح نحوه ی ساخت تصاویر زنده برای سیستم عامل اندروید می پردازد. پروژه های این مبحث در محیط برنامه نویسی Eclipse 4.2، با ویرایش 1.6 زبان Java نوشته شده و مبتنی بر ورژن 4.1 سیستم عامل اندروید می باشد.

مرور کلی

آموزش ایجادLive Wallpapers / تصاویر زنده

Live wallpaper تصاویر پس زمینه ای پویا و تعاملی هستند که در صفحه ی اصلی سیستم عامل/home screen می نشینند. این تصاویر زنده از بسیاری جهات شبیه به دیگر اپلیکیشن های اندرویدی بوده و قادر هستند از اغلب قابلیت های سیستم اندروید مانند سایر برنامه ها بهره ببرند.

آموزش نحوه ی ساخت live wallpaper

به منظور ساخت live wallpaper لازم است یک فایل XML ایجاد نموده و ویژگی های کلی آن را در فایل مزبور اعلان نمایید. فایل نام برده می بایست توصیفی کلی از اپلیکیشن، یک پیش نمایش و لینک به تنظیمات اکتیویتی Activity که در قالب preferences تعریف می شود را دربرداشته باشد. شما بعده ها از طریق preferences می توانید activity را مطابق نیاز تنظیم نمایید.

سپس یک سرویس تعریف می کنید که کلاس WallpaperService را به ارث می برد. در واقع تمامی تصاویر زنده در سیستم اندروید از این کلاس پایه ارث بری کرده و مشتق می شوند. متد onCreateEngine() را پیاده سازی کرده و یک آبجکت از جنس android.service.wallpaper.WallpaperService.Engine به عنوان خروجی از متد بازگردانی نمایید. این آبجکت ها رخدادهای مربوط به چرخه ی حیات (lifecycle event)، انیمیشن (متحرک سازی) و ترسیم live wallpaper را مدیریت می کنند. کلاس Engine متدهای مربوط به چرخه ی حیات را در اختیار توسعه دهنده قرار می دهد که از جمله ی آن می توان به onCreate()،onSurfaceCreated()،onVisibilityChanged()،onOffsetsChanged() ، onTouchEvent() و onCommand() اشاره کرد.

برای استفاده از سرویس مورد نظر می بایست داخل فایل تنظیمات اپلیکیشن (manifest) مقدار android:permission را (داخل تگ service) برابر android.permission.BIND_WALLPAPER قرار داده و سپس داخل تگ intent-filter مقدار خصیصه ی android:name المان action را بر روی android.service.wallpaper.WallpaperService تنظیم نمایید.

همچنین لازم است داخل فایل تنظیمات (AndroidManifest.xml) اعلان نمایید که اپلیکیشن از امکان android.software.live_wallpaper استفاده می کند. به دنبال این تنظیم، دستگاه هایی که از live wallpaper پشتیبانی نمی کنند، قابلیت نصب نرم افزار شما را نخواهد داشت.

آموزش استفاده از intent برای تنظیم wallpaper

می توانید یک دکمه تعریف کنید که با کلیک بر روی آن یک intent فعال شده و این intent سبب راه اندازی activity دیگری می شود. سپس در activity دوم امکان انتخاب Wallpaper را برای کاربر فراهم آورید.

// Button to set the Wallpaper
public void onClick(View view) {
        Intent intent = new Intent(                     WallpaperManager.ACTION_CHANGE_LIVE_WALLPAPER);       intent.putExtra(WallpaperManager.EXTRA_LIVE_WALLPAPER_COMPONENT,
                new ComponentName(this, MyWallpaperService.class));
        startActivity(intent);
}

مثالی از پیاده سازی Live Wallpaper در اندروید

یک پروژه ی جدید به نام de.vogella.android.wallpaper ایجاد نمایید. لازم به ایجاد activity نیست.

پوشه ی/res/xml و فایل mywallpaper.xml نیز را ایجاد نمایید.

این فایل یک پیش نمایش (در قالب یک تصویر کوچک) و توصیف از wallpaper را شامل می شود. می توانید یک لینک به activity که امکان تنظیم آن را برای کاربر فراهم می کند، در فایل XML لحاظ نمایید. این فایل محتوا به فایل تنظیمات اپلیکیشن (AndroidManifest.xml) متصل بوده و به آن لینک می شود.

با مقداردهی android:thumbnail در فایل حاضر قادر خواهید بود یک تصویر کوچک به عنوان پیش نمایش از live wallpaper فعال ارائه نمایید. مقداری که به این attribute انتساب می دهید در واقع به یک drawable اشاره می کند.

محتوای فایلAndroidManifest.xml را جهت تعریف سرویس MyWallpaperService به صورت زیر ویرایش نمایید. سپس تگ uses-feature را جهت افزودن قابلیت جدید به اپلیکیشن در این فایل اضافه کنید.

کلاس MyPoint را تعریف نموده و المان های ترسیم شده را در آن ذخیره نمایید.

package de.vogella.android.wallpaper;
public class MyPoint {
        String text;
        private int x;
        private int y;
        public MyPoint(String text, int x, int y) {
                this.text = text;
                this.x = x;
                this.y = y;
        }
}

یک activity جدید ایجاد نمایید. سپس فایل prefs.xml را در جهت نگهداری اطلاعات مربوط به تنظیمات در پوشه ی res/xml ایجاد کنید.

یک activity جدید به نام MyPreferencesActivity به همراه کلاس زیر ایجاد نمایید.

package de.vogella.android.wallpaper;
import android.os.Bundle;
import android.preference.Preference;
import android.preference.Preference.OnPreferenceChangeListener;
import android.preference.PreferenceActivity;
import android.widget.Toast;
public class MyPreferencesActivity extends PreferenceActivity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                addPreferencesFromResource(R.xml.prefs);
                // add a validator to the "numberofCircles" preference so that it only
                // accepts numbers
                Preference circlePreference = getPreferenceScreen().findPreference(
                                "numberOfCircles");
                // add the validator              circlePreference.setOnPreferenceChangeListener(numberCheckListener);
        }
        /**
         * Checks that a preference is a valid numerical value
         */
        Preference.OnPreferenceChangeListener numberCheckListener = new OnPreferenceChangeListener() {
                @Override
                public boolean onPreferenceChange(Preference preference, Object newValue) {
                        // check that the string is an integer
                        if (newValue != null && newValue.toString().length() > 0
                                        && newValue.toString().matches("\\d*")) {
                                return true;
                        }
                        // If now create a message to the user                        Toast.makeText(MyPreferencesActivity.this, "Invalid Input",
                                        Toast.LENGTH_SHORT).show();
                        return false;
                }
        };
}

بدنه ی کلاس سرویس Wallpaper را به صورت زیر پیاده سازی کنید.

package de.vogella.android.wallpaper;
import java.util.ArrayList;
import java.util.List;
import android.content.SharedPreferences;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.preference.PreferenceManager;
import android.service.wallpaper.WallpaperService;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
public class MyWallpaperService extends WallpaperService {
        @Override
        public Engine onCreateEngine() {
                return new MyWallpaperEngine();
        }
        private class MyWallpaperEngine extends Engine {
                private final Handler handler = new Handler();
                private final Runnable drawRunner = new Runnable() {
                        @Override
                        public void run() {
                                draw();
                        }
                };
                private List circles;
                private Paint paint = new Paint();
                private int width;
                int height;
                private boolean visible = true;
                private int maxNumber;
                private boolean touchEnabled;
                public MyWallpaperEngine() {
                        SharedPreferences prefs = PreferenceManager                                       .getDefaultSharedPreferences(MyWallpaperService.this);
                        maxNumber = Integer
.valueOf(prefs.getString("numberOfCircles", "4"));
                        touchEnabled = prefs.getBoolean("touch", false);
                        circles = new ArrayList();
                        paint.setAntiAlias(true);
                        paint.setColor(Color.WHITE);
                        paint.setStyle(Paint.Style.STROKE);
                        paint.setStrokeJoin(Paint.Join.ROUND);
                        paint.setStrokeWidth(10f);
                        handler.post(drawRunner);
                }
                @Override
                public void onVisibilityChanged(boolean visible) {                        this.visible = visible;
                        if (visible) {
                                handler.post(drawRunner);
                        } else {                               handler.removeCallbacks(drawRunner);
                        }
                }
}
@Override
                public void onSurfaceDestroyed(SurfaceHolder holder) {
                        super.onSurfaceDestroyed(holder);
                        this.visible = false;
                        handler.removeCallbacks(drawRunner);
                }
                @Override
                public void onSurfaceChanged(SurfaceHolder holder, int format,
                                int width, int height) {
                        this.width = width;
                        this.height = height;
                        super.onSurfaceChanged(holder, format, width, height);
                }
                @Override
                public void onTouchEvent(MotionEvent event) {
                        if (touchEnabled) {
                                float x = event.getX();
                                float y = event.getY();
                                SurfaceHolder holder = getSurfaceHolder();
                                Canvas canvas = null;
                                try {
                                        canvas = holder.lockCanvas();
                                        if (canvas != null) {                                              canvas.drawColor(Color.BLACK);
                                                circles.clear();
                                                circles.add(new MyPoint(
                                                                String.valueOf(circles.size() + 1), x, y));                                               drawCircles(canvas, circles);
                                        }
                                } finally {
                                        if (canvas != null)
                                                holder.unlockCanvasAndPost(canvas);
                                }
                                super.onTouchEvent(event);
                        }
                }
                private void draw() {
                        SurfaceHolder holder = getSurfaceHolder();
                        Canvas canvas = null;
                        try {
                                canvas = holder.lockCanvas();
                                if (canvas != null) {
                                        if (circles.size() >= maxNumber) {
                                                circles.clear();
                                        }
                                        int x = (int) (width * Math.random());
                                        int y = (int) (height * Math.random());
                                        circles.add(new MyPoint(String.valueOf(circles.size() + 1),
                                                        x, y));
                                        drawCircles(canvas, circles);
                                }
                        } finally {
                                if (canvas != null)
                                        holder.unlockCanvasAndPost(canvas);
                        }
                        handler.removeCallbacks(drawRunner);
                        if (visible) {
                                handler.postDelayed(drawRunner, 5000);
                        }
                }
                // Surface view requires that all elements are drawn completely
                private void drawCircles(Canvas canvas, List circles) {
                        canvas.drawColor(Color.BLACK);
                        for (MyPoint point : circles) {
                                canvas.drawCircle(point.x, point.y, 20.0f, paint);
                        }
                }
        }

یک کلاس Activity به صورت زیر ایجاد نمایید که ظاهر خود را از یک فایل layout حاوی آبجکت یا المان Button می خواند. این Button از خصوصیت onClick (property) برای اشاره و فراخوانی متد onClick استفاده می کند.

package de.vogella.android.wallpaper;
import android.app.Activity;
import android.app.WallpaperManager;
import android.content.ComponentName;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
public class SetWallpaperActivity extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
        }
        public void onClick(View view) {
                Intent intent = new Intent(                                WallpaperManager.ACTION_CHANGE_LIVE_WALLPAPER);
                intent.putExtra(WallpaperManager.EXTRA_LIVE_WALLPAPER_COMPONENT,
                                new ComponentName(this, MyWallpaperService.class));
                startActivity(intent);
        }
}

پس از راه اندازی، اپلیکیشن بایستی به شما اجازه ی تنظیم wallpaper را بدهد. تصویر پس زمینه مشابه زیر خواهد بود. چنانچه قابلیت Touch را از طریق تنظیمات preferences فعال کرده باشید، در آن صورت می توانید با کلیک بر روی صفحه دایره های جاری را حذف نمایید. علاوه بر آن می توانید تعداد دایره هایی که در UI به نمایش در می آید را تعیین نمایید.