Android
プログレスバー
サーチ…
備考
公式ドキュメント: ProgressBar
不確定なProgressBar
不確定なProgressBarは、進行状況の表示がない循環アニメーションを示します。
基本的に不確定なProgressBar(スピンホイール)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
水平不定ProgressBar(フラットバー)
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@android:style/Widget.ProgressBar.Horizontal"/>
その他の組み込みのProgressBarスタイル
style="@android:style/Widget.ProgressBar.Small"
style="@android:style/Widget.ProgressBar.Large"
style="@android:style/Widget.ProgressBar.Inverse"
style="@android:style/Widget.ProgressBar.Small.Inverse"
style="@android:style/Widget.ProgressBar.Large.Inverse"
アクティビティで不確定なProgressBarを使用するには
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.GONE);
ProgressBarを決定する
確定ProgressBarは、現在の進捗状況を特定の最大値に向かって示します。
水平方向の確定ProgressBar
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="match_parent"
android:layout_height="10dp"
style="@android:style/Widget.ProgressBar.Horizontal"/>
垂直方向の確定ProgressBar
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="10dp"
android:layout_height="match_parent"
android:progressDrawable="@drawable/progress_vertical"
style="@android:style/Widget.ProgressBar.Horizontal"/>
res / drawable / progress_vertical.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">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/darker_gray"/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/holo_blue_light"/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip android:clipOrientation="vertical" android:gravity="bottom">
<shape>
<corners android:radius="3dp"/>
<solid android:color="@android:color/holo_blue_dark"/>
</shape>
</clip>
</item>
</layer-list>
リングの確定ProgressBar
<ProgressBar
android:id="@+id/progressBar"
android:indeterminate="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/progress_ring"
style="@android:style/Widget.ProgressBar.Horizontal"/>
res / drawable / progress_ring.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/secondaryProgress">
<shape
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="24"
android:innerRadiusRatio="2.2">
<corners android:radius="3dp"/>
<solid android:color="#0000FF"/>
</shape>
</item>
<item android:id="@android:id/progress">
<shape
android:shape="ring"
android:useLevel="true"
android:thicknessRatio="24"
android:innerRadiusRatio="2.2">
<corners android:radius="3dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</layer-list>
アクティビティで確定ProgressBarを使用するには
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setSecondaryProgress(100);
progressBar.setProgress(10);
progressBar.setMax(100);
カスタマイズされたプログレスバー
CustomProgressBarActivity.java :
public class CustomProgressBarActivity extends AppCompatActivity {
private TextView txtProgress;
private ProgressBar progressBar;
private int pStatus = 0;
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_progressbar);
txtProgress = (TextView) findViewById(R.id.txtProgress);
progressBar = (ProgressBar) findViewById(R.id.progressBar);
new Thread(new Runnable() {
@Override
public void run() {
while (pStatus <= 100) {
handler.post(new Runnable() {
@Override
public void run() {
progressBar.setProgress(pStatus);
txtProgress.setText(pStatus + " %");
}
});
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
pStatus++;
}
}
}).start();
}
}
activity_custom_progressbar.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:progressDrawable="@drawable/custom_progressbar_drawable"
android:secondaryProgress="0" />
<TextView
android:id="@+id/txtProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/progressBar"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</RelativeLayout>
custom_progressbar_drawable.xml :
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:shape="ring"
android:useLevel="false" >
<gradient
android:centerY="0.5"
android:endColor="#FA5858"
android:startColor="#0099CC"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
リファレンススクリーンショット:
Tinting ProgressBar
AppCompatテーマを使用すると、 ProgressBar
の色はあなたが定義したcolorAccent
ます。
アクセントの色を変更せずにProgressBar
色を変更するには、アクセントの色をオーバーライドするandroid:theme
属性を使用します。
<ProgressBar
android:theme="@style/MyProgress"
style="@style/Widget.AppCompat.ProgressBar" />
<!-- res/values/styles.xml -->
<style name="MyProgress" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/myColor</item>
</style>
ProgressBar
に色を付けるには、XMLファイルで属性android:indeterminateTintMode
とandroid:indeterminateTint
使用できます
<ProgressBar
android:indeterminateTintMode="src_in"
android:indeterminateTint="@color/my_color"
/>
マテリアルリニアプログレスバー
マテリアルドキュメントによると:
線形進行状況インジケータは常に0%から100%までを満たし、決して値が減少しません。
ヘッダーやシートの端にあるバーが表示され、消えて表示されます。
Linear ProgressBarを使用するには、xmlで使用するだけです。
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
不確定
不確定な ProgressBarを作成するには、 android:indeterminate
属性をtrue
設定しtrue
。
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"/>
決定する
確定 ProgressBarを作成するには、 android:indeterminate
属性をfalse
設定し、 android:max
およびandroid:progress
属性を使用します。
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="false"
android:max="100"
android:progress="10"/>
このコードを使用して値を更新してください:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
バッファ
ProgressBarでバッファ効果を作成するには、 android:indeterminate
属性をfalse
設定し、 android:max
、 android:progress
、 android:secondaryProgress
属性を使用します。
<ProgressBar
android:id="@+id/my_progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:progress="10"
android:secondaryProgress="25"/>
バッファ値は、 android:secondaryProgress
属性で定義されます。
このコードを使用して値を更新するだけです:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setProgress(20);
progressBar.setSecondaryProgress(50);
不確定で決定する
この種のProgressBarを取得するには、 android:indeterminate
属性をtrueに設定して不確定なProgressBarを使用します。
<ProgressBar
android:id="@+id/progressBar"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:indeterminate="true"/>
次に、不確定から進捗を確定するために切り替える必要がある場合は、 setIndeterminate()
メソッドを使用します。
ProgressBar progressBar = (ProgressBar) findViewById(R.id.my_progressBar);
progressBar.setIndeterminate(false);
カスタム進行状況ダイアログの作成
カスタムプログレスダイアログを作成することで、ダイアログを再作成せずにUIインスタンスで表示することができます。
最初に、カスタム進行ダイアログを作成します。
CustomProgress.java
public class CustomProgress {
public static CustomProgress customProgress = null;
private Dialog mDialog;
public static CustomProgress getInstance() {
if (customProgress == null) {
customProgress = new CustomProgress();
}
return customProgress;
}
public void showProgress(Context context, String message, boolean cancelable) {
mDialog = new Dialog(context);
// no tile for the dialog
mDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
mDialog.setContentView(R.layout.prograss_bar_dialog);
mProgressBar = (ProgressBar) mDialog.findViewById(R.id.progress_bar);
// mProgressBar.getIndeterminateDrawable().setColorFilter(context.getResources()
// .getColor(R.color.material_blue_gray_500), PorterDuff.Mode.SRC_IN);
TextView progressText = (TextView) mDialog.findViewById(R.id.progress_text);
progressText.setText("" + message);
progressText.setVisibility(View.VISIBLE);
mProgressBar.setVisibility(View.VISIBLE);
// you can change or add this line according to your need
mProgressBar.setIndeterminate(true);
mDialog.setCancelable(cancelable);
mDialog.setCanceledOnTouchOutside(cancelable);
mDialog.show();
}
public void hideProgress() {
if (mDialog != null) {
mDialog.dismiss();
mDialog = null;
}
}
}
カスタムの進捗レイアウトを作成する
prograss_bar_dialog.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="65dp"
android:background="@android:color/background_dark"
android:orientation="vertical">
<TextView
android:id="@+id/progress_text"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="@+id/progress_bar"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:background="@android:color/transparent"
android:gravity="center_vertical"
android:text=""
android:textColor="@android:color/white"
android:textSize="16sp"
android:visibility="gone" />
<-- Where the style can be changed to any kind of ProgressBar -->
<ProgressBar
android:id="@+id/progress_bar"
style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_gravity="center"
android:background="@color/cardview_dark_background"
android:maxHeight="20dp"
android:minHeight="20dp" />
</RelativeLayout>
これです。 Dialog in Codeを呼び出しています
CustomProgress customProgress = CustomProgress.getInstance();
// now you have the instance of CustomProgres
// for showing the ProgressBar
customProgress.showProgress(#Context, getString(#StringId), #boolean);
// for hiding the ProgressBar
customProgress.hideProgress();