هیچ دوره ای در سبد خرید شما وجود ندارد
مقدمه
اگر با برنامه ادیت عکس برای اندروید کار کرده باشید، حتما افکت‌های متختلفی مانند افکت‌های تغییر رنگ را دیده‌اید. گرافیک عکس برای اندروید بسیار پرطرفدار است چون این جلوه‌ها عکس‌ها را زیباتر می‌کنند و آن‌ها را برای انتشار در شبکه‌های اجتماعی مناسب‌تر می‌کنند. برای قرار دادن این افکت‌ها روی تصویر، باید مقدار آلفای عکس، یعنی عمق و ترکیب رنگ‌های قرمز، آبی و سبز عکس، را تغییر دهید.
این پست به شما نشان می‌دهد که چطور این افکت تغییر رنگ را در اندروید استودیو بسازید. برای انتخاب عکس از گالری گوشی خود استفاده کرده و پنج افکت روی آن قرار خواهیم دارد. پس برای خواندن آموزش افکت دادن به تصاویر در اندروید و ساخت یک نرم افزار جلوه‌های ویژه عکس برای اندروید با ما همراه باشید.
آموزش پیشنهادی
مرحله‌ی 1
“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> لی‌آوت ظاهری شبیه این دارد:
مرحله‌ی 2
برای نمایش لیستی از افکت‌هایی که می‌توانند روی یک عکس قرار گیرند، یک فایل لی‌آوت جدید بسازید.
در 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>مرحله‌ی 3
یک فایل لی‌آوت جدید برای نمایش عکسی که می‌خواهید افکت‌ها روی آن قرار بگیرند بسازید.
در 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> مرحله‌ی 4
“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, 1);
}
});
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” یک فعالیت جدید لود شده و لیست افکت‌های موجود را نشان می‌دهد.
مرحله‌ی 5
در همان پکیج یک کلاس جدید بسازید. نام آن را “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 1");
effects.add("Effect 2");
effects.add("Effect 3");
effects.add("Effect 4");
effects.add("Effect 5");
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);
}
}
این کلاس لیست افکت‌هایی که می‌توانند به عکس اضافه شوند را نشان می‌دهد و یک فعالیت دیگر را روی کلیک آیتم لود می‌کند.
مرحله‌ی 6
یک کلاس دیگر بسازید. نام آن را “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 1"))
{
out=addEffect(thumbnail,5,5.0,6.0,0.0); //red,blue,no green
}
else if(effect_choosen.equalsIgnoreCase("Effect 2"))
{
out=addEffect(thumbnail,5,5.0,0.0,10.0); //red,green,no blue
}
else if(effect_choosen.equalsIgnoreCase("Effect 3"))
{
out=addEffect(thumbnail,5,0.0,10.0,0.0); //only green
}
else if(effect_choosen.equalsIgnoreCase("Effect 4"))
{
out=addEffect(thumbnail,15,5.0,0.0,10.0); //red,green,no blue, depth increased
}
else if(effect_choosen.equalsIgnoreCase("Effect 5"))
{
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 = 0.3;
final double grayScale_Green = 0.59;
final double grayScale_Blue = 0.11;
int channel_aplha, channel_red, channel_green, channel_blue;
int pixel;
for(int x = 0; x < width; ++x) {
for(int y = 0; 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 > 255)
{
channel_red = 255;
}
channel_green += (depth * green);
if(channel_green > 255)
{
channel_green = 255;
}
channel_blue += (depth * blue);
if(channel_blue > 255)
{
channel_blue = 255;
}
finalBitmap.setPixel(x, y, Color.argb(channel_aplha, channel_red, channel_green, channel_blue));
}
}
return finalBitmap;
}
} در کد بالا، فانکشن‌های “getWidth” و “getHeight” پهنا و ارتفاع بیت‌مپ فعلی را برمی‌گردانند. افکتی که می‌خواهیم برای edit روی عکس قرار دهیم باید روی همه‌ی پیکسل‌های آن اعمال شود. حلقه‌های
“for” درون کد برای اعمال افکت به همه‌ی پیکسل‌های عکس قرار داده شده‌اند.
کلاس Color روش‌هایی برای ایجاد و تغییر intهای رنگ ارائه می‌دهد. رنگ‌ها به صورت مجموعه‌هایی از intها که حاوی 4 بایت آلفا، قرمز، سبز و آبی هستند نشان داده شده‌اند. هر جزء در بازه‌ی 0 تا 255 است. 0 یعنی این جزء در رنگ وجود ندارد و 255 یعنی 100 درصد رنگ از این جزء تشکیل شده است. “alpha”، “red”، “blue” و “green” روش‌های کلاس Color هستند که جزء آلفا، جزء قرمز، جزء آبی و جزء سبز int رنگ را برمی‌گردانند.
روش “Color.argb” int رنگ اجزاء آلفا، قرمز، سبز و آبی را برمی‌گرداند.
در نهایت، بیت‌مپ تغییر یافته به عکس اضافه می‌شود.
مرحله‌ی 7
تغییرات زیر را به “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” کلیک کنید:
افکت1:
افکت2:
افکت3:
افکت4:
افکت5:
نتیجه گیری
در این پست آموزش افکت دادن به تصاویر در اندروید و روش ساخت برنامه ادیت عکس برای اندروید را برای شما قرار دادیم و به شما یاد دادیم چطور پنج افکت مختلف را روی عکس‌های گالری گوشی اندروید خود قرار دهید. با تغییر دادن مقدار آلفا، عمق و رنگ‌های قرمز، سبز و آبی می‌توانید افکت‌ها و جلوهای جدیدی برای عکس‌های خود بسازید. امیدواریم از این آموزش ساخت نرم افزار گرافیک عکس برای اندروید لذت برده باشید.
سوالات و پیشنهادات خود را به صورت دیدگاه مطرح کنید
ارسال دیدگاه