发布：2021/10/15 16:20:30作者：管理员 来源：本站 浏览次数：1171

项目用到商品展示的视频，要可以看小视频，则用了VideoView 加 MediaController

1.  设置了 Theme = "@android:style/Theme.Black.NoTitleBar" 的进度条的效果 （惨不忍睹）


2. 没设置 Theme = "@android:style/Theme.Black.NoTitleBar" 的进度条的效果（还能接受）


3. 但项目要求红色的进度条，类似网易云音乐那种，这时就得要自定义 进度条SeekBar 的样式了

3.1  自定义进度条中滑动的圆球样式

    <?xml version="1.0" encoding="utf-8" ?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
     
      <!-- 白色圆点-->
      <solid android:color="@color/White" />
     
      <corners android:radius="8dp"/>
     
      <size
          android:height="15dp"
          android:width="15dp"/>
     
    </shape>

3.2 自定义进度条样式

    <?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 android:shape="rectangle" >
          <solid android:color="@color/White" />
          <!--设置圆角   -->
          <corners android:radius="5dp" />
        </shape>
      </item>
      <item
          android:id="@android:id/progress">
        <clip>
          <shape android:shape="rectangle" >
            <corners android:radius="5dp" />
     
            <solid android:color="@color/Red" />
          </shape>
        </clip>
      </item>
    </layer-list>

相关知识，可以看下Android原生这边的几个博客

http://mawenhao19930620.blog.163.com/blog/static/1285753612011112131423826/

http://blog.csdn.net/hhy018/article/details/44853217?locationNum=10&fps=1


4. 想要将VideoView和进度条等相关的控件封装起来，就得写个组合控件了，由于组合控件布局用了FrameLayout，写个继承FrameLayout 的类
4.1 构造函数 初始化布局

    #region 构造函数
            public VideoViewLayout(Context context) : this(context, null)
            {
                //this(context, null);
            }
     
            public VideoViewLayout(Context context, IAttributeSet attrs) : base(context, attrs)
            {
                // 导入布局  
                LayoutInflater.From(context).Inflate(Resource.Layout.VideoViewLayout, this, true);
     
            }
    #endregion


4.2 进度条控件SeekBar的事件 这样就能监听SeekBar控件的动态值

    #region 视频进度条接口函数实现
     
            public void OnProgressChanged(SeekBar seekBar, int progress, bool fromUser)
            {
                // 控件拖动改变的值
            }
     
            public void OnStartTrackingTouch(SeekBar seekBar)
            {
                // 控件开始拖动
            }
     
            public void OnStopTrackingTouch(SeekBar seekBar)
            {
                // 控件停止拖动
            }
     
     #endregion

4.3 更新播放进度

1> 更新控件文本得在主线程，所以定义一个Handler

    #region 内部类
            public class VideoViewHandler : Handler
            {
                private VideoViewLayout videoViewLayout;
     
                public VideoViewHandler(VideoViewLayout videoViewLayout)
                {
                    this.videoViewLayout = videoViewLayout;
                }
                public override void HandleMessage(Message msg)
                {
                    base.HandleMessage(msg);
     
                    if (msg.What == 1)
                    {
                        videoViewLayout.NotifyData();
                    }
     
                    if (msg.What == 2)
                    {
                        videoViewLayout.HideVideoStatusBar();
                    }
     
                }
            }
    #endregion

2> 定义一个循环，1秒种给上面定义的Handler发一次消息，更新播放进度显示

    /// <summary>
            /// 视频播放进度跟踪
            /// </summary>
            public void PlayVdieo()
            {
                Java.Lang.Runnable run = new Java.Lang.Runnable(() =>
                {
                    while (continuePlay)
                    {
                        Java.Lang.Thread.Sleep(1000);
     
                        Message message = new Message();
                        message.What = 1;
     
                        //发送信息给handler
                        handler.SendMessage(message);
                    }
                });
                new Java.Lang.Thread(run).Start();
            }

5. 使用

5.1 XML 文件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
      <CustomVideoView.VideoViewLayout
          android:id="@+id/VideoViewLayout"
          android:layout_width="match_parent"
          android:layout_height="@dimen/ProductD_Pic_H"
        />
    </LinearLayout>


5.2 类文件

    var layout = FindViewById<VideoViewLayout>(Resource.Id.VideoViewLayout);
    // 初始化视频链接
    layout.InitUrl("https://tbm.alicdn.com/4avTDEcUOjPu5HXisqp/GXle5GDB7ILjZ5T9n9q%40%40hd.mp4");
    // 初始化布局
    layout.InitView();


6. 项目地址：https://github.com/harrylsp/CustomVideoView