Android UI(SeekBar)详解

最新推荐文章于 2023-03-07 23:08:09 发布
最新推荐文章于 2023-03-07 23:08:09 发布
阅读量2.7w 收藏 35
点赞数 4
分类专栏： android 文章标签： android UI布局 Seekbar shape Selector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28057577/article/details/52225870
版权
目录：
    1.SeekBar的应用场景
    2.SeekBar的简单使用与事件监听
    3.图片资源自定义SeekBar+手机音量调节
    4.xml绘制自定义SeekBar
        
1.SeekBar的应用场景
    SeekBar的主要应用在音乐播放，视频播放，或者对音量调节，屏幕亮度调节的一些操作中，让用户可以手动的去改变相应的值。
    
2.SeekBar的简单使用与事件监听
    1.activity_main.xml
    
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.seekbarui.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_map" />

</android.support.design.widget.CoordinatorLayout>
 
    2.content_main.xml
   
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.seekbarui.MainActivity"
    tools:showIn="@layout/activity_main">
    <!--
    android:max="":设置最大进度
    android:progress=""：设置当前进度
    android:secondaryProgress=""：设置第二进度
    android:indeterminate=""：设置是否为不明确进度进度条
    android:thumb="":设置seekbar滑动快的图片
    android:progressDrawable="":进度条背景图片
    android:thumbTint="":滑动块颜色,API21以上才有效
    -->
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="10dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:max="100"
        android:secondaryProgress="20"
        android:progress="0"
        android:indeterminate="false" />
    <TextView
        android:id="@+id/result"
        android:layout_below="@+id/seekBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
</RelativeLayout>
 
    3.主java类MainActivity.java
    
package com.example.seekbarui;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    private SeekBar seekBar;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化Toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //隐藏Actionbar后将toolbar设置上去替换Actionbar
        setSupportActionBar(toolbar);
        //初始化seekbar，TextView
        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.result);
        //seekbar设置监听
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            /*
            * seekbar改变时的事件监听处理
            * */
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                textView.setText("当前进度："+progress+"%");
                Log.d("debug",String.valueOf(seekBar.getId()));
            }
            /*
            * 按住seekbar时的事件监听处理
            * */
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this,"按住seekbar",Toast.LENGTH_SHORT).show();
            }
            /*
            * 放开seekbar时的时间监听处理
            * */
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this,"放开seekbar",Toast.LENGTH_SHORT).show();
            }
        });

        //浮动button实例化
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        //设置点击监听
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }

    //创建toolbar菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    //toolbar菜单选择监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            Toast.makeText(MainActivity.this,item.getTitle(),Toast.LENGTH_LONG).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}
  
    4.效果截图

  


3.图片资源自定义SeekBar+手机音量调节
    1.导入滑动块图片(scrubber.png scrubber_focus.png),进度条就直接xml绘制
    2.scrubber_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:drawable="@drawable/scrubber_focus"/>
    <item android:drawable="@drawable/scrubber"/>
</selector>

    3.seekbar_layer.xml(进度条绘制)
    
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--
    由于本人比较懒，就直接用xml代替图片，如果伙伴们有兴趣可以自己做一个progress进度条图片
    注意：叠放顺序依次为background，secondaryProgress，progress
    cilp标签的作用就是跟随进度逐步显示图片，把图片分成N份逐个进度显示,避免在拖动过程中进度不走的情况
    -->
    <!--背景进度条-->
    <item android:id="@android:id/background">
        <shape android:shape="line">
            <stroke android:width="1dp" android:color="#8B8378"/>
            <corners android:radius="1dp"></corners>
        </shape>
    </item>
    <!--第二进度条-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape android:shape="line">
                <stroke android:width="1dp" android:color="#9932CC"/>
                <corners android:radius="1dp"></corners>
            </shape>
        </clip>
    </item>
    <!--第一进度条-->
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="line">
                <stroke android:width="1dp" android:color="#CD5C5C"/>
                <corners android:radius="1dp"></corners>
            </shape>
        </clip>
    </item>
</layer-list>

    4.主布局activity_second.xml
    
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.seekbarui.SecondActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/seekBar2"
        android:layout_marginTop="60dp"
        android:layout_marginBottom="10dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:max="100"
        android:secondaryProgress="20"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar_layer"
        android:thumb="@drawable/scrubber_selector"
        android:indeterminate="false" />

</android.support.design.widget.CoordinatorLayout>

    5.主布局java类SecondActivity.java    
    
package com.example.seekbarui;

import android.content.Context;
import android.media.AudioManager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.WindowManager;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class SecondActivity extends AppCompatActivity {
    private SeekBar seekBar;
    private TextView textView;
    private AudioManager audioManager;
    private int currentVolume,maxVolume;
    private int volume=0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        //初始化seekbar，TextView
        seekBar = (SeekBar) findViewById(R.id.seekBar2);
        //初始化AudioManager
        audioManager = (AudioManager) getSystemService(Context.AUDIO_SERVICE);
        //获取系统最大音量值
        maxVolume =audioManager.getStreamMaxVolume(AudioManager.STREAM_SYSTEM);
        //将seekBar的最大进度值设置成系统最大音量
        seekBar.setMax(maxVolume);
        //获取当前音量值
        currentVolume = audioManager.getStreamVolume(AudioManager.STREAM_SYSTEM);
        //设置当前值为进度条当前值
        seekBar.setProgress(currentVolume);

        //初始化Toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar1);
        //隐藏Actionbar后将toolbar设置上去替换Actionbar
        setSupportActionBar(toolbar);
        //seekbar设置监听
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            /*
            * seekbar改变时的事件监听处理
            * */
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                //设置拖动的进度值为系统音量
                audioManager.setStreamVolume(AudioManager.STREAM_SYSTEM,progress,0);
                //获取当前音量
                currentVolume = audioManager.getStreamVolume(AudioManager.STREAM_SYSTEM);
                //设置当前音量
                seekBar.setProgress(currentVolume);
/*                //获取屏幕属性
                WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
                //设置屏幕亮度
                layoutParams.screenBrightness =((float)seekBar.getProgress())/100;
                Log.d("debug",layoutParams.screenBrightness+"");
                Log.d("deb",seekBar.getProgress()+"");
                //更新窗口属性
                getWindow().setAttributes(layoutParams);*/
            }
            /*
            * 按住seekbar时的事件监听处理
            * */
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(SecondActivity.this,"按住seekbar",Toast.LENGTH_SHORT).show();
            }
            /*
            * 放开seekbar时的时间监听处理
            * */
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(SecondActivity.this,"放开seekbar",Toast.LENGTH_SHORT).show();
            }
        });
    }

    //创建toolbar菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    //toolbar菜单选择监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            Toast.makeText(SecondActivity.this,item.getTitle(),Toast.LENGTH_LONG).show();
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

    6.效果截图

图片分别为更改前系统音量值，Seekbar效果图，更改后系统音量值



4.xml绘制自定义SeekBar
    上面3进度条的绘制已经运用了xml绘制，下面我们就试着xml绘制一下进度条的滑块
    
    1.未按压时的xml绘制scrubber_shape.xml
    
<?xml version="1.0" encoding="utf-8"?>
    <shape  xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <size android:width="20dp" android:height="20dp"/>
        <solid android:color="@android:color/holo_orange_light" />
        <stroke android:color="#9370DB" android:width="4dp"/>
    </shape>

    
    2.按压时的xml绘制scrubber_focus_shape.xml
  
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size android:width="20dp" android:height="20dp"/>
    <solid android:color="@color/colorAccent" />
    <stroke android:color="#9370DB" android:width="4dp"/>
</shape>
  
    3.效果截图

   


   参考：http://stackoverflow.com/questions/16163215/android-styling-seek-bar
           
小巷下起了雨
关注
  • 4
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
android中seekbar 常用属性列表,Android 中Seekbar详解及简单实例
weixin_42444974的博客
05-26 3307
Android 中Seekbar详解及简单实例做到音频播放和音乐播放时，大多数都要用到Seekbar。现在我先简单介绍下Seekbar的几个重要属性。android:max 设置值的大小 .android:thumb=”@drawable/” 显示的那个可拖动图标，如果没有设置该参数则为系统默认,如果自己需要重新定义，则将自己需要的图标存放在资源目录 /res/drawable下，然后调用即可.a...
Android自定义有节点的纵向seekbar
denglixuan1996的博客
03-07 1071
首先声明，这份代码是我在原博主的代码上进行了一些修改，原博客链接： https://www.cnblogs.com/zhujiabin/p/5697255.html 我修改部分后实现的功能为： 下面直接简单粗暴的贴代码，其实就是修改一些长宽的参数，即可达到效果。 package com.example.dengfugui.flat.provider; imp...
Android中如何修改SeekBar的默认样式
tudusi
02-01 2449
SeekBar的默认样式如下： 想要修改成：（这种iphone的风格） step1:书写 seekbar_style.xml &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt...
自定义的分节seekBar,可做横向时间轴
07-15
自定义的分节的seekBar,继承于View,支持滑动改变进度，可指定尺寸颜色等属性，横向的时间轴效果
SeekBar 的详解
06-04
SeekBar 实现用户自定义界面，方便操作，增加体验效果！
Android控件之SeekBar
goodmentc的专栏
05-03 797
Android控件之SeekBar 1 SeekBar简介 SeekBar是进度条。我们使用进度条时，可以使用系统默认的进度条；也可以自定义进度条的图片和滑块图片等。 2 SeekBar示例 创建一个activity，包含2个SeekBar。 第1个SeekBar是系统默认的SeekBar。 第2个SeekBar是自定义SeekBar，使用自定义的背景图和滑块图片。 应用层代码
Android 基础知识4-3.8 SeekBar（拖动条）详解
yyxhzdm的博客
03-07 7431
拖动条类似进度条，不同的是用户可以控制，比如，应用程序中用户可以对音效进行控制，这就可以使用拖动条来实现。由于拖动条可以被用户控制，所以需要对其进行事件监听，这就需要实现SeekBar.onSeekBarChangeListener接口。在SeekBar中共需要监听3个事件，分别是：数值的改变（onProgressChanged）、开始拖动（onStartTrackingTouch）、停止拖动（onStopTrackingTouch）。在onProgressChanged中我们可以得到当前数值的大小。
android多段seekbar
Lu_Ca的博客
08-22 2894
最近项目中需要实现一个功能，用seekbar来实现，需要将seekbar分为4段，seekbar最大值为120，然后有一个吸附效果，不多说，上两张效果图：               当滑动条值小于33时，为0；当滑动条值在33到70时，为45；当滑动条值为70到104时，为80；当大于104时，为最大值120。 最开始一直使用的是一个单独的seekbar，在onProgressChan
android 打造变化多端的SeekBar（垂直和水平）
mmsx
02-27 6941
SeekBar相信用的人不是很多，一般都是用水平SeekBar就可以了。但是之前项目中考虑使用垂直的SeekBar，就要继承重写SeekBar才能用。而垂直SeekBar在百度搜了一下，关于这方面文章还是很少，有一些还是不全面。我又去了github找了一下，找到了一个垂直的效果以及源码，我就写了一个滚动SeekBar翻页listview的数据效果。所以这篇博客中源码下载中，有三个项目源码，干货多多
Android 进度条的实现---seekbar
木头的博客
06-28 961
实现效果比较不错，接下来粘一下代码&lt;SeekBar android:id="@+id/detail_seekbar" android:layout_width="match_parent" android:layout_height="20dp" android:thumbTint="#111" android:...
Android基本UI组件详解
11-14
TextView（标签文本） EditText（文本输入框） Button（按钮） ImageButton（图像按钮） ...SeekBar（滑动条） RatingBar（评分条） Chronometer（秒表） ZoomButton（缩放按钮） CalendarView（日历）
Android应用开发揭秘
03-28
15.6 AndroidUI优化 15.7 其他优化 15.7.1 zipalign 15.7.2 图片优化 15.8 小结 第五部分 扩展篇 第16章 Android NDK开发 16.1 AndroidNDK简介 16.2 安装和配置NDK开发环境 16.2.1 系统和软件需求 16.2.2 NDK开发...
Android UI(Switch)详解
热门推荐
Andy_lau
08-20 3万+
目录：     1.应用场景与概述     2.常用属性     3.简单使用     4.更改默认Switch的样式     5.自定义Switch      1.应用场景与概述     Switch是在4.0以后推出的，所以要注意开发时的minsdk设置,google在API 21后也推出support v7 包下的SwitchCompa的Material Design
Android 内置浏览器之webview
Andy_lau
02-22 1万+
目录：         1.webview概述             2.webview常用方法         3.webview基本使用                 3.1 真的基本使用（还有假的吗？白眼）                 3.2 cookie处理                 3.3 缓存处理                 3.4 页面
Android UI(CheckBox)详解
Andy_lau
08-07 1万+
目录： 1.CheckBox应用场景 2.CheckBox一般使用 3.自定义CheckBox 4.CheckBox在ListView中的问题 1.CheckBox应用场景 CheckBox应用于可多选的场景，比如多文件的增删改查，移动，以及爱好啊这些的选择等等 2.CheckBox简单使用     1)主布局文件 <LinearLayout xmlns:a
Android UI(RadioButton)详解
Andy_lau
08-04 1万+
目录：     1.应用场景           2.RadioButton一些重要属性            3.RadioButton简单使用         4.动态添加RadioButton选项         5.RadioButton自定义 1.应用场景     应用于在多项中只能选取单项的情况，例如性别，但必须与RadioGroup结合使用，如果单独使用的话无法达到
Android实现侧滑抽屉菜单(DrawerLayout+NavigationView+toolbar)
Andy_lau
09-20 9834
目录： 1.概述 2.实现过程与代码 1.概述 在android开发中，我们经常会有需求开发抽屉菜单，纵观当下的主流APP，大多首页都会有侧滑抽屉菜单，它的好处就在于，它可以 在有限的空间内显示尽量多的控件。 抽屉菜单的实现方式也有很多种方式，下面我仅仅是通过官方的DrawerLayout+NavigationView+toolbar来实现与导航栏相关联的抽屉 菜单。 2.
Android studio SeekBar
最新发布
09-26
SeekBar是Android Studio中的一个控件，它是ProgressBar的子类，具有类似于ProgressBar的水平风格。SeekBar可以用来显示和调整当前进度的滑块。它有三个重要的参数：max（最大值）、progress（当前进度）和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值