Android 사용자 정의 View 주소록 알파벳 인덱스 구현(위 챗 주소록 모방)

1.효과:우 리 는 많은 소프트웨어 의 주소록 이 오른쪽 에 알파벳 색인 기능 이 있 는 것 을 보 았 다.예 를 들 어 위 챗,샤 오미 주소록,QQ,그리고 미 단 선택 지역 등 이다.여기 서 나 는 미 단 이 도 시 를 선택 한 그림 을 캡 처 해서 보 았 다.

우 리 는 오늘 그림 의 오른쪽 모듈 의 색인 기능 을 실현 합 니 다.터치 디 스 플레이 를 포함 하여 선택 한 색인 자 모 를 표시 합 니 다.여기 서 제 UI 화면 은 주로 위 챗 의 화면 을 참조 하여 이 루어 집 니 다.그래서 여러분 도 위 챗 을 대조 하여 효 과 를 볼 수 있 습 니 다.아무 말 도 하지 않 고 효과 그림 만 이 가장 설득력 이 있 습 니 다!

2.분석:
우 리 는 이런 효 과 를 보고 그 가 어떻게 실현 되 었 는 지 속으로 생각 했다.
우선,이 는 사용자 정의 View 를 통 해 이 루어 질 것 입 니 다.안 드 로 이 드 가 이러한 컨트롤 을 제공 하지 않 았 기 때문에 다음은 우리 의 View 를 어떻게 사용자 정의 하 는 지 알 고 있 습 니 다.사용자 정의 View 의 가장 중요 한 두 가지 방법 은 바로 onDraw(Canvas canvas)와
onMeasure(int widthMeasureSpec,int height MeasureSpec)방법 은 물론 사용자 정의 ViewGroup 이 라면 반드시 이 루어 져 야 합 니 다.
onLayout(boolean changed,int left,int top,int right,int bottom)방법 은 사용자 정의 View 로 이 기능 을 실현 할 수 있 음 이 분명 합 니 다.효과 도 를 통 해 테 이 프 를 볼 수 있 습 니 다.이 영역 을 만 질 때 Toast 와 유사 한 상자 가 떠 서 선택 한 색인 내용 을 표시 합 니 다.그래서 View 의 onTouchEvent(MotionEvent event)이 벤트 를 다시 써 야 합 니 다.마지막 으로 부상 상자 의 실현 입 니 다.그럼 지금부터 인 코딩 을 시작 하 겠 습 니 다.
3.인 코딩 실현:
저 희 는 뷰 의 집행 순서에 따라 이 루어 집 니 다.
1.onMeasure(int widthMeasureSpec,int height MeasureSpec)방법 을 실현 합 니 다.이 방법의 기능 은 우리 의 너비 와 높이 를 측정 하고 코드 를 구체 적 으로 실현 하 는 것 입 니 다.

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec));
 }

여기 서 두 가지 방법 으로 measureWidth(int)와 measureHeight(int)를 정 의 했 습 니 다.방법 명 을 통 해 그 기능 이 각각 너비 와 높이 를 측정 하 는 것 임 을 잘 알 수 있 습 니 다.들 어가 서 어떻게 측정 하 는 지 보 세 요.

 /**
  *        ，        
  * @param widthMeaSpec    View     
  * @return      
  */
 private int measureWidth(int widthMeaSpec){
  /*  view   */
  int width ;
  /*     View     */
  int mode = MeasureSpec.getMode(widthMeaSpec) ;
  /*
  *     View    ，           ，
  *                     
  * */
  int size = MeasureSpec.getSize(widthMeaSpec) ;
  /*
  *   ，       
  *   View   ，    
  *  size ；
  * */
  if(mode == MeasureSpec.EXACTLY){
   width = size ;
  }else {
   /*           padding     */
   int desire = size + getPaddingLeft() + getPaddingRight() ;
   if(mode == MeasureSpec.AT_MOST){
    width = Math.min(desire,size) ;
   }else {
    width = desire ;
   }
  }
  mViewWidth = width ;
  return width ;
 }

이상 은 폭 을 측정 하 는 코드 입 니 다.높이 를 측정 하 는 코드 는 폭 을 측정 하 는 코드 와 대체적으로 비슷 해서 붙 이지 않 습 니 다.마지막 에 소스 코드 를 첨부 하 겠 습 니 다.
2.onDraw(Canvas c)방법 을 실현 합 니 다.이 방법 은 모두 가 잘 알 고 있다 고 믿 습 니 다.바로 이 색인 들 의 내용 을 View 에 그 려 서 선택 할 때 배경 색 의 변 화 를 포함 합 니 다.

 @Override
 protected void onDraw(Canvas canvas) {
  if(mTouched){
   canvas.drawColor(0x30000000);
  }
  for (int i = 0 ; i < mIndex.length ; i ++){
   mPaint.setColor(0xff000000);
   mPaint.setTextSize(mTextSize * 3.0f / 4.0f);
   mPaint.setTypeface(Typeface.DEFAULT) ;
   mPaint.getTextBounds(mIndex[i],0,mIndex[i].length(),mTextBound);
   float formX = mViewWidth/2.0f - mTextBound.width()/2.0f ;
   float formY = mTextSize*i + mTextSize/2.0f + mTextBound.height()/2.0f ;
   canvas.drawText(mIndex[i],formX,formY,mPaint);
   mPaint.reset();
  }
 }

제 가 onDraw 방법 에서 대체적으로 무슨 일 을 했 는 지 말씀 드 리 겠 습 니 다.첫째,배경 색 을 그립 니 다.올 라 오 자마자 그 리 는 것 이 아니 라 손가락 이 만 질 때 배경 색 을 그립 니 다.둘째,색인 내용 을 그립 니 다.여 기 는 현재 View 의 너비 와 높이 에 따라 내용 의 크기 와 위 치 를 결정 해 야 합 니 다.
3.onTouchEvent(MotionEvent event)방법의 실현

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  float y = event.getY() ;
  int index = (int) (y / mTextSize);
  if(index >= 0 && index < mIndex.length){
   Log.v("zgy","======index======="+index) ;
   selectItem(index);
  }
  if(event.getAction() == MotionEvent.ACTION_MOVE){
   mTouched = true ;
  }else if (event.getAction() == MotionEvent.ACTION_MOVE){
  }else {
   mFloatView.setVisibility(INVISIBLE);
   mTouched = false ;
  }
  invalidate();
  /*         */
  return true;
 }

코드 도 상대 적 으로 간단 합 니 다.먼저 현재 터치 점 을 얻 고 점 의 좌표 에 따라 색인 의 위 치 를 얻 으 며 색인 의 위 치 를 얻 습 니 다.
4.여기까지 사실은 우리 가 원 하 는 효 과 를 실현 했다.그러나 이렇게 해서 우 리 는 그것 을 활용 할 수 없다.여기 서 반전 인 터 페 이 스 를 정의 해 야 한다.

 /*        */
 public interface OnIndexSelectListener{
  /*       ，       */
  void onItemSelect(int position, String value) ;
 }

인 터 페 이 스 를 우리 가 어디 에 두 고 호출 할 까요?우리 가 손가락 을 눌 렀 을 때 이 럴 때 우 리 는 우리 가 누 른 색인 이 어떤 색인 인지 확인 해 야 합 니 다.미 끄 러 질 때 도 마찬가지 입 니 다.그래서 이것 은 상의 할 것 이 없 이 onTouchEvent(MotionEvent event)에 직접 넣 으 면 됩 니 다.

  float y = event.getY() ;
  int index = (int) (y / mTextSize);
  if(index >= 0 && index < mIndex.length){
   Log.v("zgy","======index======="+index) ;
   selectItem(index);
  }

selectitem(int)방법 중 실행 되 는 리 셋 방법 입 니 다.
5.선택 한 색인 내용 을 보 여 주 는 부유 상자 구현
Window Manager 용 기 를 사용 해 야 합 니 다.현실 적 인 View 가 이 위 에 붙 어 있 으 면 됩 니 다.손가락 을 눌 렀 을 때 View 가 표시 되도록 하고 표시 하지 않 으 면 됩 니 다.

  /*         */
  /*  windowManager*/
  mWindowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
  /*overly   ，  LayoutInflater   */
  mFloatView = LayoutInflater.from(getContext()).inflate(R.layout.overlay_indexview,null) ;
  /*       */
  mFloatView.setVisibility(INVISIBLE);
  /*          Sp*/
  mOverlyWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics()) ;
  mOverlyHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,70,getResources().getDisplayMetrics()) ;
  post(new Runnable() {
   @Override
   public void run() {
    WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams(mOverlyWidth,mOverlyHeight,
      WindowManager.LayoutParams.TYPE_APPLICATION,
      WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
        | WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
      PixelFormat.TRANSLUCENT) ;
    mWindowManager.addView(mFloatView,layoutParams);
   }
  }) ;

마찬가지 로 표 시 된 내용 을 바 꾸 려 면 리 셋 위 치 를 호출 하여 View 의 TextView 에 현재 색인 내용 을 설정 해 야 합 니 다.
자,이 View 의 코드 가 이렇게 많 습 니 다.
다음은 그의 Xml 와 부동 View 를 인용 한 Xml 도 붙 이 고,
인 용 된 레이아웃 파일

 <moon.wechat.view.IndexView
  android:layout_width="25dp"
  android:layout_height="match_parent"
  android:layout_alignParentRight="true"/>

부동 View 의 레이아웃 파일

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/overly_text"
 android:layout_width="70dp"
 android:layout_height="70dp"
 android:text="A"
 android:gravity="center"
 android:background="@drawable/bg_overly_text"
 android:textSize="40sp"
 android:textColor="#ffffffff"
 android:layout_gravity="center">
</TextView>

부동 뷰 배경

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
  <shape>
   <solid android:color="#88000000"/>
   <corners android:radius="5dp"/>
  </shape>
 </item>
</layer-list>

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!