Android 로그 인 인터페이스 사용자 프로 토 콜 솔 루 션 자세히 알 아 보기

먼저 위의 그림 에서 실현 해 야 할 것 을 보 자.

사용자 프로 토 콜.png
일반적으로 모든 app 은 이 사용자 프로 토 콜 읽 기 와 관련 된 기능 을 가지 고 있 습 니 다.예전 에 한 프로 토 콜 도 한 줄 로 되 어 있 고 복잡 도가 전혀 없습니다.checkbox 에 textview 를 추가 하여 해결 할 수 있 습 니 다.그러면 그림 에서 이런 복잡 한 것 을 어떻게 실현 해 야 합 니까?
그 를 보 니 신 들 이 다 르 고 어 려 운 점 이 있다.
1.선택 상 자 는 텍스트 로 감 싸 여 있 습 니 다.단순 한 checkbox 와 textview 는 이 루어 지지 않 습 니 다.선택 상 자 는 텍스트 왼쪽 에 있 기 때 문 입 니 다.
2.프로 토 콜 파일 이 많 습 니 다.항목 이 정 해 지지 않 습 니 다.파일 은 서버 가 되 돌아 오 는 것 이 고 모든 파일 중간 에 색 이 다른 점 이 있 습 니 다.
3.모든 파일 에 클릭 이벤트 가 있 습 니 다.파일 을 클릭 하면 해당 하 는 상세 한 정 보 를 볼 수 있 습 니 다.
사실 이렇게 보면 많은 사람들 이 textview 의 span 으로 해결 할 수 있다 는 것 을 알 고 있 습 니 다.주판 의 생각 내용 은 복습 하지 않 고 코드 를 직접 올 립 니 다.
먼저 프로 토 콜 데 이 터 를 시 뮬 레이 션 하여 읽 을 지 여부 의 변 수 를 만 듭 니 다.

String[] protocols = {
      "《          》",
      "《          》",
      "《          》",
      "《        》",
      "《    》"
  };
 private boolean isChecked;

그리고 우 리 는 문자열 을 만 들 기 위해 첫 번 째 빈 칸 을 그림 으로 바 꿉 니 다.
이 어 이 문자열 의 SpannableStringBuilder 를 만 든 다음 setIconspn 방법 을 사용 하여 이 문자열 의 첫 번 째 문 자 를 아이콘 으로 바 꿉 니 다(기본 값 은 선택 상태).setIconspn 방법 은 아래 에 있 습 니 다.
그리고 첫 번 째 문자 위 치 를 위 한 클릭 이벤트 imagClick 을 설정 합 니 다.선택 한 상태 에 따라 아이콘 의 변 화 를 설정 합 니 다.

final String string = "       ";
    //  (     )
    spannableStringBuilder = new SpannableStringBuilder(string);
    setIconSapn(spannableStringBuilder, R.mipmap.app_login_unchecked);
    //         
    ClickableSpan imagClick = new ClickableSpan() {
      @Override
      public void onClick(View widget) {
        //      
        if (isChecked) {
          setIconSapn(spannableStringBuilder, R.mipmap.app_login_unchecked);
        } else {
          setIconSapn(spannableStringBuilder, R.mipmap.app_login_checked);
        }
        isChecked = !isChecked;
        mView.setProtocl(spannableStringBuilder);
      }

      @Override
      public void updateDrawState(TextPaint ds) {
        super.updateDrawState(ds);
        ds.setUnderlineText(false);
        ds.setColor(Color.WHITE);
      }
    };
    spannableStringBuilder.setSpan(imagClick, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

setIconspn 방법

/**
   *         
   *
   * @param spannableStringBuilder
   * @param resId
   */
  private void setIconSapn(SpannableStringBuilder spannableStringBuilder, int resId) {
    MyImageSpan imageSpan = new MyImageSpan(mContext, BitmapFactory.decodeResource(mView.getResources(), resId), 2);
    spannableStringBuilder.setSpan(imageSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
  }

시스템 의 ImageSpan 을 사용 하지 않 은 것 을 볼 수 있 습 니 다.이 문 자 는 줄 이 바 뀌 었 기 때문에 시스템 의 ImageSpan 아이콘 이 가운데 에 있 을 수 없습니다.그래서 저 희 는 ImageSpan 을 사용자 정의 하고 draw 방법 을 다시 써 서 이 문 제 를 해결 하 였 습 니 다.코드 는 다음 과 같 습 니 다.

@Override
  public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
           Paint paint) {

    //draw       ImageSpan   DynamicDrawableSpan    ， DynamicDrawableSpan  ，  getCachedDrawable()，
    //      ，     ，    ImageSpan  getrawable()  ，           drawable ID ，   id   
    // drawable    ，     drawable  
    Drawable drawable = getDrawable(); //  imageSpan      drawable  
    canvas.save();

    //                 
    Paint.FontMetricsInt fm = paint.getFontMetricsInt();

    //      ，   Bottom  )
    int transY = bottom - drawable.getBounds().bottom;
    if (mVerticalAlignment == ALIGN_BASELINE) {
      transY -= fm.descent;
    } else if (mVerticalAlignment == ALIGN_FONTCENTER) {  //      ，            
      //         （                                  ）
      // y+ascent           ，y+descent         ，（    +    ）/2=         
      transY = ((y + fm.descent) + (y + fm.ascent)) / 2 - drawable.getBounds().bottom / 2;
    }

    canvas.translate(x, transY);
    drawable.draw(canvas);
    canvas.restore();
  }

이 어 우리 가 가 져 온 프로 토 콜 그룹 을 옮 겨 다 니 며 이전 string 에 하나씩 추가 하고 모든 프로 토 콜 에 파란색 으로 설정 하 며 클릭 이 벤트 를 설정 한 다음 최종 SpannableStringBuilder 로 돌아 갑 니 다.(클릭 이 벤트 를 먼저 추가 하지 않 으 면 전경 색 이 클릭 이벤트 의 색상 이 옅 어 집 니 다)

for (int i = 0; i < protocols.length; i++) {
      final String protocol = protocols[i];
      SpannableStringBuilder protocolStringBuild = new SpannableStringBuilder(protocol);
      //  
      //  span
      final int finalI = i;
      ClickableSpan clickableSpan = new ClickableSpan() {
        @Override
        public void onClick(View widget) {
          //      
          mView.showProtocol(protocol, finalI, protocols.length);
        }

        @Override
        public void updateDrawState(TextPaint ds) {
          super.updateDrawState(ds);
          ds.setUnderlineText(false);
          ds.setColor(Color.WHITE);
        }
      };
      protocolStringBuild.setSpan(clickableSpan, 0, protocol.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
      //  
      ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(mView.getResources().getColor(R.color.colorPrimary));
      protocolStringBuild.setSpan(foregroundColorSpan, 0, protocol.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
      spannableStringBuilder.append(protocolStringBuild);
      // 
      if (i != protocols.length - 1) {
        SpannableStringBuilder dotStringBuild = new SpannableStringBuilder("、");
        ForegroundColorSpan dotSpan = new ForegroundColorSpan(mView.getResources().getColor(R.color.color_66));
        dotStringBuild.setSpan(dotSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        spannableStringBuilder.append(dotStringBuild);
      }
    }
    return spannableStringBuilder;

마지막 효과 도 는 왠 지 녹화 가 잘 안 돼 요.

프로 토 콜.gif
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.