Android自定义SeekBar示例

时间:2020-02-23 14:28:52  来源:igfitidea点击:

在本教程中,我们将看到如何创建自定义SeekBar。
如果要自定义上面的SeekBar,则可以遵循以下教程来创建自定义SeekBar它。

第1步:创建项目

创建一个Android应用程序ProjectNamed"AndroidCustomseekbarexampleapp"。

第2步:创建布局

更改RES - >布局 - > Activity_main.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.theitroad.customseekbarexampleapp.MainActivity" >
 
 <SeekBar
 android:id="@+id/seekBar"
 android:layout_width="300dp"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_alignParentTop="true"
 android:layout_marginTop="40dp"
 android:max="10"
 android:thumb="@drawable/thumb"
 android:secondaryProgress="5"
 android:progress="5"
 android:progressDrawable="@layout/progress_seekbar"
 
 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_below="@+id/seekBar"
 android:layout_marginLeft="29dp"
 android:layout_marginTop="14dp" 
 
</RelativeLayout>

如果我们注意到,它有两个新属性Android:thumb ="@ drawable/thumb"和Android:progressdrawable ="@ layout/progress_seeekbar"。
我们将更多地了解更多步骤。

第3步:创建拇指并将其放在Wappable文件夹中:

拇指只不过是我们拖动以更改进度的项目。
创建一个名为"thumb.png"的拇指镜像,并将其放在drawable文件夹中。

第4步:为绘制进度列创建XML:

  • 转到res - >布局
  • 右键单击布局
  • 单击"新建 - >文件"。
  • 创建名为"progress_seeekbar.xml"的文件,并在row_item.xml中粘贴以下代码。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 <item>
 <shape android:shape="rectangle" >
 <corners android:radius="10dp"
 
 <gradient
 android:angle="270"
 android:endColor="#252945"
 android:startColor="#8a834b" 
 </shape>
 </item>
 <item>
 <clip>
 <shape android:shape="rectangle" >
 <corners android:radius="10dp" 
 
 <gradient
 android:angle="270"
 android:endColor="#990800"
 android:startColor="#d14900" 
 </shape>
 </clip>
 </item>
 
</layer-list>

以上XML用于设计自定义SeekBar的进展。
以上XML使用图层列表标记。
TallayDrawable是一个可移动的对象,管理其他可移动阵列。

列表中的每个可在列表中的绘制绘制 - 列表中的最后一个可在列表中绘制。

第5步:创造主动

更改src/main/packageName/mainActivity.java如下:

package com.theitroad.customseekbarexampleapp;
 
import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
 
import com.theitroad.customseekbarexampleapp.R;
 
import static com.theitroad.customseekbarexampleapp.R.id.seekBar;
import static com.theitroad.customseekbarexampleapp.R.id.textView;
 
public class MainActivity extends Activity {
 
    SeekBar customSeekbar;
    TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        customSeekbar = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.textView);
        //Set default value to 0
        textView.setText("Progress : "+customSeekbar.getProgress() + "/" + customSeekbar.getMax());
        customSeekbar.setOnSeekBarChangeListener(
                new OnSeekBarChangeListener() {
                    int progress = 0;
                    @Override
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progresValue, boolean fromUser) {
                        progress = progresValue;
                    }
 
                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }
 
                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {
                        //Display the value in textview
                        textView.setText("Progress : "+progress + "/" + seekBar.getMax());
                    }
                });
    }
}

我们正在从布局文件中获取小部件引用,然后使用seekbar的setseeekbarchangeListener方法为我们的自定义SeekBar设置侦听器。