Android 사용자 정의 뷰 색상 선택 기 구현

Android 사용자 정의 View 색상 선택 기 는 수평,세로 로 색상 을 선택 할 수 있 습 니 다.SeekBar 와 같은 방식 으로 슬라이딩 을 통 해 색상 을 선택 할 수 있 습 니 다.
효과 도

xml 속성
1.indicator Color 지시 점 색상
2.indicator 지시 점 사용 여부
3.오리 엔 테 이 션 방향
수평 수평
수직 수직
쓰다
\library\src...\ColorPickerView.java 와\library\\src\main\res\values\attrs.xml 파일 을 항목 에 복사 하면 사용 할 수 있 습 니 다.
예시:
xml 에서 사용:

<com.duan.colorpicker.ColorPickerView <!--    -->
 android:layout_width="50dp"
 android:layout_height="200dp"
 app:indicatorEnable="true"
 app:indicatorColor="#fff"
 app:orientation="vertical" />

자바 에서 사용:

...
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 ColorPickerView picker = (ColorPickerView) findViewById(R.id.colorPickerView);
 picker.setIndicatorColor(Color.GREEN);
 picker.setOrientation(ColorPickerView.Orientation.HORIZONTAL);
 picker.setColors(Color.DKGRAY,Color.RED,Color.WHITE);
 picker.setOnColorPickerChangeListener(new ColorPickerView.OnColorPickerChangeListener() {
  @Override
  public void onColorChanged(ColorPickerView picker, int color) {
  // TODO
  }

  @Override
  public void onStartTrackingTouch(ColorPickerView picker) {
  // TODO

  }

  @Override
  public void onStopTrackingTouch(ColorPickerView picker) {
  // TODO

  }
 });
 }
...

해석 을 실현 하 다
구성
지시 점:SeekBar 와 유사 한 슬라이더,미끄럼 지시 점 을 통 해 색상 선택
색상 표시 줄:선택 가능 한 색상 배치

색상 바 는 Paint 의 setShader 방법 을 통 해 LinearGradient 그 라 데 이 션 착색 기 를 사용 하여 그립 니 다.
지시 점 은 일반적인 원 일 뿐 음영 을 넣 고 Paint 의 setShadow Layer 방법 으로 이 루어 집 니 다.이 방법 을 사용 할 때 하드웨어 가속 을 닫 아야 합 니 다.
2 논리 실현
public class ColorPickerView extends View
컨트롤 은 View 에서 계승 합 니 다.
2.1 onMeasure
onMeasure 방법 으로 컨트롤 크기 측정 완료.컨트롤 은 최소 너비 와 높이 를 정의 하기 때문에 지정 한 컨트롤 의 너비 가 높 고 지정 한 값 이 최소 너비 보다 작 으 면 지정 이 잘못 되 었 습 니 다.
2.2 onLayout
onLayout 방법 이 비교적 관건 적 입 니 다.이 방법 에서 다음 과 같은 임 무 를 완성 해 야 합 니 다.
1.컨트롤 사용 가능 한 공간 계산
2.지시 점 의 좌표 초기 화
3.색상 표시 줄 의 경계 계산
4.색상 바 의 색상 설정(기본 그 라 데 이 션 색상)
4.비트 맵 두 장 초기 화(하 나 는 색상 표시 줄 그리 기,하 나 는 지시 점 그리 기)
2.2.1 지시 점 좌표 의 확정:
초기 화 할 때 기본적으로 지시 점 을 컨트롤 의 중심 에 두 고 그 위 치 는 onTouchEvent 방법 으로 제어 하 며 onTouchEvent 방법 에서 다시 그리 기 알림 과 현재 색상 을 선택 합 니 다.
2.2.2 색상 바 경계 확인:
색상 막대 와 지시 점 의 크기 비례 계산 방식:저 는 컨트롤 의 사용 가능 한 공간(상하 좌우 padding 을 제외 한 나머지 공간)을 9 부 로 나 누 었 습 니 다.이 9 부의 배분 방식 은 이 렇 습 니 다.
컨트롤 이 이때 수평 방향 이 고 너비 가 높이 보다 크다 고 가정 합 니 다(이것 은 일반적인 상황 입 니 다.컨트롤 방향 이 수평 이 고 너비 가 높이 보다 작 을 때 경 계 는 특수 한 계산 을 해 야 합 니 다.컨트롤 방향 은 세로 이 고 너비 가 높이 보다 큰 경우 도 특수 처리 가 필요 합 니 다).높이 를 기수(너비 가 높 고 짧 은 쪽 을 기수 로)로 평균 적 으로 분배 합 니 다.즉,높이/9=각 부의 크기 입 니 다.
1/9 여백
2/9 지시 점 이 색상 막대 위 에 있 는 부분
3/9 색상 스 트 립 높이
2/9 지시 점 은 색상 막대 아래 부분 에 있 습 니 다.
1/9 여백
이렇게 나 누 면 원 의 지름 이 9 부 중 7 부 를 차지 하고 색깔 은 3 부 를 차지 하 며 2 부 는 흰색 을 남 기 는 것 이 고도 의 분배 상황 임 을 알 수 있다.색상 바 의 너 비 는 다음 과 같은 조건 을 만족 시 킵 니 다.사용 가능 한 너 비 를 바탕 으로 좌우 로 지시 점 반지름 의 너 비 를 남 깁 니 다.이것 은 지시 점 이 좌우 점 으로 미 끄 러 질 때 공간 을 남 겨 지시 점 에 표시 하 는 동시에 지시 점 원심 이 전체 색상 바 를 완전 하 게 쓸 수 있 도록 하기 위해 서 입 니 다.세로 방향의 측정 계산 논리 도 마찬가지다.
특수 상황:
특수 처리 가 필요 한 두 가지 상황 이 있다.
1.컨트롤 은 수평 방향 입 니 다.이 때 컨트롤 의 사용 가능 한 폭 은 사용 가능 한 높이 보다 작 습 니 다.
2.컨트롤 은 세로 방향 입 니 다.이 때 컨트롤 의 사용 가능 한 폭 은 사용 가능 한 높이 보다 큽 니 다.
이 두 가지 상황 의 처리 논 리 는 똑 같 습 니 다.첫 번 째 상황 을 예 로 들 면 이때 도 짧 은 변(이때 너비)을 기수 로 9 부 로 나 누 어 계산 하면 좌우 에 각각 원 반지름 의 폭 을 남 깁 니 다.이때 원 의 지름 은 컨트롤 이 사용 할 수 있 는 너비 의 7/9 를 차지 하고 색채 의 좌우 에 각각 3.5/9(지시 점 반지름)의 공간 을 남 깁 니 다.그러면 색상 바 의 너 비 는 9/9-(7/9)=2/9,2/9<7/9,그리고 색상 바 와 지시 점 이 모두 가운데 에 표시 되 어 있어 지시 점 의 대부분 이 가 려 지고 심지어 색상 바 를 완전히 가 릴 수 있다.
해결 방법:
첫 번 째 상황 에 대해 서 는 9 부 로 나 뉘 는 기수 가 너비(짧 은 변)의 1/6(컨트롤 은 기본적으로 최소 너비 가 있 고 기본 값 의 긴 변 과 짧 은 변 의 비 는 6 대 1)입 니 다.
두 번 째 경우 기 수 를 높이 의 1/6 로 한다.
부족:
컨트롤 이 수평 방향 이 라 고 가정 하면 컨트롤 의 사용 가능 한 폭 은 사용 가능 한 높이 보다 크 지만 너비 와 높 은 차 이 는 매우 작다.이 경우 에 도 지시 점 은 대부분 가 려 지 거나 색상 바 를 완전히 가 릴 수 있 으 며,이 경우 처리 되 지 않 아 이용자 가 통제 할 수 밖 에 없다.테스트 를 통 해 이런 상황 에서(수평 방향,너비 가 높 음)너비 가 3 대 1 보다 크 면 효과 가 비교적 좋 으 므 로 너비 가 3 대 1 보다 크 도록 해 야 한다.수직 방향 은 같은 문제 가 있 는데 다른 것 은 이때 높 고 넓 은 비례 가 3 대 1 보다 크 도록 해 야 한 다 는 것 이다.
2.2.3 왜 비트 맵 두 장 을 사용 하 는 지
onDraw 방법 은 원 각 사각형 을 직접 그리고 지시 점(원)을 그 리 는 것 이 아 닙 니 다.이렇게 하면 두 부분 을 한 장의 비트 맵 에 직접 그 려 서 서로 덮어 쓰 고 현재 지시 점 이 가리 키 는 색 을 얻 는 데 불리 합 니 다.따라서 두 장의 비트 맵 을 사용 합 니 다.한 장 은 색상 바 를 그립 니 다.한 장 은 지시 점 을 그립 니 다.onDraw 는 각각 이 두 장의 비트 맵 을 그립 니 다.색 을 채취 할 때 색상 바 가 비트 맵 에 대응 하 는 픽 셀 점 의 색 을 가 져 오 면 됩 니 다.
비트 맵 에서 지정 한 색 을 가 져 오 는 방법 은 Bitmap 의 getPixel(int x,int y)방법 을 사용 하 는 것 입 니 다.이 방법 은 비트 맵 에서 x,y 가 지정 한 점 픽 셀 을 가 져 올 수 있 습 니 다.이 픽 셀 에 따라 이 점 의 색 을 해석 할 수 있 습 니 다.
이 동시에 컨트롤 의 그리 기 효율 을 높 일 수 있 습 니 다.대부분의 경우 색상 막대 에 있 는 선택 가능 한 색상 은 변 하지 않 습 니 다.이 때 선택 가능 한 색상 이 변 한 후에 생 성 된 비트 맵 을 컨트롤 에 직접 그 릴 수 있 습 니 다.이 비트 맵 을 다시 그 릴 필요 가 없습니다.지시 점도 마찬가지 입 니 다.색상 을 선택 할 때(미끄럼 지시 점)지시 점 비트 맵 을 그 리 는 좌 표를 바 꾸 면 됩 니 다.지시 점 의 비트 맵 을 다시 만 들 필요 가 없습니다.
2.3 onDraw
onDraw 방법 은 그 리 는 것 을 책임 집 니 다.그 릴 때 지시 점 에 대응 하 는 비트 맵 과 색상 바 가 대응 하 는 비트 맵 을 다시 그 려 야 하 는 지 판단 하고 필요 하면 다시 그 린 다음 에 두 장의 비트 맵 을 컨트롤 에 그립 니 다.그렇지 않 으 면 두 장의 비트 맵 을 컨트롤 에 직접 그립 니 다.
코드 에 많은 주석 을 썼 으 니 주석 을 참조 하여 이해 할 수 있다.
Github 이 올 라 왔 습 니 다.여기 서 찾 을 수 있 습 니 다DuanJiaNing/ColorPicker
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.