2013年10月22日 星期二

Android 使用者自訂背景顏色 使用 SeekBar

在某些畫面或app中作到客製化樣式可以製作一個使用者自訂背景、文字....的顏色
這裡就大概介紹一下

public class MainActivity extends Activity {
    Button ok;
    TextView tv,background_rgb,changeBackground;
SeekBar background_r,background_g,background_b;
int seekR,seekG, seekB;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ok = (Button)findViewById(R.id.connfirmed);
tv = (TextView) findViewById(R.id.tv);
background_rgb = (TextView) findViewById(R.id.code_color_rgb);
changeBackground = (TextView) findViewById(R.id.changeBackground);
background_r = (SeekBar) findViewById(R.id.background_r);
background_g = (SeekBar) findViewById(R.id.background_g);
background_b = (SeekBar) findViewById(R.id.background_b);

OnSeekBarChangeListener backgroundChangeListener = new OnSeekBarChangeListener(){
                        //onProgressChanged  進度條只要拖動就觸發此事件(持續觸發)
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {

                                 //取得當前SeekBar的值
seekR = background_r.getProgress();
seekG = background_g.getProgress();
seekB = background_b.getProgress();

                                 //動態顯示目前所設定的顏色
changeBackground.setBackgroundColor(0xff000000 + seekR * 0x10000+ seekG * 0x100 + seekB);
                                 //取得各RGB之值,為多少
background_rgb.setText("R:"+seekR+" G:"+seekG+" B:"+seekB);
}

                        //onStartTrackingTouch  進度條開始拖動就觸發此事件(僅一次觸發事件)
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

                        //onStopTrackingTouch  拖動結束時則觸發此事件
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

};
                //設定SeekBar監聽事件
background_r.setOnSeekBarChangeListener(backgroundChangeListener);
background_g.setOnSeekBarChangeListener(backgroundChangeListener);
background_b.setOnSeekBarChangeListener(backgroundChangeListener);

                //當按下確定則改變背景顏色
ok.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
tv.setBackgroundColor(0xff000000 + seekR * 0x10000+ seekG * 0x100 + seekB);
}
});
}
}


xml 

<!-- SeekBar android:max="255" 最大值設定為 255  -->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="false"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/background_color_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/changeBackground"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="35dp"
        android:text="背景顏色" />

    <TextView
        android:id="@+id/changeBackground"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="58dp"
        android:background="#fff" />

    <SeekBar
        android:id="@+id/background_r"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/changeBackground"
        android:layout_below="@+id/changeBackground"
        android:layout_centerHorizontal="true"
        android:max="255"/>

    <SeekBar
        android:id="@+id/background_g"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/background_r"
        android:layout_below="@+id/background_r"
        android:max="255"/>

    <SeekBar
        android:id="@+id/background_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignRight="@+id/background_g"
        android:layout_below="@+id/background_g"
        android:max="255"/>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal" >

        <Button
            android:id="@+id/connfirmed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="確定" />
    </LinearLayout>

    <TextView
        android:id="@+id/code_color_rgb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/background_color"
        android:textColor="#FFF" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/background_b"
        android:layout_above="@+id/ll" />


</RelativeLayout>