SeekBar

Project : SeekBarDemo

สําหรับโปรเจ็กนี้ เป็นการแนะนํา SeeBar โดยที่จะนํา TextView มาใช้ด้วย เพื่อแสดงค่าที่ได้จาก

SeekBar คือ เมื่อเลื่อน SeekBar แล้ว ขนาดของตัวอักษรจะเปลี่ยน

<?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/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "TextSize" >
</TextView>

<SeekBar
android:id = "@+id/seekbar"
android:layout_width = "250dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "20dip"
android:max = "25" >
</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/textView"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "TextSize" >
</TextView>

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

id : มีชื่อตัวแปรว่า textView
width : กว้าง เท่ากับขนาดของ ข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้ ยังไม่ได้มีการกําหนดค่าใดๆ
height : สูง เท่ากับขนาดของ ข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้ ยังไม่ได้มีการกําหนดค่าใดๆ
text : กําหนดข้อความว่า TextSize

<SeekBar
android:id = "@+id/seekbar"
android:layout_width = "250dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "20dip"
android:max = "25" >
</SeekBar>

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

id : มีชื่อตัวแปรว่า seekbar
width : กว้าง เท่ากับ 250 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ ความสูงปกติของ Seekbar
max : เป็นการกําหนดค่าสูงสุดไว้ที่ 25 pt
import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class SeekBarDemo extends Activity {

TextView textView;
SeekBar seekBar;

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

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

seekBar = (SeekBar)findViewById(R.id.seekbar);
seekBar.setOnSeekBarChangeListener( new SeekBar.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
textView.setTextSize( (float)seekBar.getProgress()+14 );
}
});

}
}

TextView textView;
SeekBar seekBar;

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

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

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

seekBar = (SeekBar)findViewById(R.id.seekbar);

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

seekBar.setOnSeekBarChangeListener( new SeekBar.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
textView.setTextSize( (float)seekBar.getProgress()+14 );
}
});

Code Java ในการการกําหนดเหตุการณ์ เมื่อ มีการ เลื่อน SeekBar

เราจะใช้ฟังก์ชัน OnSeekBarChangeListener() ซึ่งภายในมี ฟังก์ชันอยู่อัก 3 ตัว คือ
onStopTrackingTouch(SeekBar seekBar)

เมื่อ หยุด การเลื่อน , หยุด คลิก Tab บน SeekBar

StartTrackingTouch(SeekBar seekBar)

เมื่อ เริ่ม การเลื่อน , เริ่ม คลิก Tab บน SeekBar

onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)

ขณะที่ Tab บน SeekBar ถูกเลื่อน

 ในที่นี้ จะใช้ฟังก์ชันแค่ในส่วนของ onProgressChanged() เท่านั้น
โดยที่ เมื่อมีการเลือน ขนาดของตัวอักษรจะเปลี่ยน ด้วยฟังก์ชัน setTextSize( float )

*สําหรับ SeekBar จะมีค่าต่ําสุดที่ 0 เสมอ ส่วนค่ามากสูกกําหนดได้ ในที่นี้เรากําหนดไว้ที่ 25

SeekBar มี Method ที่จะรับค่าจาก SeekBar ในตําแหน่งที่
Tab อยู่ คือ getProgress()

วิธีการ
1.เอาค่าจาก SeekBar ที่ตําแหน่งที่ Tab อยู่ แต่ค่าต่ําสุดของ SeekBar คือ 0
ดังนั้นเราจะเอาค่าที่ได้ + 14 นั่นคือ ขนาดต่ําสุดของตัวอักษร คือ 14 จะได้ว่า

seekBar.getProgress()+14

2.เอาค่าที่ได้ไปจัดการกับขนาดของัวอักษร ด้วยฟังก์ชัน setTextSize( float )
แต่เนื่องจาก SeekBar ให้ค่าเป็น Integer เราจึงต้องแปลง Integer ให้เป็น Float จะได้ว่า

textView.setTextSize( (float)seekBar.getProgress()+14 );

drbomkung@gmail.com