woong's

Android Color Picker 사용 하기 본문

Develop/Android

Android Color Picker 사용 하기

dlsdnd345 2016. 2. 14. 16:24

Android Color Picker 사용 하기

 

 

안녕하세요 .

위젯 공부하면서 위젯 색을 바꾸려다보니 Android Color Picker 를 이용하게 되어 포스트를 쓰고 있습니다 ^^

Android Color Picker 라이브러리를 통해서 구현해본 Color Picker 입니다 .





 


구현해본 화면구성은 버튼을 선택해서 Color Picker 를 띄우고 색을 선택하고 투명도 , 채도를 설정한 컬러를 

버튼 배경색으로 넣어본 예제 입니다 .


라이브러리 사이트 

 

https://github.com/LarsWerkman/HoloColorPicker

 

사용 방법


1. 위 링크를 통해 라이브러리 다운로드 및 라이브러리 삽입

2. xml 코드 작성

3. Activity 코드 작성


 

  • 위 링크를 통해 라이브러리 다운로드 및 라이브러리 삽입

 

 

 

오른쪽 하단 ZIP 을 다운로드 합니다 .


다운 받은 프로젝트를 이클립스에 Import 를 진행 합니다 .


Color picker 를 사용할 프로젝트에 Library 프로젝트를 넣어 줍니다 .




프로젝트 오른쪽 클릭 > Properties 선택




Android > Livrary Add 선택




HoloColorPicker-master 선택 > OK


이제 Color Picker 를 사용할 준비가 완료 되었습니다 .

 

 

 

 

  •  xml 코드 작성

 


 main.xml 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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:orientation="vertical"
    tools:context=".MainActivity" >
 
    <Button
        android:id="@+id/color_btn"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:onClick="startColorActivity"
        android:text="색을 선택해 주세요"
         />
 
</LinearLayout>

 

 

Main.xml 은 특이사항이 없습니다 .

 

color.xml

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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:orientation="vertical"
    tools:context=".MainActivity" >
 
    <com.larswerkman.holocolorpicker.ColorPicker
        android:id="@+id/picker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="채도" />
 
    <com.larswerkman.holocolorpicker.SVBar
        android:id="@+id/svbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <com.larswerkman.holocolorpicker.SaturationBar
        android:id="@+id/saturationbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="투명도" />
 
    <com.larswerkman.holocolorpicker.OpacityBar
        android:id="@+id/opacitybar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <com.larswerkman.holocolorpicker.ValueBar
        android:id="@+id/valuebar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
 
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="getColor"
        android:text="확인" />
 
</LinearLayout>

 

 

 color.xml 에서는 라이브러리를 통해서 picker , bar 를 구성한것을 볼수 있습니다 .

 

 

  • Activity 코드 작성

 

 

MainActivity


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
package com.example.colorpickersample;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
 
import com.larswerkman.holocolorpicker.ColorPicker;
 
public class MainActivity extends Activity {
 
    private final static int COLOR_ACTIVITY = 1;
    
    int color;
    Button colorBtn;
    Intent intent;
    ColorPicker picker;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        colorBtn = (Button)findViewById(R.id.color_btn);
    }
 
    public void startColorActivity(View view){
        
        intent = new Intent(MainActivity.this, ColorActivity.class);
        if(color != 0){
            intent.putExtra("oldColor",color);
        }
        startActivityForResult(intent, COLOR_ACTIVITY);
    }
    
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        
        if(resultCode == RESULT_OK){
        
        if(requestCode == COLOR_ACTIVITY){
                color = data.getIntExtra("color", 0);
                colorBtn.setBackgroundColor(color);
            }
        }
    }
    
}
 

 

 

MainActivity 에서는 버튼을 선택해서 ColorActivity를 띄우고 선택한 값을 받아서 버튼 배경색을 바꾸는 코드입니다 .

또한 oldColor 를 ColorActivity 로 넘겨 picker 에 옛날 color 를 표시해 주고 있습니다 .

 

ColorActivity


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package com.example.colorpickersample;
 
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
 
import com.larswerkman.holocolorpicker.ColorPicker;
import com.larswerkman.holocolorpicker.OpacityBar;
import com.larswerkman.holocolorpicker.SVBar;
import com.larswerkman.holocolorpicker.SaturationBar;
import com.larswerkman.holocolorpicker.ValueBar;
 
public class ColorActivity extends Activity {
 
    Intent intent ;
    ColorPicker picker;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_color);
 
        intent = getIntent();
        int oldColor = intent.getIntExtra("oldColor", 0);
 
        picker = (ColorPicker) findViewById(R.id.picker);
        SVBar svBar = (SVBar) findViewById(R.id.svbar);
        OpacityBar opacityBar = (OpacityBar) findViewById(R.id.opacitybar);
        SaturationBar saturationBar = (SaturationBar) findViewById(R.id.saturationbar);
        ValueBar valueBar = (ValueBar) findViewById(R.id.valuebar);
 
        picker.addSVBar(svBar);
        picker.addOpacityBar(opacityBar);
        picker.addSaturationBar(saturationBar);
        picker.addValueBar(valueBar);
 
        picker.getColor();
 
        if(oldColor != 0){
            picker.setOldCenterColor(oldColor);
        }else{
            picker.setOldCenterColor(picker.getColor());
        }
    }
 
    public void getColor(View view){
 
        intent.putExtra("color", picker.getColor());
        setResult(RESULT_OK, intent);
        finish();
    }
 
}
 

 

 ColorActivity 헥심 Activity 입니다 .


onCreate 메서드에서 picker , SVBar ,OpacityBar ,SaturationBar ,ValueBar 를 생성합니다 .

생성후 picker 에 각각의 상태바를 넣어줍니다 .


이렇게 진행하면 화면의 picker 를 움직여 색깔을 선택하고 확인버튼을 통해 MainActivity로 색깔을 넘겨 줍니다 .


라이브러리를 통해서 간단하게 Color Picker 를 만들수 있습니다 . 


저작자표시

'Develop > Android' 카테고리의 다른 글

Android ViewPager Fragment 사용하기  (0) 2016.02.14
Android ViewPager 사용하기  (0) 2016.02.14
Android widget configure 사용하기  (1) 2016.02.14
Android Widget ReSize 사용하기  (0) 2016.02.14
Android widget 사용하기  (0) 2016.02.14
공유하기 링크
'Develop/Android' Related Articles more
Comments