Android SeekBar カスタム スタイル
長い間ブログを書いていませんでした。最近、プロジェクトでカスタムのスライド進行状況バーを使用する必要がありましたが、そのバーに慣れていないことに気づきました。ここに記録しておきます。OK、始めましょうトピックに戻ります。次のレンダリング: 左側と右側のプラス記号とマイナス記号は私が追加しました
。カスタム プログレス バー アイコンを描画するには、まず次のようにスタイル Seekbar_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="10dp" />
<solid android:color="@color/gray" />
</shape>
</item>
<!-- 进度颜色 -->
<item android:id="@android:id/progress">
<clip>
<shape>
<!-- 圆角程度 和 进度条颜色 -->
<corners android:radius="10dp" />
<solid android:color="@color/theme_color" />
</shape>
</clip>
</item>
</layer-list>
背景色は、進行状況バーがスライドしない背景色を指します。進行状況の色について説明する必要はありません。ははは、OK。すると、私のレイアウトは次のようになります:
<?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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".eleven.ElevenActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp">
<!-- 减号图标-->
<ImageView
android:id="@+id/iv_decrease"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_centerVertical="true"
android:src="@mipmap/seekbar_decrease"></ImageView>
<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/iv_add"
android:layout_toRightOf="@+id/iv_decrease"
android:max="100"
android:maxHeight="10dp"
android:minHeight="10dp"
android:progress="1"
android:progressDrawable="@drawable/seekbar_style"
android:splitTrack="false"
android:thumb="@drawable/bg_shape_cicircle_20dp"></SeekBar>
<!-- 加号图标-->
<ImageView
android:id="@+id/iv_add"
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@mipmap/seekbar_add"></ImageView>
</RelativeLayout>
</LinearLayout>
これは内部の内容を説明します。2
つの ImageView は進行状況を追加および減算するためのボタンであり、説明する必要はありません。次に SeekBar のプロパティがあります。android:max="
100" は進行状況バーの最大値です。android: progress="1" は現在の進行状況の値です。設定された進行状況の値
android:maxHeight="10dp" および android:minHeight="10dp" は進行状況バーの太さを表し、
android:progressDrawable="@drawable/seekbar_style" は進行状況を表します注: スライドは含まれません 円形ブロック
android:thumb="@drawable/bg_shape_cicircle_20dp" は、プログレス バーをスライドするときの円形ブロックを表し、スタイルは次のように記述されます。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:endColor="@color/theme_color"
android:startColor="@color/theme_color"></gradient>
<size
android:width="20dp"
android:height="20dp"></size>
</shape>
android:splitTrack="false"という属性があることをほとんど忘れていました
。次の 2 つの写真を比較すると、
スライドする円の周りに白い背景があることがわかります。はい、私も非常に興味深かったです。これは属性です。この属性を追加して false に設定するだけです。
最後にコードを貼り付けます。
public class ElevenActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_eleven);
SeekBar seekBar=findViewById(R.id.seekbar);
ImageView iv_decrease=findViewById(R.id.iv_decrease);
ImageView iv_add=findViewById(R.id.iv_add);
// seekBar.getThumb().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置滑块颜色、样式
//
// seekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置进度条颜色、样式
iv_decrease.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//减少
seekBar.setProgress(seekBar.getProgress()-10);
}
});
iv_add.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//增加
seekBar.setProgress(seekBar.getProgress()+10);
}
});
}
}
OK、これが私が書いた方法です。他の方法を検索することもできます。お役に立てれば幸いです。