Android UI(SeekBar)详解

2021-12-07 14:03 Android开发

目录： 1.SeekBar的应用场景 2.SeekBar的简单使用与事件监听 3.图片资源自定义SeekBar+手机音量调节 4.xml绘制自定义SeekBar 1.SeekBar的应用场景 SeekBar的主要应用在音乐播放，视频播放，或者对音量调节，屏幕亮度调节的一些操作中，让用户可以手动的去改变相应的值。 2.SeekBar的简单使用与事件监听 1.activity_main.xml<pre class="brush:xml;toolbar:false"> <?xmlversion="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> <includelayout="@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></pre> 2.content_main.xml<pre class="brush:xml;toolbar:false"> <?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns: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">  <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="HelloWorld!"/> </RelativeLayout></pre> 3.主java类MainActivity.java<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("当前进度："+progress+"%"); Log.d("debug",String.valueOf(seekBar.getId())); } /* *按住seekbar时的事件监听处理 **/ @Override publicvoidonStartTrackingTouch(SeekBarseekBar){ Toast.makeText(MainActivity.this,"按住seekbar",Toast.LENGTH_SHORT).show(); } /* *放开seekbar时的时间监听处理 **/ @Override publicvoidonStopTrackingTouch(SeekBarseekBar){ Toast.makeText(MainActivity.this,"放开seekbar",Toast.LENGTH_SHORT).show(); } }); //浮动button实例化 FloatingActionButtonfab=(FloatingActionButton)findViewById(R.id.fab); //设置点击监听 fab.setOnClickListener(newView.OnClickListener(){ @Override publicvoidonClick(Viewview){ Snackbar.make(view,"Replacewithyourownaction",Snackbar.LENGTH_LONG) .setAction("Action",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> 4.效果截图 <img src="/up_pic/201812/181029485902.png" title="181029485902.png" alt="1.png"/>3.图片资源自定义SeekBar+手机音量调节 1.导入滑动块图片(scrubber.png scrubber_focus.png),进度条就直接xml绘制 2.scrubber_selector.xml<pre class="brush:xml;toolbar:false"><?xmlversion="1.0"encoding="utf-8"?> <selectorxmlns:android="http://schemas.android.com/apk/res/android"> <itemandroid:state_pressed="true"android:drawable="@drawable/scrubber_focus"/> <itemandroid:drawable="@drawable/scrubber"/> </selector></pre> 3.seekbar_layer.xml(进度条绘制)<pre class="brush:xml;toolbar:false"> <?xmlversion="1.0"encoding="utf-8"?> <layer-listxmlns:android="http://schemas.android.com/apk/res/android">   <itemandroid:id="@android:id/background"> <shapeandroid:shape="line"> <strokeandroid:width="1dp"android:color="#8B8378"/> <cornersandroid:radius="1dp"></corners> </shape> </item>  <itemandroid:id="@android:id/secondaryProgress"> <clip> <shapeandroid:shape="line"> <strokeandroid:width="1dp"android:color="#9932CC"/> <cornersandroid:radius="1dp"></corners> </shape> </clip> </item>  <itemandroid:id="@android:id/progress"> <clip> <shapeandroid:shape="line"> <strokeandroid:width="1dp"android:color="#CD5C5C"/> <cornersandroid:radius="1dp"></corners> </shape> </clip> </item> </layer-list></pre> 4.主布局activity_second.xml<pre class="brush:xml;toolbar:false"> <?xmlversion="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></pre> 5.主布局java类SecondActivity.java <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("debug",layoutParams.screenBrightness+""); Log.d("deb",seekBar.getProgress()+""); //更新窗口属性 getWindow().setAttributes(layoutParams);*/ } /* *按住seekbar时的事件监听处理 **/ @Override publicvoidonStartTrackingTouch(SeekBarseekBar){ Toast.makeText(SecondActivity.this,"按住seekbar",Toast.LENGTH_SHORT).show(); } /* *放开seekbar时的时间监听处理 **/ @Override publicvoidonStopTrackingTouch(SeekBarseekBar){ Toast.makeText(SecondActivity.this,"放开seekbar",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> 6.效果截图图片分别为更改前系统音量值，Seekbar效果图，更改后系统音量值<img src="/up_pic/201812/181028458946.png" title="181028458946.png"/><img src="/up_pic/201812/181028459518.png" title="181028459518.png"/><img src="/up_pic/201812/181030001498.png" title="181030001498.png" alt="4.png"/>4.xml绘制自定义SeekBar 上面3进度条的绘制已经运用了xml绘制，下面我们就试着xml绘制一下进度条的滑块 1.未按压时的xml绘制scrubber_shape.xml<pre class="brush:xml;toolbar:false"> <?xmlversion="1.0"encoding="utf-8"?> <shapexmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <sizeandroid:width="20dp"android:height="20dp"/> <solidandroid:color="@android:color/holo_orange_light"/> <strokeandroid:color="#9370DB"android:width="4dp"/> </shape></pre> 2.按压时的xml绘制scrubber_focus_shape.xml<pre class="brush:xml;toolbar:false"> <?xmlversion="1.0"encoding="utf-8"?> <shapexmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <sizeandroid:width="20dp"android:height="20dp"/> <solidandroid:color="@color/colorAccent"/> <strokeandroid:color="#9370DB"android:width="4dp"/> </shape></pre> 3.效果截图<img src="/up_pic/201812/181030212572.png" title="181030212572.png" alt="5.png"/>