programing

Android에서 진행률 표시줄을 사용자 지정하는 방법

bestprogram 2023. 8. 15. 11:16

Android에서 진행률 표시줄을 사용자 지정하는 방법

저는 제가 보여주고 싶은 앱을 만들고 있습니다.ProgressBar하지만 기본 안드로이드를 교체하고 싶습니다.ProgressBar.

그러면 어떻게 사용자 지정할 수 있습니까?ProgressBar?

그러려면 그래픽과 애니메이션이 필요합니까?

다음 게시물을 읽었지만 작동하지 않았습니다.

사용자 정의 진행률 표시줄 Android

사용자 정의ProgressBar진행률 표시줄의 배경 및 진행률에 대한 속성을 정의해야 합니다.

이름이 지정된 XML 파일을 만듭니다.customprogressbar.xml당신의res->drawable폴더:

custom_syslogbar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Define the background properties like color etc -->
    <item android:id="@android:id/background">
    <shape>
        <gradient
                android:startColor="#000001"
                android:centerColor="#0b131e"
                android:centerY="1.0"
                android:endColor="#0d1522"
                android:angle="270"
        />
    </shape>
   </item>

  <!-- Define the progress properties like start color, end color etc -->
  <item android:id="@android:id/progress">
    <clip>
        <shape>
            <gradient
                android:startColor="#007A00"
                android:centerColor="#007A00"
                android:centerY="1.0"
                android:endColor="#06101d"
                android:angle="270"
            />
        </shape>
    </clip>
    </item>
</layer-list> 

이제 다음을 설정해야 합니다.progressDrawable의 재산.customprogressbar.xml(그릴 수 있음)

XML 파일 또는 활동(실행 시)에서 이 작업을 수행할 수 있습니다.

XML에서 다음을 수행합니다.

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:progressDrawable="@drawable/custom_progressbar"         
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

런타임에 다음을 수행합니다.

// Get the Drawable custom_progressbar                     
    Drawable draw=res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawable
    progressBar.setProgressDrawable(draw);

편집: 수정된 xml 레이아웃

복합적인 경우ProgressBar이것처럼.

enter image description here

사용하다ClipDrawable.

참고: 사용하지 않았습니다.ProgressBar이 예에서는ClipDrawable을 사용하여 이미지를 클리핑하여 이를 달성했습니다.Animation.

A Drawable다른 것을 클립하는.Drawable이것을 근거로 하여Drawable의 현재 수준 값입니다.당신은 아이가 얼마나 많은지 조절할 수 있습니다.Drawable레벨에 따라 너비와 높이가 잘리고 전체 컨테이너의 위치를 제어하기 위한 중력도 잘립니다.Most often used to implement things like progress bars로 추첨 가능한 레벨을 높임으로써.setLevel().

참고: 드로잉 가능한 수준이 0일 때는 완전히 잘라지고 보이지 않으며, 10,000일 때는 완전히 드러납니다.

저는 이것을 만들기 위해 이 두 개의 이미지를 사용했습니다.CustomProgressBar.

가리비.png

scall.png

ballon_ballon.png

ballon_progress.png

기본 활동.java

public class MainActivity extends ActionBarActivity {

private EditText etPercent;
private ClipDrawable mImageDrawable;

// a field in your class
private int mLevel = 0;
private int fromLevel = 0;
private int toLevel = 0;

public static final int MAX_LEVEL = 10000;
public static final int LEVEL_DIFF = 100;
public static final int DELAY = 30;

private Handler mUpHandler = new Handler();
private Runnable animateUpImage = new Runnable() {

    @Override
    public void run() {
        doTheUpAnimation(fromLevel, toLevel);
    }
};

private Handler mDownHandler = new Handler();
private Runnable animateDownImage = new Runnable() {

    @Override
    public void run() {
        doTheDownAnimation(fromLevel, toLevel);
    }
};

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

    etPercent = (EditText) findViewById(R.id.etPercent);

    ImageView img = (ImageView) findViewById(R.id.imageView1);
    mImageDrawable = (ClipDrawable) img.getDrawable();
    mImageDrawable.setLevel(0);
}

private void doTheUpAnimation(int fromLevel, int toLevel) {
    mLevel += LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel <= toLevel) {
        mUpHandler.postDelayed(animateUpImage, DELAY);
    } else {
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

private void doTheDownAnimation(int fromLevel, int toLevel) {
    mLevel -= LEVEL_DIFF;
    mImageDrawable.setLevel(mLevel);
    if (mLevel >= toLevel) {
        mDownHandler.postDelayed(animateDownImage, DELAY);
    } else {
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;
    }
}

public void onClickOk(View v) {
    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;

    if (toLevel == temp_level || temp_level > MAX_LEVEL) {
        return;
    }
    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;
    if (toLevel > fromLevel) {
        // cancel previous process first
        mDownHandler.removeCallbacks(animateDownImage);
        MainActivity.this.fromLevel = toLevel;

        mUpHandler.post(animateUpImage);
    } else {
        // cancel previous process first
        mUpHandler.removeCallbacks(animateUpImage);
        MainActivity.this.fromLevel = toLevel;

        mDownHandler.post(animateDownImage);
    }
}
}

activity_main.xml

<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:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/etPercent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="number"
        android:maxLength="3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ok"
        android:onClick="onClickOk" />

</LinearLayout>

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/scall" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/clip_source" />

</FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:clipOrientation="vertical"
    android:drawable="@drawable/ballon_progress"
    android:gravity="bottom" />

복합적인 경우HorizontalProgressBar거스름돈만cliporientation다음과 같이 clip_source.xml에 있습니다.

android:clipOrientation="horizontal"

여기에서 완전한 데모를 다운로드할 수 있습니다.

당신의 xml에

<ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="@style/CustomProgressBar" 
        android:layout_margin="5dip" />

그리고res/values/styles.xml:

<resources> 
        <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
          <item name="android:indeterminateOnly">false</item>
          <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
          <item name="android:minHeight">10dip</item>
          <item name="android:maxHeight">20dip</item>
        </style>       
    <style name="AppTheme" parent="android:Theme.Light" />
</resources>

그리고.custom_progress_bar_horizontal사용자 정의 진행률 표시줄을 정의하는 그리기 가능한 폴더에 저장된 xml입니다.자세한 내용은 이 블로그를 참조하십시오.

이것이 당신에게 도움이 되기를 바랍니다.

진행률 표시줄 결정(고정 기간)과 진행률 표시줄 결정(알 수 없는 기간)이라는 두 가지 유형의 진행률 표시줄이 있습니다.

두 가지 진행률 막대 유형의 그리기 가능한 도구는 그리기 가능한 도구를 xml 리소스로 정의하여 사용자 지정할 수 있습니다.진행률 표시줄 스타일 및 사용자 지정에 대한 자세한 내용은 http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples 에서 확인할 수 있습니다.

고정 또는 수평 진행 표시줄 사용자 정의:

아래 xml은 수평 진행 표시줄 사용자 지정을 위한 그리기 가능한 리소스입니다.

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="?attr/colorControlNormal">
            <corners android:radius="8dp"/>
            <size android:height="20dp" />
            <solid android:color="#90caf9" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle"
                android:tint="?attr/colorControlActivated">
                <corners android:radius="8dp"/>
                <size android:height="20dp" />
                <solid android:color="#b9f6ca" />
            </shape>
        </scale>
    </item>
</layer-list>

불확실한 진행률 표시줄 사용자 정의

아래 xml은 순환 진행률 표시줄 사용자 지정을 위한 그리기 가능한 리소스입니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress"
        android:top="16dp"
        android:bottom="16dp">
                <rotate
                    android:fromDegrees="45"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="315">
                    <shape android:shape="rectangle">
                        <size
                            android:width="80dp"
                            android:height="80dp" />
                        <stroke
                            android:width="6dp"
                            android:color="#b71c1c" />
                    </shape>
                </rotate>           
    </item>
</layer-list>

스피너 타입의 경우 프로그레스바의 색상을 사용자 정의하려면 xml 파일이 필요하고 각각의 Java 파일에서 코드를 시작해야 합니다.

xml 파일을 만들고 progressbar.xml로 이름 지정

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    tools:context=".Radio_Activity" >

    <LinearLayout
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ProgressBar
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </ProgressBar>
    </LinearLayout>

</LinearLayout>

다음 코드를 사용하여 다양한 예상 색상의 스피너를 얻습니다.여기서는 16진수 코드를 사용하여 스피너를 파란색으로 표시합니다.

Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner);
spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"),
                android.graphics.PorterDuff.Mode.MULTIPLY);

사용자 지정 그리기 가능 사용:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="@drawable/my_drawable"
android:pivotX="50%"
android:pivotY="50%" />

에 res (밑에그추/림기그가능리)progress.xml).my_drawablexml,, png일 수 .

그런 다음 레이아웃에서 사용합니다.

<ProgressBar
        android:id="@+id/progressBar"
        android:indeterminateDrawable="@drawable/progress_circle"
...
/>

핫스타와 같은 사용자 정의 진행률 표시줄 만들기.

  1. 레이아웃 파일에 진행률 표시줄을 추가하고 그리기 가능한 파일로 불확실한 그리기 가능을 설정합니다.

activity_main.xml

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/player_progressbar"
    android:indeterminateDrawable="@drawable/custom_progress_bar"
    />
  1. res\drawable에 새 xml 파일 생성

custom_message_bar.xml

<?xml version="1.0" encoding="utf-8"?>
    <rotate  xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080" >

    <shape
        android:innerRadius="35dp"
        android:shape="ring"
        android:thickness="3dp"
        android:useLevel="false" >
       <size
           android:height="80dp"
           android:width="80dp" />

       <gradient
            android:centerColor="#80b7b4b2"
            android:centerY="0.5"
            android:endColor="#f4eef0"
            android:startColor="#00938c87"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

Android에서 진행률 표시줄을 만드는 가장 간단한 방법은 다음과 같습니다.

  1. 초기화 및 대화 상자 표시:

    MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
    progressdialog.show();
    
  2. 작성 방법:

    public class MyProgressDialog extends AlertDialog {
          public MyProgressDialog(Context context) {
              super(context);
              getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
          }
    
          @Override
          public void show() {
              super.show();
              setContentView(R.layout.dialog_progress);
          }
    }
    
  3. 레이아웃 XML 작성:

    <RelativeLayout 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:background="@android:color/transparent"
      android:clickable="true">
    
        <RelativeLayout
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerInParent="true">
    
          <ProgressBar
             android:id="@+id/progressbarr"
             android:layout_width="@dimen/eightfive"
             android:layout_height="@dimen/eightfive"
             android:layout_centerInParent="true"
            android:indeterminateDrawable="@drawable/progresscustombg" />
    
          <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_centerHorizontal="true"
             android:layout_below="@+id/progressbarr"
             android:layout_marginTop="@dimen/_3sdp"
             android:textColor="@color/white"
             android:text="Please wait"/>
        </RelativeLayout>
    </RelativeLayout>
    
  4. 쉐이프 진행률custombg.xml 및 putres/drawable을 만듭니다.

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:toDegrees="360" >
    
        <shape
           android:innerRadiusRatio="3"
           android:shape="ring"
           android:thicknessRatio="20"
           android:useLevel="false" >
            <size
                android:height="@dimen/eightfive"
                android:width="@dimen/eightfive" />
    
            <gradient
                android:centerY="0.50"
                android:endColor="@color/color_green_icash"
                android:startColor="#FFFFFF"
                android:type="sweep"
                android:useLevel="false" />
        </shape>
    
    </rotate>
    

코드로 이 작업을 수행하려면 다음 샘플을 참조하십시오.

pd = new ProgressDialog(MainActivity.this);
pd.setProgressStyle(ProgressDialog.STYLE_SPINNER);
pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
TextView tv = new TextView(this);
tv.setTextColor(Color.WHITE);
tv.setTextSize(20);
tv.setText("Waiting...");
pd.setCustomTitle(tv);
pd.setIndeterminate(true);
pd.show();

텍스트 보기를 사용하면 텍스트의 색, 크기 및 글꼴을 변경할 수 있습니다.그렇지 않으면 평소처럼 setMessage()를 호출할 수 있습니다.

<ProgressBar
    android:indeterminateDrawable="@drawable/loading"
    style="?android:attr/progressBarStyleLarge"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:scaleY="0.5"
    android:scaleX="0.5"
    android:id="@+id/progressBarGallery"/>

그리고.@drawable/loading이라src\main\res\drawable\loading.gif파일, 그리고 그것의 크기는 200 X 200입니다.

언급URL : https://stackoverflow.com/questions/16893209/how-to-customize-a-progress-bar-in-android