Android UI(SeekBar)详解

<p>目录:</p><p> 1.SeekBar的应用场景</p><p> 2.SeekBar的简单使用与事件监听</p><p> 3.图片资源自定义SeekBar+手机音量调节</p><p> 4.xml绘制自定义SeekBar</p><p> </p><p>1.SeekBar的应用场景</p><p> SeekBar的主要应用在音乐播放,视频播放,或者对音量调节,屏幕亮度调节的一些操作中,让用户可以手动的去改变相应的值。</p><p> </p><p>2.SeekBar的简单使用与事件监听</p><p> 1.activity_main.xml</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;android.support.design.widget.CoordinatorLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot; xmlns:tools=&quot;http://schemas.android.com/tools&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot; android:fitsSystemWindows=&quot;true&quot; tools:context=&quot;com.example.seekbarui.MainActivity&quot;&gt; &lt;android.support.design.widget.AppBarLayout android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot; android:theme=&quot;@style/AppTheme.AppBarOverlay&quot;&gt; &lt;android.support.v7.widget.Toolbar android:id=&quot;@+id/toolbar&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;?attr/actionBarSize&quot; android:background=&quot;?attr/colorPrimary&quot; app:popupTheme=&quot;@style/AppTheme.PopupOverlay&quot;/&gt; &lt;/android.support.design.widget.AppBarLayout&gt; &lt;includelayout=&quot;@layout/content_main&quot;/&gt; &lt;android.support.design.widget.FloatingActionButton android:id=&quot;@+id/fab&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:layout_gravity=&quot;bottom|end&quot; android:layout_margin=&quot;@dimen/fab_margin&quot; android:src=&quot;@android:drawable/ic_dialog_map&quot;/&gt; &lt;/android.support.design.widget.CoordinatorLayout&gt;</pre><p></p><p> 2.content_main.xml</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;RelativeLayoutxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot; xmlns:tools=&quot;http://schemas.android.com/tools&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot; android:paddingBottom=&quot;@dimen/activity_vertical_margin&quot; android:paddingLeft=&quot;@dimen/activity_horizontal_margin&quot; android:paddingRight=&quot;@dimen/activity_horizontal_margin&quot; android:paddingTop=&quot;@dimen/activity_vertical_margin&quot; app:layout_behavior=&quot;@string/appbar_scrolling_view_behavior&quot; tools:context=&quot;com.example.seekbarui.MainActivity&quot; tools:showIn=&quot;@layout/activity_main&quot;&gt; &lt;!-- android:max=&quot;&quot;:设置最大进度 android:progress=&quot;&quot;:设置当前进度 android:secondaryProgress=&quot;&quot;:设置第二进度 android:indeterminate=&quot;&quot;:设置是否为不明确进度进度条 android:thumb=&quot;&quot;:设置seekbar滑动快的图片 android:progressDrawable=&quot;&quot;:进度条背景图片 android:thumbTint=&quot;&quot;:滑动块颜色,API21以上才有效 --&gt; &lt;SeekBar android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot; android:id=&quot;@+id/seekBar&quot; android:layout_marginTop=&quot;50dp&quot; android:layout_marginBottom=&quot;10dp&quot; android:layout_alignParentLeft=&quot;true&quot; android:layout_alignParentStart=&quot;true&quot; android:max=&quot;100&quot; android:secondaryProgress=&quot;20&quot; android:progress=&quot;0&quot; android:indeterminate=&quot;false&quot;/&gt; &lt;TextView android:id=&quot;@+id/result&quot; android:layout_below=&quot;@+id/seekBar&quot; android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot; android:text=&quot;HelloWorld!&quot;/&gt; &lt;/RelativeLayout&gt;</pre><p></p><p> 3.主java类MainActivity.java</p><pre class="brush:java;toolbar:false"> packagecom.example.seekbarui; importandroid.os.Bundle; importandroid.support.design.widget.FloatingActionButton; importandroid.support.design.widget.Snackbar; importandroid.support.v7.app.AppCompatActivity; importandroid.support.v7.widget.Toolbar; importandroid.util.Log; importandroid.view.View; importandroid.view.Menu; importandroid.view.MenuItem; importandroid.widget.SeekBar; importandroid.widget.TextView; importandroid.widget.Toast; publicclassMainActivityextendsAppCompatActivity{ privateSeekBarseekBar; privateTextViewtextView; @Override protectedvoidonCreate(BundlesavedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //初始化Toolbar Toolbartoolbar=(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(newSeekBar.OnSeekBarChangeListener(){ /* *seekbar改变时的事件监听处理 **/ @Override publicvoidonProgressChanged(SeekBarseekBar,intprogress,booleanfromUser){ textView.setText(&quot;当前进度:&quot;+progress+&quot;%&quot;); Log.d(&quot;debug&quot;,String.valueOf(seekBar.getId())); } /* *按住seekbar时的事件监听处理 **/ @Override publicvoidonStartTrackingTouch(SeekBarseekBar){ Toast.makeText(MainActivity.this,&quot;按住seekbar&quot;,Toast.LENGTH_SHORT).show(); } /* *放开seekbar时的时间监听处理 **/ @Override publicvoidonStopTrackingTouch(SeekBarseekBar){ Toast.makeText(MainActivity.this,&quot;放开seekbar&quot;,Toast.LENGTH_SHORT).show(); } }); //浮动button实例化 FloatingActionButtonfab=(FloatingActionButton)findViewById(R.id.fab); //设置点击监听 fab.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ Snackbar.make(view,&quot;Replacewithyourownaction&quot;,Snackbar.LENGTH_LONG) .setAction(&quot;Action&quot;,null).show(); } }); } //创建toolbar菜单 @Override publicbooleanonCreateOptionsMenu(Menumenu){ //Inflatethemenu;thisaddsitemstotheactionbarifitispresent. getMenuInflater().inflate(R.menu.menu_main,menu); returntrue; } //toolbar菜单选择监听 @Override publicbooleanonOptionsItemSelected(MenuItemitem){ //Handleactionbaritemclickshere.Theactionbarwill //automaticallyhandleclicksontheHome/Upbutton,solong //asyouspecifyaparentactivityinAndroidManifest.xml. intid=item.getItemId(); //noinspectionSimplifiableIfStatement if(id==R.id.action_settings){ Toast.makeText(MainActivity.this,item.getTitle(),Toast.LENGTH_LONG).show(); returntrue; } returnsuper.onOptionsItemSelected(item); } }</pre><p> </p><p> 4.效果截图</p><p> <img src="/up_pic/201812/181029485902.png" title="181029485902.png" alt="1.png"/></p><p>3.图片资源自定义SeekBar+手机音量调节</p><p> 1.导入滑动块图片(scrubber.png scrubber_focus.png),进度条就直接xml绘制</p><p> 2.scrubber_selector.xml</p><pre class="brush:xml;toolbar:false">&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;selectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;itemandroid:state_pressed=&quot;true&quot;android:drawable=&quot;@drawable/scrubber_focus&quot;/&gt; &lt;itemandroid:drawable=&quot;@drawable/scrubber&quot;/&gt; &lt;/selector&gt;</pre><p> 3.seekbar_layer.xml(进度条绘制)</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;layer-listxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt; &lt;!-- 由于本人比较懒,就直接用xml代替图片,如果伙伴们有兴趣可以自己做一个progress进度条图片 注意:叠放顺序依次为background,secondaryProgress,progress cilp标签的作用就是跟随进度逐步显示图片,把图片分成N份逐个进度显示,避免在拖动过程中进度不走的情况 --&gt; &lt;!--背景进度条--&gt; &lt;itemandroid:id=&quot;@android:id/background&quot;&gt; &lt;shapeandroid:shape=&quot;line&quot;&gt; &lt;strokeandroid:width=&quot;1dp&quot;android:color=&quot;#8B8378&quot;/&gt; &lt;cornersandroid:radius=&quot;1dp&quot;&gt;&lt;/corners&gt; &lt;/shape&gt; &lt;/item&gt; &lt;!--第二进度条--&gt; &lt;itemandroid:id=&quot;@android:id/secondaryProgress&quot;&gt; &lt;clip&gt; &lt;shapeandroid:shape=&quot;line&quot;&gt; &lt;strokeandroid:width=&quot;1dp&quot;android:color=&quot;#9932CC&quot;/&gt; &lt;cornersandroid:radius=&quot;1dp&quot;&gt;&lt;/corners&gt; &lt;/shape&gt; &lt;/clip&gt; &lt;/item&gt; &lt;!--第一进度条--&gt; &lt;itemandroid:id=&quot;@android:id/progress&quot;&gt; &lt;clip&gt; &lt;shapeandroid:shape=&quot;line&quot;&gt; &lt;strokeandroid:width=&quot;1dp&quot;android:color=&quot;#CD5C5C&quot;/&gt; &lt;cornersandroid:radius=&quot;1dp&quot;&gt;&lt;/corners&gt; &lt;/shape&gt; &lt;/clip&gt; &lt;/item&gt; &lt;/layer-list&gt;</pre><p> 4.主布局activity_second.xml</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;android.support.design.widget.CoordinatorLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot; xmlns:tools=&quot;http://schemas.android.com/tools&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot; android:fitsSystemWindows=&quot;true&quot; tools:context=&quot;com.example.seekbarui.SecondActivity&quot;&gt; &lt;android.support.design.widget.AppBarLayout android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot; android:theme=&quot;@style/AppTheme.AppBarOverlay&quot;&gt; &lt;android.support.v7.widget.Toolbar android:id=&quot;@+id/toolbar1&quot; android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;?attr/actionBarSize&quot; android:background=&quot;?attr/colorPrimary&quot; app:popupTheme=&quot;@style/AppTheme.PopupOverlay&quot;/&gt; &lt;/android.support.design.widget.AppBarLayout&gt; &lt;SeekBar android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot; android:id=&quot;@+id/seekBar2&quot; android:layout_marginTop=&quot;60dp&quot; android:layout_marginBottom=&quot;10dp&quot; android:layout_alignParentLeft=&quot;true&quot; android:layout_alignParentStart=&quot;true&quot; android:max=&quot;100&quot; android:secondaryProgress=&quot;20&quot; android:progress=&quot;0&quot; android:progressDrawable=&quot;@drawable/seekbar_layer&quot; android:thumb=&quot;@drawable/scrubber_selector&quot; android:indeterminate=&quot;false&quot;/&gt; &lt;/android.support.design.widget.CoordinatorLayout&gt;</pre><p> 5.主布局java类SecondActivity.java </p><pre class="brush:java;toolbar:false"> packagecom.example.seekbarui; importandroid.content.Context; importandroid.media.AudioManager; importandroid.os.Bundle; importandroid.support.v7.app.AppCompatActivity; importandroid.support.v7.widget.Toolbar; importandroid.util.Log; importandroid.view.Menu; importandroid.view.MenuItem; importandroid.view.WindowManager; importandroid.widget.SeekBar; importandroid.widget.TextView; importandroid.widget.Toast; publicclassSecondActivityextendsAppCompatActivity{ privateSeekBarseekBar; privateTextViewtextView; privateAudioManageraudioManager; privateintcurrentVolume,maxVolume; privateintvolume=0; @Override protectedvoidonCreate(BundlesavedInstanceState){ 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 Toolbartoolbar=(Toolbar)findViewById(R.id.toolbar1); //隐藏Actionbar后将toolbar设置上去替换Actionbar setSupportActionBar(toolbar); //seekbar设置监听 seekBar.setOnSeekBarChangeListener(newSeekBar.OnSeekBarChangeListener(){ /* *seekbar改变时的事件监听处理 **/ @Override publicvoidonProgressChanged(SeekBarseekBar,intprogress,booleanfromUser){ //设置拖动的进度值为系统音量 audioManager.setStreamVolume(AudioManager.STREAM_SYSTEM,progress,0); //获取当前音量 currentVolume=audioManager.getStreamVolume(AudioManager.STREAM_SYSTEM); //设置当前音量 seekBar.setProgress(currentVolume); /*//获取屏幕属性 WindowManager.LayoutParamslayoutParams=getWindow().getAttributes(); //设置屏幕亮度 layoutParams.screenBrightness=((float)seekBar.getProgress())/100; Log.d(&quot;debug&quot;,layoutParams.screenBrightness+&quot;&quot;); Log.d(&quot;deb&quot;,seekBar.getProgress()+&quot;&quot;); //更新窗口属性 getWindow().setAttributes(layoutParams);*/ } /* *按住seekbar时的事件监听处理 **/ @Override publicvoidonStartTrackingTouch(SeekBarseekBar){ Toast.makeText(SecondActivity.this,&quot;按住seekbar&quot;,Toast.LENGTH_SHORT).show(); } /* *放开seekbar时的时间监听处理 **/ @Override publicvoidonStopTrackingTouch(SeekBarseekBar){ Toast.makeText(SecondActivity.this,&quot;放开seekbar&quot;,Toast.LENGTH_SHORT).show(); } }); } //创建toolbar菜单 @Override publicbooleanonCreateOptionsMenu(Menumenu){ //Inflatethemenu;thisaddsitemstotheactionbarifitispresent. getMenuInflater().inflate(R.menu.menu_main,menu); returntrue; } //toolbar菜单选择监听 @Override publicbooleanonOptionsItemSelected(MenuItemitem){ //Handleactionbaritemclickshere.Theactionbarwill //automaticallyhandleclicksontheHome/Upbutton,solong //asyouspecifyaparentactivityinAndroidManifest.xml. intid=item.getItemId(); //noinspectionSimplifiableIfStatement if(id==R.id.action_settings){ Toast.makeText(SecondActivity.this,item.getTitle(),Toast.LENGTH_LONG).show(); returntrue; } returnsuper.onOptionsItemSelected(item); } }</pre><p> 6.效果截图</p><p>图片分别为更改前系统音量值,Seekbar效果图,更改后系统音量值</p><p><img src="/up_pic/201812/181028458946.png" title="181028458946.png"/></p><p><img src="/up_pic/201812/181028459518.png" title="181028459518.png"/></p><p><img src="/up_pic/201812/181030001498.png" title="181030001498.png" alt="4.png"/></p><p>4.xml绘制自定义SeekBar</p><p> 上面3进度条的绘制已经运用了xml绘制,下面我们就试着xml绘制一下进度条的滑块</p><p> </p><p> 1.未按压时的xml绘制scrubber_shape.xml</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;shapexmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:shape=&quot;oval&quot;&gt; &lt;sizeandroid:width=&quot;20dp&quot;android:height=&quot;20dp&quot;/&gt; &lt;solidandroid:color=&quot;@android:color/holo_orange_light&quot;/&gt; &lt;strokeandroid:color=&quot;#9370DB&quot;android:width=&quot;4dp&quot;/&gt; &lt;/shape&gt;</pre><p> </p><p> 2.按压时的xml绘制scrubber_focus_shape.xml</p><pre class="brush:xml;toolbar:false"> &lt;?xmlversion=&quot;1.0&quot;encoding=&quot;utf-8&quot;?&gt; &lt;shapexmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:shape=&quot;oval&quot;&gt; &lt;sizeandroid:width=&quot;20dp&quot;android:height=&quot;20dp&quot;/&gt; &lt;solidandroid:color=&quot;@color/colorAccent&quot;/&gt; &lt;strokeandroid:color=&quot;#9370DB&quot;android:width=&quot;4dp&quot;/&gt; &lt;/shape&gt;</pre><p> </p><p> 3.效果截图</p><p><img src="/up_pic/201812/181030212572.png" title="181030212572.png" alt="5.png"/></p>
RangeTime:0.009889s
RangeMem:219.53 KB
返回顶部 留言