美文网首页
Android自定义的SeekBar

Android自定义的SeekBar

作者: 好奇的小刺猬 | 来源:发表于2017-08-08 21:38 被阅读3746次
  • TextView设置删除线
mTvDemo.setPaintFlags(Paint.STRIKE_THRU_TEXT_FLAG);
  • TextView设置文本格式
mTvPay.setText(String.format(getString(R.string.price_format_pay), mPayDetail.price));
其中
<string name="price_format_pay">支付¥%1$s</string>
更多的格式,比如视频播放时间:特殊符号用\转义,02d表示接收的是数字,格式为两位,不足的前面补0。这个格式接收两个数字作为参数,下面的设置会显示03'19''
<string name="mv_video_time">%1$02d\'%2$02d\"</string>
mTvTime.setText(String.format(getString(R.string.mv_video_time), 3,19));
  • 自定义带二级进度的seekbar样式
    效果图:
image.png
  1. seekbar的xml
        <SeekBar
            android:id="@+id/sb_player_seek_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:maxHeight="3dp"
            android:minHeight="3dp"
            android:background="@null"
            android:paddingLeft="4dp"
            android:paddingRight="4dp"
            android:progressDrawable="@drawable/seekbar_bkg"
            android:thumb="@drawable/icon_play_seek_point"/>

icon_play_seek_point是一个进度标志的icon,android:maxHeight与android:minHeight控制进度条的高度,这个不影响进度icon的大小。

  1. 进度相关的drawable:seekbar_bkg.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/seekbar_progress_bkg"/>
    <item android:id="@android:id/secondaryProgress">
        <clip android:drawable="@drawable/seekbar_progress_second" />
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress_first" />
    </item>
</layer-list>
  1. 各级背景的xml:

3.1 seekbar_progress_bkg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="3dp" android:color="@color/global_ffe0e0e0" />
</shape>

3.2 seekbar_progress_first.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="3dp" android:color="@color/global_ffff4338" />
</shape>

3.3 seekbar_progress_second.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke android:width="3dp" android:color="@color/global_ffe0e0e0" />
</shape>

3.4 取消seekbar的点击和滑动功能,只作为展示用

 mSeekBar.setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
           // 禁止拖动和点击
           return true;
       }
     });
  • 设计说要加上圆角,正好精简一下:
  1. 直接用一个样式搞定,seekbar_bkg_two_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>
            <solid android:color="@color/global_ffe0e0e0"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="@color/global_ff666666" />
                <corners android:radius="4dp"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="@color/global_ffff4338" />
                <corners android:radius="4dp"/>
            </shape>
        </clip>
    </item>

</layer-list>
  1. 定义一个style用于格式通用:
    <style name="mv_video_play_seekbar">
        <item name="android:maxHeight">3dp</item>
        <item name="android:minHeight">3dp</item>
        <item name="android:max">100</item>
        <item name="android:background">@null</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:layout_marginLeft">3dp</item>
        <item name="android:layout_marginRight">3dp</item>
        <item name="android:thumbOffset">8dp</item>
        <item name="android:progressDrawable">@drawable/seekbar_bkg_two_progress</item>
        <item name="android:thumb">@drawable/icon_play_seek_point</item>
    </style>
  1. 关于Activity主题的问题:
    系统SeekBar的thumb用的带阴影的png,当Activity时非透明的主题时,尽管边界为透明,阴影还是会影响显示,圆形两侧有缝隙:
image.png image.png

所以用带阴影的切图的话,上下可以有透明阴影,两端不能有投影,要紧贴圆形的左右边界,都是因为没有仔细想,只是一味的看现象改代码。最后,用layer-list代码创造阴影:
style中改为:

<item name="android:thumb">@drawable/seek_bar_thumb_shadow</item>

其中seek_bar_thumb_shadow.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>
            <solid android:color="@color/global_ffe0e0e0"/>
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="@color/global_ff666666" />
                <corners android:radius="4dp"/>
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="@color/global_ffff4338" />
                <corners android:radius="4dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

一个简单的样式,如此多细节,关键是没有真正弄明白各种样式,主题和作用机制,面向运气编程果真不靠谱啊!
所以,去自定义吧

相关文章

网友评论

      本文标题:Android自定义的SeekBar

      本文链接:https://www.haomeiwen.com/subject/uayxrxtx.html