我如何在Android中设计自定义搜索栏?

时间:2014-07-16 05:41:20

标签: android seekbar

如何在图像下方设计自定义搜索栏,如

enter image description hereë

任何人都有一个想法请指导我Adavance感谢所有

1 个答案:

答案 0 :(得分:1)

在drawable文件夹中,创建到xml文件并键入以下代码。

更改SeekBar背景:

<强> seekbar_progress_bg.xml

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <clip>
        <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
            android:src="@drawable/img_seekbar_progress_blue"
            android:tileMode="repeat"
            android:antialias="true"
            android:dither="false"
            android:filter="false"
            android:gravity="left"
        />
        </clip>
    </item>
</layer-list>

更改SeekBar进度:

<强> seekbar_progress.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/img_seekbar_bg"
        android:dither="true">
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#80028ac8"
                    android:centerColor="#80127fb1"
                    android:centerY="0.75"
                    android:endColor="#a004638f"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/seekbar_progress_bg"
    />
</layer-list>

使用上述xml文件的实际搜索栏:

<SeekBar
            android:id="@+id/songProgressBar"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_marginRight="20dp"
             android:layout_marginLeft="20dp"
             android:layout_marginBottom="20dp"
             android:layout_above="@id/player_footer_bg"
             android:thumb="@drawable/seek_handler"
             android:progressDrawable="@drawable/seekbar_progress"
             android:paddingLeft="6dp"
             android:paddingRight="6dp"/>

我根据您的需要设计了它,您可以根据自己的要求进行修改

您还可以查看herehere示例

使用 SeekBar.OnSeekBarChangeListener

扩展您的课程
/**
     * Update timer on seekbar
     * */
    public void updateProgressBar() {
        mHandler.postDelayed(mUpdateTimeTask, 100);        
    }   

    /**
     * Background Runnable thread
     * */
    private final Runnable mUpdateTimeTask = new Runnable() {
           @Override
        public void run() {
               long totalDuration = mp.getDuration();
               long currentDuration = mp.getCurrentPosition();

               // Displaying Total Duration time
               songTotalDurationLabel.setText(""+utils.milliSecondsToTimer(totalDuration));
               // Displaying time completed playing
               songCurrentDurationLabel.setText(""+utils.milliSecondsToTimer(currentDuration));

               // Updating progress bar
               int progress = (utils.getProgressPercentage(currentDuration, totalDuration));
               //Log.d("Progress", ""+progress);
               songProgressBar.setProgress(progress);

               // Running this thread after 100 milliseconds
               mHandler.postDelayed(this, 100);
           }
        };

    /**
     * 
     * */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromTouch) {

    }

    /**
     * When user starts moving the progress handler
     * */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // remove message Handler from updating progress bar
        mHandler.removeCallbacks(mUpdateTimeTask);
    }

    /**
     * When user stops moving the progress hanlder
     * */
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        mHandler.removeCallbacks(mUpdateTimeTask);
        int totalDuration = mp.getDuration();
        int currentPosition = utils.progressToTimer(seekBar.getProgress(), totalDuration);

        // forward or backward to certain seconds
        mp.seekTo(currentPosition);

        // update timer progress again
        updateProgressBar();
    }

您必须创建文本视图或视图,并更新其值以及其进度更改。