مقدمه

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

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

مرحله‌ی ۱

“activity_main” را باز کرده و کد زیر را به آن اضافه کنید.

 

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"  
    android:paddingRight="@dimen/activity_horizontal_margin"  
    android:paddingTop="@dimen/activity_vertical_margin"  
    android:paddingBottom="@dimen/activity_vertical_margin"  
    tools:context=".MainActivity"  
    android:orientation="vertical">  
    <Button  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:text="Select a photo"  
        android:id="@+id/gallery"/>  
    <ImageView  
        android:layout_height="300dp"  
        android:layout_width="fill_parent"  
        android:id="@+id/original_image"  
        android:layout_marginTop="20dp"/>  
    <Button  
        android:text="Add Effects"  
        android:id="@+id/effects_btn"  
        android:layout_height="wrap_content"  
        android:layout_width="wrap_content"  
        android:paddingLeft="10dp"  
        android:paddingRight="10dp"  
        android:layout_marginTop="10dp"/>  
</LinearLayout> 

لی‌آوت ظاهری شبیه این دارد:

مرحله‌ی ۲

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

در Layout گزینه‌ی “New” و سپس “Layout resource file” را انتخاب کنید. نام آن را “List_of_effects” گذاشته و کد زیر را به آن اضافه کنید.

 

<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
          android:layout_width="fill_parent"  
          android:layout_height="fill_parent"  
          android:padding="10dp"  
          android:textSize="20sp"  
          android:background="#cd6959">  
</TextView>

مرحله‌ی ۳

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

در Layout گزینه‌ی “New” و سپس “Layout resource file” را انتخاب کنید. نام آن را “file_view” گذاشته و کد زیر را به آن اضافه کنید:

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
              android:orientation="vertical"  
              android:layout_width="match_parent"  
              android:layout_height="match_parent">  
    <ImageView  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
        android:id="@+id/view"  
        android:layout_marginLeft="20dp"  
        android:layout_marginRight="20dp"  
        android:layout_marginTop="20dp"  
        android:layout_marginBottom="20dp"  
        />  
</LinearLayout>  

مرحله‌ی ۴

“MainActivity” را باز کرده و کد زیر را به آن اضافه کنید:

 

package com.chhavi.imageeffectfinal;  
   
import android.content.Intent;  
import android.database.Cursor;  
import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.net.Uri;  
import android.os.Bundle;  
import android.app.Activity;  
import android.provider.MediaStore;  
import android.util.Log;  
import android.view.Menu;  
import android.view.View;  
import android.widget.Button;  
import android.widget.ImageView;  
   
public class MainActivity extends Activity {  
   
    Button gallery;  
    Bitmap image;  
    ImageView original;  
    Button effects;  
    String picturePath;  
   
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
   
        original=(ImageView)findViewById(R.id.original_image);  
        effects=(Button)findViewById(R.id.effects_btn);  
   
        gallery=(Button)findViewById(R.id.gallery);  
        gallery.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
   
                Intent intent = new   Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);  
                startActivityForResult(intent, ۱);  
            }  
        });  
   
        effects.setOnClickListener(new View.OnClickListener() {  
            @Override  
            public void onClick(View v) {  
   
                Intent i=new Intent(MainActivity.this,ListOfEffects.class);  
                i.putExtra("image thumbnail path",picturePath);  
                startActivity(i);  
            }  
        });  
    }  
    @Override  
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
        super.onActivityResult(requestCode, resultCode, data);  
   
        if(resultCode==RESULT_OK)  
        {  
            Uri selectedImage = data.getData();  
            String[] filePath = { MediaStore.Images.Media.DATA };  
            Cursor c = getContentResolver().query(selectedImage,filePath, null, null, null);  
            c.moveToFirst();  
            int columnIndex = c.getColumnIndex(filePath[0]);  
             picturePath = c.getString(columnIndex);  
            c.close();  
            image = (BitmapFactory.decodeFile(picturePath));  
            Log.i("path of image from gallery...............", picturePath + "");  
            original.setImageBitmap(image);  
        }  
    }  
   
    @Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        // Inflate the menu; this adds items to the action bar if it is present.  
        getMenuInflater().inflate(R.menu.main, menu);  
        return true;  
    }     
}

در کد بالا، گالری یک گوشی اندروید را باز می‌کنیم. کاربران می‌توانند هر عکسی که دوست دارند را انتخاب کنند. با کلیک روی گزینه‌ی “Add Effects” یک فعالیت جدید لود شده و لیست افکت‌های موجود را نشان می‌دهد.

مرحله‌ی ۵

در همان پکیج یک کلاس جدید بسازید. نام آن را “ListOfEffects” گذاشته و کد زیر را به آن اضافه کنید:

package com.chhavi.imageeffectfinal;  
   
import android.app.Activity;  
import android.app.ListActivity;  
import android.content.Intent;  
import android.os.Bundle;  
import android.util.Log;  
import android.view.View;  
import android.widget.AdapterView;  
import android.widget.ArrayAdapter;  
import android.widget.ListView;  
import java.util.ArrayList;  
   
public class ListOfEffects extends ListActivity  
{  
    ArrayList<String> effects= new ArrayList<String>();  
    String path;  
    String effect_choosen;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
   
        Intent i=getIntent();  
        path=i.getStringExtra("image thumbnail path");  
        Log.i("path of file in list of effects......", path);  
   
        effects.add("Effect ۱");  
        effects.add("Effect ۲");  
        effects.add("Effect ۳");  
        effects.add("Effect ۴");  
        effects.add("Effect ۵");  
   
        setListAdapter(new ArrayAdapter<String>(this, R.layout.list_of_effects,effects));  
   
        ListView listView = getListView();  
        listView.setTextFilterEnabled(true);  
   
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
            @Override  
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
                    //applyEffects(path);  
                effect_choosen=effects.get(position);  
                Log.i("Effect choosen................",effect_choosen);  
                applyEffects();  
            }  
        });  
    }  
    void applyEffects()  
    {  
        Intent i=new Intent(ListOfEffects.this, EffectAdded.class);  
        i.putExtra("path",path);  
        i.putExtra("effect",effect_choosen);  
        startActivity(i);  
    }  
}  

این کلاس لیست افکت‌هایی که می‌توانند به عکس اضافه شوند را نشان می‌دهد و یک فعالیت دیگر را روی کلیک آیتم لود می‌کند.

مرحله‌ی ۶

یک کلاس دیگر بسازید. نام آن را “EffectsAdded” گذاشته و کد زیر را به آن اضافه کنید:

 

package com.chhavi.imageeffectfinal;  
   
import android.app.Activity;  
import android.content.Intent;  
import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.graphics.BlurMaskFilter;  
import android.graphics.Canvas;  
import android.graphics.Color;  
import android.graphics.Paint;  
import android.graphics.PorterDuff;  
import android.os.Bundle;  
import android.util.Log;  
import android.widget.ImageView;  
   
public class EffectAdded extends Activity {  
    String path;  
    String effect_choosen;  
    ImageView changed;  
    Bitmap out;  
   
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.final_view);  
   
        Intent i=getIntent();  
        path=i.getStringExtra("path");  
        effect_choosen=i.getStringExtra("effect");  
   
        changed=(ImageView)findViewById(R.id.view);  
   
        Log.i("path of file in effects added.....................", path);  
        Log.i("effect chosen in effects added.....................", effect_choosen);  
   
        Bitmap thumbnail = (BitmapFactory.decodeFile(path));  
   
        if(effect_choosen.equalsIgnoreCase("Effect ۱"))  
        {  
           out=addEffect(thumbnail,5,5.0,6.0,0.0);  //red,blue,no green  
        }  
        else if(effect_choosen.equalsIgnoreCase("Effect ۲"))  
        {  
            out=addEffect(thumbnail,5,5.0,0.0,10.0);  //red,green,no blue  
        }  
        else if(effect_choosen.equalsIgnoreCase("Effect ۳"))  
        {  
            out=addEffect(thumbnail,5,0.0,10.0,0.0);  //only green  
        }  
        else if(effect_choosen.equalsIgnoreCase("Effect ۴"))  
        {  
            out=addEffect(thumbnail,15,5.0,0.0,10.0);  //red,green,no blue, depth increased  
        }  
        else if(effect_choosen.equalsIgnoreCase("Effect ۵"))  
        {  
            out=addEffect(thumbnail,5,10.0,0.0,0.0);  //only red  
        }  
   
        changed.setImageBitmap(out);  
    }  
   
    public static Bitmap addEffect(Bitmap src, int depth, double red, double green, double blue) {  
       
        int width = src.getWidth();  
        int height = src.getHeight();  
       
        Bitmap finalBitmap = Bitmap.createBitmap(width, height, src.getConfig());  
       
        final double grayScale_Red = ۰٫۳;  
        final double grayScale_Green = ۰٫۵۹;  
        final double grayScale_Blue = ۰٫۱۱;  
     
        int channel_aplha, channel_red, channel_green, channel_blue;  
        int pixel;  
        
        for(int x = ۰; x < width; ++x) {  
            for(int y = ۰; y < height; ++y) {  
                
                pixel = src.getPixel(x, y);                 
                channel_aplha = Color.alpha(pixel);  
                channel_red = Color.red(pixel);  
                channel_green = Color.green(pixel);  
                channel_blue = Color.blue(pixel);  
                
                channel_blue = channel_green = channel_red = (int)(grayScale_Red * channel_red + grayScale_Green * channel_green + grayScale_Blue * channel_blue);  
   
                channel_red += (depth * red);  
                if(channel_red > ۲۵۵)  
                {  
                    channel_red = ۲۵۵;  
                }  
                channel_green += (depth * green);  
                if(channel_green > ۲۵۵)  
                {  
                    channel_green = ۲۵۵;  
                }  
                channel_blue += (depth * blue);  
                if(channel_blue > ۲۵۵)  
                {  
                    channel_blue = ۲۵۵;  
                }  
                 
                finalBitmap.setPixel(x, y, Color.argb(channel_aplha, channel_red, channel_green, channel_blue));  
            }  
        }       
        return finalBitmap;  
    }  
}  

در کد بالا، فانکشن‌های “getWidth” و “getHeight” پهنا و ارتفاع بیت‌مپ فعلی را برمی‌گردانند. افکتی که می‌خواهیم برای edit روی عکس قرار دهیم باید روی همه‌ی پیکسل‌های آن اعمال شود. حلقه‌های

“for” درون کد برای اعمال افکت به همه‌ی پیکسل‌های عکس قرار داده شده‌اند.

کلاس Color روش‌هایی برای ایجاد و تغییر int‌های رنگ ارائه می‌دهد. رنگ‌ها به صورت مجموعه‌هایی از int‌ها که حاوی ۴ بایت آلفا، قرمز، سبز و آبی هستند نشان داده شده‌اند. هر جزء در بازه‌ی ۰ تا ۲۵۵ است. ۰‌ یعنی این جزء در رنگ وجود ندارد و ۲۵۵‌ یعنی ۱۰۰ درصد رنگ از این جزء تشکیل شده است. “alpha”، “red”، “blue” و “green” روش‌های کلاس Color هستند که جزء آلفا، جزء قرمز، جزء آبی و جزء سبز int رنگ را برمی‌گردانند.

روش “Color.argb” int رنگ اجزاء آلفا، قرمز، سبز و آبی را برمی‌گرداند.

در نهایت، بیت‌مپ تغییر یافته به عکس اضافه می‌شود.

مرحله‌ی ۷

تغییرات زیر را به “AndroidManifest” اضافه کنید:

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    package="com.chhavi.imageeffectfinal"  
    android:versionCode="1"  
    android:versionName="1.0" >  
   
    <uses-sdk  
        android:minSdkVersion="7"  
        android:targetSdkVersion="16" />  
   
    <application  
        android:allowBackup="true"  
        android:icon="@drawable/ic_launcher"  
        android:label="@string/app_name"  
        android:theme="@style/AppTheme" >  
        <activity  
            android:name="com.chhavi.imageeffectfinal.MainActivity"  
            android:label="@string/app_name" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
   
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
        </activity>  
       
        <activity android:name=".ListOfEffects"  
                  android:label="Choose Effect"/>  
   
        <activity android:name=".EffectAdded"  
                  android:label="Final Image"/>  
    </application>  
   
</manifest>  

نرم افزار جلوه‌های ویژه عکس برای اندروید شما آماده است. می‌توانید اسکرین شات نتیجه را ببینید:

با کلیک روی “Select a Photo” می‌توانید گالری را باز کنید:

یک عکس از گالری برای edit انتخاب کنید:

روی گزینه‌ی “Add Effects” کلیک کنید:

افکت۱:

افکت۲:

افکت۳:

افکت۴:

افکت۵:

نتیجه گیری

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