Android模仿三星手机系统滑动条滑动时滑块变大的特效

使用三星手机的过程中发现三星手机系统自带的滑动条有一个特效,比如调节亮度的滑动条,在滑动滑块的过程中,滑块会变大,功能很小但是体验却很好,于是决定做一个这样的效果出来,好了废话不多说了,下面开始实现

我们知道在SeekBar控件中有两个很重要的属性,一个是进度条(即android:progressDrawable属性),一个是滑块(即android:thumb属性),我们主要用到的是滑块的特效,这里就把进度条的配置稍微的介绍一下,先上代码:

在res/xml文件夹下创建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">
        <shape>
            <corners android:radius="0dip" />

            <gradient
                android:angle="270"
                android:centerColor="#999999"
                android:centerY="0.75"
                android:endColor="#999999"
                android:startColor="#999999" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="1dip" />

                <gradient
                    android:angle="270"
                    android:centerColor="#88803990"
                    android:centerY="0.75"
                    android:endColor="#88803990"
                    android:startColor="#88803990" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="1dip" />

                <gradient
                    android:angle="270"
                    android:centerColor="#803990"
                    android:centerY="0.75"
                    android:endColor="#803990"
                    android:startColor="#803990" />
            </shape>
        </clip>
    </item>

</layer-list>

代码的内容很简单,主要是设置进度条的第一进度、第二进度和背景颜色,这里就不做具体介绍了。

接下来开始我们的滑块属性,要想实现三星的那种效果,我们必须要处理正常状态下和按下的事件,应该都想到了状态选择器,这里我们在res/drawable目录下创建滑块的状态选择器thum_selector.xml,然后设置去设置它的一些item属性,但是这时候发现我们的滑块还没有创建呢,这里的滑块我们不使用图片,而是通过绘制的方式来实现(至于具体的怎么去创建,我们可以在Android源码中找到thum的配置文件,改改就行了),在xml文件夹下创建seekbar_thum_normal.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="270"
        android:endColor="#ff585858"
        android:startColor="#ffffffff" />

    <size
        android:height="15dp"
        android:width="15dp" />
    <stroke
        android:width="5dp"
        android:color="#00000000" />
    <corners
        android:radius="8dp" />
    <solid android:color="#dcdcdc"/>
</shape>

按压状态下滑块的配置文件seekbar_thum_pressed.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="270"
        android:endColor="#ff585858"
        android:startColor="#ffffffff" />

    <size
        android:height="15dp"
        android:width="15dp" />
    <corners
        android:radius="8dp" />
    <solid android:color="#dcdcdc"/>
</shape>

仔细看会发现这两个文件主要的区别就是上一个文件多了一个stroke属性,它表示在滑块的外围进行描边,我们将背景设置为透明效果,这样处理的效果是使滑块的大小一致,不至于在滑动的过程中出现进度条上下跳动的问题

接下来就是我们滑块的状态选择器的布局thum_selector.xml了

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
         android:state_window_focused="true"
         android:drawable="@xml/seekbar_thum_pressed" />
     <item android:state_focused="true"
         android:state_window_focused="true"
         android:drawable="@xml/seekbar_thum_pressed" />
     <item android:state_selected="true"
         android:state_window_focused="true"
         android:drawable="@xml/seekbar_thum_pressed" />
     <item android:drawable="@xml/seekbar_thum_normal" />
 </selector>

最后贴一下seekbar的布局文件,说明一下可以通过调节android:thumbOffset属性,让进度条的进度在滑块的中心点

<SeekBar
             android:id="@+id/seekBar1"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:progressDrawable="@xml/seekbar_progress"
             android:thumb="@drawable/thum_selector"
             android:thumbOffset="10dp"
             android:minHeight="5dp"
             android:maxHeight="5dp"
             >
         </SeekBar>

到此,我们模仿的效果就结束了,上一下三星手机的效果图

时间: 2024-08-01 04:02:48

Android模仿三星手机系统滑动条滑动时滑块变大的特效的相关文章

系统字体大小导致rem布局变大

缘由:内部测试都ok,交给客户看的时候,整天变大,本来7.5rem = 750px,实际上大了很多. 各种情况排除后,发现是客户手机字体大小调整到了特大号 解决办法 getComputedStyle方法能够获取到计算后的样式.大小. 最后优化完的代码如下. (function (doc, win) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersi

创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放。一个滑动条用来控制视频播放位置,以10为步长跳进。另一个滑动条用来控制停止/播放

/* 创建一个程序读入和显示视频文件,并可以使用滑动条控制视频文件的播放. 一个滑动条用来控制视频播放位置,以10为步长跳进.另一个滑动条用来控制 停止/播放 */ #include <cv.h> #include <highgui.h> int g_slider_position = 0; CvCapture* g_capture = NULL; int index = 0; bool flag = true; int g_slider_position1 = 0; void o

android进度条、滑动条和评分控件

所谓进度条.滑动条和评分控件,在手机应用中,相信你见过加载游戏时.更新应用时等情况,屏幕出现一条进度栏,这里称之为进度条:当你调节音量时出现的这里即称作滑动条:而评分控件,当你在淘宝给卖家评价时出现的类似5星评价,这里即称作评分控件,下面将分别详细说明这三种控件的基础使用方法. 一.ProgressBar进度条控件 1. 首先ProgressBar进度条给出了两种样式,分别是progressBarStyleLarge和progressBarStyleHorizontal,此次主要以progres

Android开发手记(11) 滑动条SeekBar

安卓滑动条的操作特别简单,通过getProgress()可以获得SeekBar的位置,通过setProgress(int progress)可以设置SeekBar的位置.要想动态获取用户对SeekBar的操作的话,只需要设置setOnSeekBarChangeListener即可. setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() 示例代码如下: 1 import android.support.v7.app.App

Android 监听ListView、GridView滑动到底部

// 监听listview滚到最底部mIndexList.setOnScrollListener(new OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { switch (scrollState) { // 当不滚动时 case OnScrollListener.SCROLL_STATE_IDLE: // 判断滚动到底部 if (view.get

使用OpenCV滑动条写成的简单调色器,实时输出RGB值

好久没有写博客了,最近在看OpenCV,于是动手写了个简单的RGB调色器,在终端实时输出RGB的值.通过这个程序学习滑动条的使用.程序中主要用到cvCreateTrackbar ,其用法如下: cvCreateTrackbar 创建trackbar并将它添加到指定的窗口. CV_EXTERN_C_FUNCPTR( void (*CvTrackbarCallback)(int pos) ); int cvCreateTrackbar( const char* trackbar_name, cons

【iOS开发-11】UISlider滑动条的属性介绍以及于标签联合使用实时显示变动值

(1)滑动条的左右端背景可以设置上一页下一页的图片: (2)滑动条的轨道图片可以设置为渐变等等图片. (3)滑动条因为值可以互动,所以addTarget:方法很重要,其中事件值变动UIControlEventValueChanged比较特殊,其实和按钮的按下事件是一个性质,都是一个事件而已. #import "ViewController.h" @interface ViewController () @end @implementation ViewController { //应为

opencv学习之路(5)、鼠标和滑动条操作

一.鼠标事件 1 #include<opencv2/opencv.hpp> 2 #include<iostream> 3 using namespace cv; 4 using namespace std; 5 6 Mat img(500,500,CV_8UC3,Scalar(255,255,255));//定义成全局变量 7 8 void OnMouse(int event,int x,int y,int flags,void* param){ 9 if(event==CV_EV

【JavaScript吉光片羽】--- 滑动条

灯光的亮度控制需要一个滑动条,先借用lamp源码中Bar: var Bar = function (opt) { var defaults = { $id: "", // 进度条dom节点id min: 1, // 刻度最小值 stepCount: 5, // 刻度步数 step: 1, // 刻度步长 $alpha: "",//显示亮度的id touchEnd: function () { } // 拖动完成回调 }; this.option = $.extend