ColorMixer

Project : ColorMixer

สําหรับโปรเจ็กนี้ เป็นการใช้ SeekBar 3 ตัว แทนค่า แม่สีทางแสง

เพื่อผสมสีออกมาแสดงโดยใช้ TextView

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center" >

<TextView
android:id = "@+id/color"
android:layout_width = "200dip"
android:layout_height = "200dip"
android:background = "#353535" >
</TextView>

<SeekBar
android:id = "@+id/red"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "30dip"
android:max = "255" >
</SeekBar>

<SeekBar
android:id = "@+id/green"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dip"
android:max = "255" >
</SeekBar>

<SeekBar
android:id = "@+id/blue"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dip"
android:max = "255" >
</SeekBar>

</LinearLayout>
 <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center" >

Code XML ในการจัด Layout ของ LinearLayout

orientation : อะไรก็ตามที่ใส่เข้าไปใน linear จะเรียงต่อกันตามแนวดิ่ง
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
gravity : อะไรก็ตามที่ อยู่ใน นี้ จะมีการจัดให้อยู่ตรงกลางของ Layout นี้

<TextView
android:id = "@+id/color"
android:layout_width = "200dip"
android:layout_height = "200dip"
android:background = "#353535" >
</TextView>

Code XML ในการจัด Layout ของ TextView

id : มีชื่อตัวแปรว่า color
width : กว้าง เท่ากับ 200 dip
height : สูง เท่ากับ 200 dip
background : มีค่าเป็น #353535 คือ มีค่าเป็น สีเทา

<SeekBar>
android:id = "@+id/red"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "30dip" >
</SeekBar>

Code XML ในการจัด Layout ของ SeekBar

id : มีชื่อตัวแปรว่า red
width : กว้าง เท่ากับ 270 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ความสูงปกติของ SeekBar
max : เป็นการกําหนดค่าสูงสุดไว้ที่ 255 ซึ่งเป็นค่าสูงสุดที่ Color Model กําหนด
 <SeekBar
android:id = "@+id/green"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dip"
android:max = "255" >
</SeekBar>

Code XML ในการจัด Layout ของ SeekBar

id : มีชื่อตัวแปรว่า green
width : กว้าง เท่ากับ 270 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ความสูงปกติของ SeekBar
max : เป็นการกําหนดค่าสูงสุดไว้ที่ 255 ซึ่งเป็นค่าสูงสุดที่ Color Model กําหนด

<SeekBar
android:id = "@+id/blue"
android:layout_width = "270dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "10dip"
android:max = "255" >
</SeekBar>

Code XML ในการจัด Layout ของ SeekBar

id : มีชื่อตัวแปรว่า blue
width : กว้าง เท่ากับ 270 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ความสูงปกติของ SeekBar
max : เป็นการกําหนดค่าสูงสุดไว้ที่ 255 ซึ่งเป็นค่าสูงสุดที่ Color Model กําหนด

*เรามองเห็นภาพได้อย่างไร? : เรามองเห็นภาพได้ ก็ต่อเมื่อ แสง ได้สะท้อนเข้าตาของเรา จากนั้นตาเราก็ แปลงค่า ความถี่

ของคลื่นแสงเป็นสีแบบที่เเราเห็น
ในจอภาพ ของเราจะมี หลอดไฟ อยู่ 3 หลอด ประกอบไปด้วย Red , Green , Blue เพื่อใช้ในการผสมสี
ซึ่งแต่ละหลอด มีค่า 0 - 255 ตาม Color Model 0 คือ ปิด 255 เปิด สว่างสุด และเมื่อ
มี หลอดไฟอยู่ 3 หลอด ก็จะสามารถผสมสีได้ โดยการสร้างสป็กตั้มของแสงได้ 16.5 ล้านสี
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

public class ColorMixer extends Activity {

TextView color;
SeekBar red,green,blue;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

color = (TextView)findViewById(R.id.color);

red = (SeekBar)findViewById(R.id.red);
red.setOnSeekBarChangeListener(onSlide);

green = (SeekBar)findViewById(R.id.green);
green.setOnSeekBarChangeListener(onSlide);

blue = (SeekBar)findViewById(R.id.blue);
blue.setOnSeekBarChangeListener(onSlide);

OnSeekBarChangeListener onSlide = new OnSeekBarChangeListener() {

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// TODO Auto-generated method stub
color.setBackgroundColor( Color.rgb( red.getProgress(),
green.getProgress(),
blue.getProgress()) );
}
};
}
 TextView color;
SeekBar red,green,blue;

Code Java ในการประกาศตัวแปร TextView และ SeekBar

color = (TextView)findViewById(R.id.color);

Code Java ในการการเชื่อม ตัวแปร TextView กับ Layout ( XML )

red = (SeekBar)findViewById(R.id.red);
red.setOnSeekBarChangeListener(onSlide);

green = (SeekBar)findViewById(R.id.green);
green.setOnSeekBarChangeListener(onSlide);

blue = (SeekBar)findViewById(R.id.blue);
blue.setOnSeekBarChangeListener(onSlide);

Code Java ในการการเชื่อม ตัวแปร SeekBar กับ Layout ( XML )

และ กําหนด เหตุการณ์ เมื่อ มีการ เลื่อน Tab บน SeekBar
เนื่องจากมี SeekBar มีอยู่ ถึง 3 อัน และใช้ฟังก์ชันตัวเดียวกัน เราจึง แยกเขียน
 OnSeekBarChangeListener onSlide = new OnSeekBarChangeListener() {

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
// TODO Auto-generated method stub
color.setBackgroundColor( Color.rgb( red.getProgress(),
green.getProgress(),
blue.getProgress()) );
}
};

Code Java ฟังก์ชัน onSlide สําหรับ เหตุการณ์ การ เลื่อน Tab บน SeekBar

ไม่ว่าจะมีการเลื่อน SeekBar อันไหนก็ตาม จะเอาค่าสีจาก

SeekBar ( Rad , Green , Blue ) ไปกําหนดค่าสีจาก Model Color RGB ด้วยฟังก์ชัน

Color.rgb( red , green , blue )

วิธีการ
1. เอาค่าจาก SeekBar แต่ละตัว มากําหนดค่าสี จะได้ว่า

Color.rgb( red.getProgress(),green.getProgress(), blue.getProgress())

 2. เอาค่าสีที่ที่ได้ มากําหนดสี ให้กับ TextView จะได้ว่า

color.setBackgroundColor( Color.rgb( red.getProgress(),

green.getProgress(),
blue.getProgress()) );

drbomkung@gmail.com