Android 개발 의 ProgressBar 글꼴 은 진행 막대 가 불 러 올 때 스크롤 합 니 다.

인터넷 에서 ProgressBar 스크롤 효과 에 관 한 많은 것 을 뒤 졌 지만 프로젝트 에 적합 한 이런 효 과 를 찾 지 못 했 기 때문에 스스로 이 글 을 쓰 고 쓰기 과정 을 기록 하여 여러분 께 참고 하 겠 습 니 다.최종 효과 도 를 먼저 보 겠 습 니 다.

저 는 LICEcap 소프트웨어 로 녹음 한 gif 그림 을 사용 하고 있 습 니 다.효과 가 약간 떨 어 졌 습 니 다.어떤 인형 이 gif 를 녹음 하 는 소프트웨어 가 있 는 지 알려 주세요.동생 은 여기 서 먼저 감 사 를 드 립 니 다.
먼저 xml 코드 를 보 세 요.두 개의 시스템 컨트롤 만 있 고 하나의 TextView 와 하나의 ProgressBar 만 있 습 니 다.Button 은 진도 바 의 효 과 를 편리 하 게 터치 하기 위해 실제 프로젝트 에서 수요 에 따라 할 수 있 습 니 다.우선 xml 의 코드 를 보십시오.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:layout_margin="5dp">
 <TextView
  android:layout_marginTop="50dp"
  android:id="@+id/progress_precent"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="0%"
  android:textColor="#ff00"
  android:textSize="12sp"
  android:padding="3dp"/>
 <ProgressBar
  android:id="@+id/pb_progressbar"
  style="?android:attr/progressBarStyleHorizontal"
  android:layout_width="match_parent"
  android:layout_height="5dp"
  android:max="100"
  android:progress="0"
  android:progressDrawable="@drawable/progressbar_color" />
 <Button
  android:id="@+id/btn_start"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="30dp"
  android:text="start" />
</LinearLayout>

스타일:progressbarcolor.xml

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <!--    gradient   ,corners       -->
 <item android:id="@android:id/background">
  <shape>
   <corners android:radius="5dp" />
   <solid android:color="#9a9a9a" />
  </shape>
 </item>
 <!--     -->
 <item android:id="@android:id/progress">
  <clip>
   <shape>
    <corners android:radius="5dp" />
    <solid android:color="#E14f50" />
   </shape>
  </clip>
 </item>
 </layer-list>

onCreate()방법 에서 컨트롤 의 폭 을 얻 을 수 있 습 니 다.코드 는 다음 과 같 습 니 다.

 //   progressBar     
  ViewTreeObserver vto2 = pbProgressbar.getViewTreeObserver();
  vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
   @Override
   public void onGlobalLayout() {
    pbProgressbar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    width = pbProgressbar.getWidth();
    Log.i("TAG", "MainActivity onCreate()=="+pbProgressbar.getWidth());
   }
  });

먼저 구체 적 인 실현 방향 을 말 한 다음 에 최종 코드 를 붙인다.
사고방식 을 실현 하 는 것 은 우리 가 ProgressBar 가 최대 치 에 도달 해 야 할 때 TextView 의 위치 가 가장 먼 곳 으로 이동 하 는 것 이다.progressBar 의 임의의 백분율 을 얻 으 려 면 백분율 에 대응 하 는 위치 로 이동 할 수 있 습 니 다.우 리 는 모든 백분율 로 이동 하 는 거 리 를 알 아야 합 니 다.아직 분명하게 말 하지 못 하면 아래 의 공식 을 보면 더 잘 이해 할 수 있다.
    // 진도 항목 의 가장 작은 단 위 는 기본적으로 1 이 고 너 도 다른 수치 일 수 있다.나 는 demo 에서 편리 하 게 1 을 사용 했다.
    진도 바 의 최소 단위/진도 바 의 최대 값=백분율 로 이동 하 는 거리/총 거리(컨트롤 의 총 너비)
    유도 가능:
    모든 백분율 로 거 리 를 이동 합 니 다=(진도 바 의 최소 단위/진도 바 의 최대 값)*총 거리(컨트롤 의 총 너비)
모 바 일 애니메이션 효 과 를 해 야 하기 때문에 우 리 는 ANR 을 피하 기 위해 직접 스 레 드 를 열 어 인터페이스 를 제어 합 니 다.주요 코드 는 다음 과 같 습 니 다.    

 //     
    new Thread(new Runnable() {
      @Override
      public void run() {
        //         
        scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width);
        for (int i = 1; i <= status; i++) {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              currentStatue++;
              currentPosition += scrollDistance;
              pbProgressbar.incrementProgressBy(1);
              //          
              progressPrecent.setTranslationX(currentPosition);
              progressPrecent.setText(currentStatue + "%");
            }
          });
          try {
            Thread.sleep(80);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();

큰 성 과 를 거 두 었 으 나 우리 가 실 행 했 을 때 ProgressBar 가 최대 치 에 이 르 렀 을 때 위의 글꼴 은 화면 범 위 를 넘 어 보이 지 않 았 다.효 과 는 그림 과 같다.

이것 은 사용자 에 게 큰 곤 혹 스 러 움 을 주 었 습 니 다.마음 을 가 라 앉 히 고 분석 해 보면 TextView 가 ProgressBar 데이터 의 오른쪽 에 있 고 언어 기초 가 좋 지 않다 는 것 을 알 수 있 습 니 다.위 그림 을 보 겠 습 니 다.

이 를 통 해 알 수 있 듯 이 데이터 가 0%일 때 progressBar 에 대응 하 는 데이터 의 오른쪽 에 있 고 데이터 가 최대 치 일 때 화면 을 초과 하여 표시 하지 못 하면 부족 하 다.현재 progressBar 가 최대 치 일 때 도 표시 하려 면 오프셋 거리 에 글꼴 의 너비 와 글꼴 오른쪽 에 있 는 Padding 값 이 progressBar 너비 보다 클 때 오프셋 되 지 않 아야 합 니 다.이어서 코드 를 다음 과 같이 수정 합 니 다.

 //     
    new Thread(new Runnable() {
      @Override
      public void run() {
        //         
        scrollDistance = (float) ((1.0 / pbProgressbar.getMax()) * width);
        for (int i = 0; i < status; i++) {
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              //           
              pbProgressbar.incrementProgressBy(1);
              currentStatue++;
              tvPrecent.setText(currentStatue + "%");
              //        
              tvWidth = tvPrecent.getWidth();
              currentPosition += scrollDistance;
              //          
              //         
              if (tvWidth + currentPosition <= width - tvPrecent.getPaddingRight()) {
                tvPrecent.setTranslationX(currentPosition);
              }
            }
          });
          try {
            Thread.sleep(80);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();

우 리 는 실행 을 하고 효 과 를 살 펴 보 자.

여기까지 만 하면 우 리 는 완성 할 것 입 니 다.잘 모 르 거나 잘못 쓴 곳 이 있 으 면 댓 글 의 지적 을 환영 합 니 다.제 가 제일 먼저 대답 하 겠 습 니 다.원본 코드 가 필요 한 친 구 는 github 에 가서 다운로드 할 수 있 고 두 손 으로 github 주 소 를 보 낼 수 있 습 니 다ProgressBar 가 불 러 올 때 글꼴 을 스크롤 합 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 개발 의 ProgressBar 글꼴 입 니 다.진도 바 가 불 러 오 면서 구 르 는 것 이 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!