【読書ノート『Androidゲームプログラミングゼロから』5.Androidゲーム開発でよく使われるシステムコントロール(ProgressBar、Seekbar)
65400 ワード
3.7 ProgressBar
ProgressBarクラスの公式ドキュメントアドレス:http://developer.android.com/reference/android/widget/ProgressBar.html
Androidアプリケーション開発では、ProgressBar(プログレスバー)は、ダウンロードの進捗、インストーラの進捗、リソースのロードの進捗表示など、比較的よく使われるコンポーネントです.Androidでは、異なる状態で表示される進捗バーをそれぞれ表す2つのスタイルが用意されており、以下ではこの2つのスタイルを実現する.デフォルトのプログレスバーは円形で、styleプロパティを使用してシステムプログレスバーのサイズを指定します.style=「?android:attr/progressBarStyleSmall」、「?android:attr/progressBarStyleLarge」、「?android:attr/progressBarStyleLarge」
プログレスバーを長尺に表示する必要がある場合は、style=「?android:attr/progressBarStyleHorizontal」、長尺プログレスバーというタイプに設定する必要があります.
ロングストライプの進捗バーには、android:max、進捗バーの最大進捗値android:progressを設定し、進捗バーの事故進捗値を設定するいくつかの一般的なプロパティがあります.android:secondaryProgress、最下位(薄い色)の進捗値を設定
円形表示プログレスバーのデフォルトはダイナミックですが、長いプログレスバーが静的である場合、ソースコードMainActivityを変更して長いプログレスバーをダイナミック表示します.ProgressBarクラスでよく使われる関数は、getProgress()です.現在の進捗値を取得します.setProgress();進捗値を設定します.getSecondaryProgress();下位レベルの進捗値setSecondaryProgress()を取得します.下位レベルの進捗値getMax()を設定します.現在の最大進捗値を取得スレッドサイクルで進捗バーの最大進捗値と現在の進捗値を判断処理し、進捗値を絶えず設定して動的進捗値が大きくなるか、小さくなる動的効果を達成します.
円形プログレスバースタイルをカスタマイズする方法:方法1:android:indeterminateDrawableを1枚の画像で塗りつぶす
準備画像:progress_load.png
drawableでimage_を新規作成progress_01.xmlファイル
"value"でxmlでmyProgressBarStyleを定義する
最後にProgressBarでは、自分で定義したstyle,android:indeterminateDuration="700"を使用して、画像の回転速度を指定します.これにより、自分のニーズに合わせてProgressBarのスタイルを定義することができます.
方法2:アニメーションを定義して実装
準備画像:photo 1.jpg、photo2.jpg、photo3.jpg、photo4.jpg、photo5.jpg
res/anim/image_の定義progress.xmlは次のとおりです.
我々が定義したstyleに- @anim/image_を導入progress.xml
最後にProgressBarで私たちが定義したstyleを使用します
方法3:色をカスタマイズして実現
res/drawable/imageの定義progress_02.xmlは次のとおりです.
- @drawable/image_を定義したstyleに導入progress_02
最後にProgressBarで私たちが定義したstyleを使用します
長尺バーのスタイルをカスタマイズするには、次の手順に従います.
原理:XMLファイルで進捗バーの背景、第1進捗色、第2進捗色をそれぞれ定義し、ProgressBarのandroid:progressDrawableプロパティで適用すればよい.まずdrawableの下でprogressbarを確立します.style.xmlファイル、内容は以下の通りです.
背景、第1の進捗色、第2の進捗色gradientはグラデーション、cornersはフィレットレイアウトを定義します.
MainActivity.JAvaファイル:
3.8 Seekbar
SeekBarクラスの公式ドキュメントアドレス:http://developer.android.com/reference/android/widget/SeekBar.html
SeekBar(ドラッグバー)の外観は、長い進捗バーに似ています.Android携帯電話で最もよく見られるドラッグバーの場所は、音楽を再生するときに、ユーザーがドラッグバーを任意にドラッグすると音楽の再生時間帯を調整することができます.着信音の音量を調整するインタフェースも、ドラッグバーを使用してユーザーと対話します.次に、ドラッグ・イベントを定義およびリスニングする方法について説明します.
ドラッグバーをリスニングするのはsetOnSeekBarChangeListenerというインタフェースで、ここで使用する内部クラスはバインドリスニングを実現し、インタフェースの3つの関数を書き換える:onStopTrackingTouch:ユーザーがドラッグバーのドラッグ動作を完了したときにトリガーする;onStartTrackingTouch:ユーザーがドラッグバーをドラッグするとトリガーされます.onProgressChanged:ドラッグバーの値が変化するとトリガーされます.実際には、ドラッグバーは長いプロンプトの進捗バーに似ており、setMax()、setProgress()、setSecondaryProgress()などの関数もあります.
簡単な例は次のとおりです.
.
ドラッグバースタイルをカスタマイズするには、次の手順に従います.
SeekBarのシステムには、次のようなスタイルがあります.
androidのソースディレクトリでxmlで見つけたSeekBarのコード
ここで最も重要な属性は次のとおりです.
上にindeterminateという概念があり、進度が不確定であることを意味します.この場合、進度が点滅します.Seekbarのデフォルトスタイルは進捗が確定し、特定の位置にドラッグすると停止します.画像リソースprogress_horizontalはかなり重要で、単一の画像ではありません.platformsandroid-18dataresdrawableの下にprogress_horizontal.xml:
上は実は3枚のカスタムカラーグラデーションの画像です.私たちはひょうたんに自分の3枚の画像を定義することができます(背景図は少し薄くて、gifのスクリーンショットははっきり見えませんが、みんなはそれでいいことを知っています):
my_seekbar.xml
ドラッグする小さなアイコンはthumbプロパティによって決まります.以上のことをはっきりさせておけば、SeekBarがどうなるかは自分次第です.
ProgressBarクラスの公式ドキュメントアドレス:http://developer.android.com/reference/android/widget/ProgressBar.html
Androidアプリケーション開発では、ProgressBar(プログレスバー)は、ダウンロードの進捗、インストーラの進捗、リソースのロードの進捗表示など、比較的よく使われるコンポーネントです.Androidでは、異なる状態で表示される進捗バーをそれぞれ表す2つのスタイルが用意されており、以下ではこの2つのスタイルを実現する.デフォルトのプログレスバーは円形で、styleプロパティを使用してシステムプログレスバーのサイズを指定します.style=「?android:attr/progressBarStyleSmall」、「?android:attr/progressBarStyleLarge」、「?android:attr/progressBarStyleLarge」
プログレスバーを長尺に表示する必要がある場合は、style=「?android:attr/progressBarStyleHorizontal」、長尺プログレスバーというタイプに設定する必要があります.
ロングストライプの進捗バーには、android:max、進捗バーの最大進捗値android:progressを設定し、進捗バーの事故進捗値を設定するいくつかの一般的なプロパティがあります.android:secondaryProgress、最下位(薄い色)の進捗値を設定
円形表示プログレスバーのデフォルトはダイナミックですが、長いプログレスバーが静的である場合、ソースコードMainActivityを変更して長いプログレスバーをダイナミック表示します.ProgressBarクラスでよく使われる関数は、getProgress()です.現在の進捗値を取得します.setProgress();進捗値を設定します.getSecondaryProgress();下位レベルの進捗値setSecondaryProgress()を取得します.下位レベルの進捗値getMax()を設定します.現在の最大進捗値を取得スレッドサイクルで進捗バーの最大進捗値と現在の進捗値を判断処理し、進捗値を絶えず設定して動的進捗値が大きくなるか、小さくなる動的効果を達成します.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/txt_ProgressBar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ：" />
<ProgressBar
android:id="@+id/pb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ：" />
<ProgressBar
android:id="@+id/pb2"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ：" />
<ProgressBar
android:id="@+id/pb3"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ：" />
<ProgressBar
android:id="@+id/pb4"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:secondaryProgress="70" />
</LinearLayout>import android.app.Activity;
import android.os.Bundle;
import android.widget.ProgressBar;
public class MainActivity extends Activity implements Runnable {
private Thread th; //
private ProgressBar pb;//
private Boolean stateChage = false;//
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//
pb = (ProgressBar) findViewById(R.id.pb4);
th = new Thread(this);//
th.start();//
}
@Override
public void run() {// Runnable
while (true) {
int current = pb.getProgress();//
int currentMax = pb.getMax();//
// int secCurrent = pb.getSecondaryProgress();//
// ，
if (stateChage == false) {
if (current >= currentMax) {
stateChage = true;
} else {
//
pb.setProgress(current + 1);
//
pb.setSecondaryProgress(current + 1);
}
} else {
if (current <= 0) {
stateChage = false;
} else {
pb.setProgress(current - 1);
}
}
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}円形プログレスバースタイルをカスタマイズする方法:方法1:android:indeterminateDrawableを1枚の画像で塗りつぶす
準備画像:progress_load.png
drawableでimage_を新規作成progress_01.xmlファイル
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progress_load"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />"value"でxmlでmyProgressBarStyleを定義する
<style name="myProgressBarStyle" >
<item name="android:indeterminateDrawable">@drawable/image_progress_01</item>
<item name="android:minWidth">100dip</item>
<item name="android:maxWidth">100dip</item>
<item name="android:minHeight">100dip</item>
<item name="android:maxHeight">100dip</item>
</style>最後にProgressBarでは、自分で定義したstyle,android:indeterminateDuration="700"を使用して、画像の回転速度を指定します.これにより、自分のニーズに合わせてProgressBarのスタイルを定義することができます.
<ProgressBar
android:id="@+id/pb1"
style="@style/myProgressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDuration="700" />方法2:アニメーションを定義して実装
準備画像:photo 1.jpg、photo2.jpg、photo3.jpg、photo4.jpg、photo5.jpg
res/anim/image_の定義progress.xmlは次のとおりです.
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:duration="1000" android:drawable="@drawable/photo1" />
<item android:duration="1000" android:drawable="@drawable/photo2" />
<item android:duration="1000" android:drawable="@drawable/photo3" />
<item android:duration="1000" android:drawable="@drawable/photo4" />
<item android:duration="1000" android:drawable="@drawable/photo5" />
</animation-list>我々が定義したstyleに
<style name="myProgressBarStyle2" >
<item name="android:indeterminateDrawable">@anim/image_progress</item>
<item name="android:minWidth">200dip</item>
<item name="android:maxWidth">200dip</item>
<item name="android:minHeight">200dip</item>
<item name="android:maxHeight">200dip</item>
</style>最後にProgressBarで私たちが定義したstyleを使用します
style="@style/myProgressBarStyle2"方法3:色をカスタマイズして実現
res/drawable/imageの定義progress_02.xmlは次のとおりです.
<?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="8"
android:useLevel="false" >
<gradient
android:centerColor="#FFFFFF"
android:centerY="0.50"
android:endColor="#1E90FF"
android:startColor="#000000"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate><style name="myProgressBarStyle3" >
<item name="android:indeterminateDrawable">@drawable/image_progress_02</item>
<item name="android:minWidth">100dip</item>
<item name="android:maxWidth">100dip</item>
<item name="android:minHeight">100dip</item>
<item name="android:maxHeight">100dip</item>
</style>最後にProgressBarで私たちが定義したstyleを使用します
style="@style/myProgressBarStyle3"長尺バーのスタイルをカスタマイズするには、次の手順に従います.
原理:XMLファイルで進捗バーの背景、第1進捗色、第2進捗色をそれぞれ定義し、ProgressBarのandroid:progressDrawableプロパティで適用すればよい.まずdrawableの下でprogressbarを確立します.style.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="5.0dip" />
<gradient android:startColor="#656666" android:endColor="#dbdedf" android:angle="270.0" android:centerY="0.75" android:centerColor="#bbbbbc" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="8.0dip" />
<gradient android:startColor="#e71a5e" android:endColor="#6c213a" android:angle="90.0" android:centerY="0.75" android:centerColor="#ac6079" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="8.0dip" />
<gradient android:startColor="#464647" android:endColor="#2d9ae7" android:angle="270.0" />
</shape>
</clip>
</item>
</layer-list>背景、第1の進捗色、第2の進捗色gradientはグラデーション、cornersはフィレットレイアウトを定義します.
<ProgressBar
android:id="@+id/pb1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="50"
android:progressDrawable="@drawable/image_progress_03"
android:secondaryProgress="70" />MainActivity.JAvaファイル:
import android.app.Activity;
import android.os.Bundle;
import android.widget.ProgressBar;
public class MainActivity extends Activity implements Runnable {
private Thread th; //
private ProgressBar pb;//
private Boolean stateChage = false;//
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//
pb = (ProgressBar) findViewById(R.id.pb1);
th = new Thread(this);//
th.start();//
}
@Override
public void run() {// Runnable
while (true) {
int current = pb.getProgress();//
int currentMax = pb.getMax();//
// int secCurrent = pb.getSecondaryProgress();//
// ，
if (stateChage == false) {
if (current >= currentMax) {
stateChage = true;
} else {
//
pb.setProgress(current + 1);
//
pb.setSecondaryProgress(current + 1);
}
} else {
current =0;
pb.setProgress(current);
stateChage = false;
}
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}3.8 Seekbar
SeekBarクラスの公式ドキュメントアドレス:http://developer.android.com/reference/android/widget/SeekBar.html
SeekBar(ドラッグバー)の外観は、長い進捗バーに似ています.Android携帯電話で最もよく見られるドラッグバーの場所は、音楽を再生するときに、ユーザーがドラッグバーを任意にドラッグすると音楽の再生時間帯を調整することができます.着信音の音量を調整するインタフェースも、ドラッグバーを使用してユーザーと対話します.次に、ドラッグ・イベントを定義およびリスニングする方法について説明します.
ドラッグバーをリスニングするのはsetOnSeekBarChangeListenerというインタフェースで、ここで使用する内部クラスはバインドリスニングを実現し、インタフェースの3つの関数を書き換える:onStopTrackingTouch:ユーザーがドラッグバーのドラッグ動作を完了したときにトリガーする;onStartTrackingTouch:ユーザーがドラッグバーをドラッグするとトリガーされます.onProgressChanged:ドラッグバーの値が変化するとトリガーされます.実際には、ドラッグバーは長いプロンプトの進捗バーに似ており、setMax()、setProgress()、setSecondaryProgress()などの関数もあります.
簡単な例は次のとおりです.
. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/txt_SeekBar" />
<SeekBar
android:id="@+id/skb"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
public class MainActivity extends Activity {
private SeekBar skb;
private TextView tv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
skb = (SeekBar) findViewById(R.id.skb);
tv = (TextView) findViewById(R.id.tv);
skb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
tv.setText("“ ” 。");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
tv.setText("“ ” 。。。");
}
@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
tv.setText(" “ ” " + progress);
}
});
}
}ドラッグバースタイルをカスタマイズするには、次の手順に従います.
SeekBarのシステムには、次のようなスタイルがあります.
style="@android:style/Widget.SeekBar"androidのソースディレクトリでxmlで見つけたSeekBarのコード
<style name="Widget.SeekBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
<item name="android:thumb">@android:drawable/seek_thumb</item>
<item name="android:thumbOffset">8dip</item>
<item name="android:focusable">true</item>
<item name="android:mirrorForRtl">true</item>
</style>ここで最も重要な属性は次のとおりです.
<!-- ， ， 。 -->
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<!-- ， ， 【 】。 -->
<item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
<!-- 。 -->
<item name="android:thumb">@android:drawable/seek_thumb</item>上にindeterminateという概念があり、進度が不確定であることを意味します.この場合、進度が点滅します.Seekbarのデフォルトスタイルは進捗が確定し、特定の位置にドラッグすると停止します.画像リソースprogress_horizontalはかなり重要で、単一の画像ではありません.platformsandroid-18dataresdrawableの下にprogress_horizontal.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="5dip" />
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:startColor="#80ffd300" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:angle="270"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:startColor="#ffffd300" />
</shape>
</clip>
</item>
</layer-list>上は実は3枚のカスタムカラーグラデーションの画像です.私たちはひょうたんに自分の3枚の画像を定義することができます(背景図は少し薄くて、gifのスクリーンショットははっきり見えませんが、みんなはそれでいいことを知っています):
my_seekbar.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:drawable="@drawable/my_seekbar_no">
</item>
<!-- -->
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/my_seekbar_back"
android:scaleWidth="100%" />
</item>
<!-- -->
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/my_seekbar_sh"
android:scaleWidth="100%" />
</item>
</layer-list><style name="mySeekBar">
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
<item name="android:progressDrawable">@drawable/my_seekbar</item>
<item name="android:indeterminateDrawable">@drawable/my_seekbar</item>
<item name="android:thumb">@drawable/ic_launcher</item>
<item name="android:thumbOffset">8dip</item>
</style><SeekBar
android:id="@+id/skb"
style="@style/mySeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:secondaryProgress="50"
android:max="100"
android:progress="10" />ドラッグする小さなアイコンはthumbプロパティによって決まります.以上のことをはっきりさせておけば、SeekBarがどうなるかは自分次第です.