手把手教你做视频播放器

Posted 2020-07-13 anddlecn

第4章 展示视频列表

在应用界面当中，经常需要使用列表来展示内容。
android SDK提供了ListView控件，来实现这种效果。

ListView需要和Adapter配合使用，ListView负责内容的显示，Adapter负责为ListView提供要展示的数据。

4.1 ListView的使用方法

使用ListView展示内容，通常分下面几个步骤，

1. 在布局文件中设置ListView布局；

   <ListView xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/list_view">
   </ListView>

2. 在Activity界面创建的时候（例如onCreate()当中），通过代码获取ListView；

   ListView lv = (ListView) findViewById(R.id.list_view);

3. 创建一个Adapter负责为ListView提供数据。Android SDK提供了很多类型的Adapter，ArrayAdapter CursorAdapter SimpleAdapter等等，它们都是BaseAdapter的子类，简化了Adapter的使用。要显示的数据和显示这项数据项的布局要设置给Adapter，

   //每一项要显示的数据是一个字符串，这里设置显示3项
   String data[] = {"a", "b", "c"};
   //指定显示的数据内容，以及显示每项内容的布局文件
   Adapter adapter ＝ new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1 , data);

   Android SDK提供了一些常用的数据项布局方式android.R.layout.simple_list_item_1 android.R.layout.simple_list_item_2等等。我们也可以自己设计每一项的布局方式。

4. 将Adapter设置给ListView，数据将以列表的形式被展示，

   lv.setAdapter(adapter);

5. 为显示的每个item添加，点击时代响应处理函数；

   lv.setOnItemClickListener(new OnItemClickListener() {
   
       @Override
       public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
           //添加需要响应的操作
       }
   });

综合以上的代码，就是，

ListView lv = (ListView) findViewById(R.id.list_view);
String data[] = {"a", "b", "c"};
Adapter adapter ＝ new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1 , data);
lv.setAdapter(adapter);
lv.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //添加需要响应的操作
    }
});

4.2 ListView内容的更新

如果需要展示的数据有变化，就需要更新ListView，需要注意，

1. 界面的更新需要在主线程进行（UI线程），如果在其他线程更新，系统有可能报错，并提示你“不能在非UI线程更新界面元素”；
2. 修改了Adapter中要展示的数据后，需要使用Adapter的notifyDataSetChanged()，界面就会刷新，看到修改的效果;
   例如，

    //要显示的数据用链表的形式保存；
    List data ＝ new ArrayList<String>();
    data.add("a");
    data.add("b");
    data.add("c");
    //指定显示的数据内容，以及显示每项内容的布局文件
    ArrayAdapter adapter ＝ new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1 , data);

    ......

    data.add("d");
    ArrayAdapter.notifyDataSetChanged();

4.3 自定义Adapter

虽然Android SDK为我们提供了好几种现成的Adapter使用，但有时它们也并不能完全符合我们的要求，要么用起来还是麻烦，要么大材小用。另外，为了把ListView介绍的全面一些，我们准备自定义一个Adapter。

4.3.1 定义数据项的布局

为了让列表的数据项按照我们设计的模样显示，我们需要为它设计一个布局，并把视频信息展示上去。

数据项的布局定义在res\layout\video_item.xml文件中，

1. 数据项显示在水平布局的LinearLayout中；
2. 视频缩略图用ImageView控件显示，给它的android:scaleType属性设置center，让缩略图居中放置，背景设置成应用主题的色调colorPrimary；
3. 其他视频信息包含标题和创建时间，将它们竖直排列放在一个LinearLayout中，占用高度按照2:1分配，前者使用主题中较大的字体?android:attr/textAppearanceMedium，后者使用主题中较小的字体?android:attr/textAppearanceSmall；
4. 至于各个组件之间的间隔，根据自己的视觉偏好调整就好了，用android:padding和android:layout_margin设置；

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/vidoe_thumb"
        android:layout_width="150dp"
        android:layout_height="100dp"
        android:scaleType="center"
        android:padding="5dp"
        android:layout_margin="5dp"
        android:background="@color/colorPrimary"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/video_title"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center_vertical"
            android:layout_margin="2dp"
            style="?android:attr/textAppearanceMedium"
            android:lines="2"
            android:layout_weight="2"/>

        <TextView
            android:id="@+id/video_date"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:gravity="center_vertical"
            android:layout_margin="2dp"
            style="?android:attr/textAppearanceSmall"
            android:singleLine="true"
            android:layout_weight="1"/>
    </LinearLayout>
</LinearLayout>

4.3.2 定义Adapter

所有Adapter都是继承自BaseAdapter的，我们这里的Adapter准备继承自它的一个子类ArrayAdapter。因为ArrayAdapter在最原始的基础上作出了改进，我们再在它的基础上做一些小的调整就可以用了，而不用完全从头来过。

1. 继承ArrayAdapter，将显示的数据类型指定成VideoItem；重新构造函数，传入Context，数据项布局使用的布局ID，要显示的数据列表；重写它的getView()方法；

   public class VideoItemAdapter extends ArrayAdapter<VideoItem> {
   
       public VideoItemAdapter(Context context, int resource, List<VideoItem> objects) {
           super(context, resource, objects);
   
       }
   
       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
   
           return null;
       }
   }

2. 在构造函数中，保存好布局ID以后使用，通过Context获取Inflater，为以后数据项布局的创建做准备，

   private final LayoutInflater mInflater;
   private final int mResource;
   
   public VideoItemAdapter(Context context, int resource, List<VideoItem> objects) {
       super(context, resource, objects);
       mInflater = LayoutInflater.from(context);
       mResource = resource;
   }

3. 在getView()函数中，创建数据项的布局，并为他们赋值，最后将这个布局返回给ListView，让它显示，

   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
   
       if (convertView == null) {
           convertView = mInflater.inflate(mResource, parent, false);
       }
   
       VideoItem item = getItem(position);
   
       TextView title = (TextView) convertView.findViewById(R.id.video_title);
       title.setText(item.name);
   
       TextView createTime = (TextView) convertView.findViewById(R.id.video_date);
       createTime.setText(item.createdTime);
   
       ImageView thumb = (ImageView) convertView.findViewById(R.id.vidoe_thumb);
       thumb.setImageBitmap(item.thumb);
   
       return convertView;
   }

   这里的convertView就是数据项所代表的那个布局，当ListView刚创建，还没有产生任何数据项的时候，它就是为null的，此时我们就需要创建一个布局，并通过getView()将这个布局返回给ListView。

   假如ListView上的数据项布局已经足够了，那么这里传入的convertView就不会再是“null”，而是之前的某个数据项布局，我们就不必为此重新创建了，只需要更新上面的内容就好。这样提高了界面刷新的效率。

   当然，这里还能通过其他方法减少使用findViewById()，进一步提高效率，不过目前就不改进了，先把功能实现完成。

4.4 使用VideoItemAdapter

1. 在Video List的Activity创建之时，我们在onCreate()中创建并设置VideoAdapter，

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_video_list);
   
       mVideoList = new ArrayList<VideoItem>();
       mVideoListView = (ListView) findViewById(R.id.video_list);
       VideoItemAdapter adapter = new VideoItemAdapter(this, R.layout.video_item, mVideoList);
       mVideoListView.setAdapter(adapter);
       //设置数据项被点击的监听器
       mVideoListView.setOnItemClickListener(this);
   
       mVideoUpdateTask = new VideoUpdateTask();
       mVideoUpdateTask.execute();
   }

2. 在VideoUpdateTask的onProgressUpdate中，将获取的新的视频信息，添加到数据列表中，并使用notifyDataSetChanged()刷新，

   @Override
   protected void onProgressUpdate(VideoItem... values) {
   
       VideoItem data = values[0];
   
       mVideoList.add(data);
       VideoItemAdapter adapter = (VideoItemAdapter) mVideoListView.getAdapter();
       adapter.notifyDataSetChanged();
   }

   ---

   至此，视频列表的界面就能看到视频列表了。
   

   
   
   

第5节 刷新与停止刷新列表

虽然经过我们的假设，忽略了很多不需要关注的视频文件，但设备上依然有可能有很多的满足了我们假设条件的视频存在，这时就需要一个“取消刷新”的功能。

如果视频还没有刷新完，就被取消了，然后又希望继续刷新，那么还需要一个手动开始“刷新”的功能。

因此，准备在ActionBar的右上角，设置一个菜单项，让用户可以“刷新”，也能“停止刷新”。

5.1 添加刷新菜单项

在制作“计算器”的文档里面，我们已经介绍了如何添加ActionBar菜单项，以及如何响应菜单项的点击，

定义菜单项到res\xml\menu.xml文件中，app:showAsAction属性设置成walways，

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/menu_refresh"
        app:showAsAction="always"
        android:title="@string/refresh"/>
</menu>

5.3.2 问题2

问题1的解法又引入了另一个问题：如果有的视频是重复的，那么能不能在给它创建视频缩略图的时候，先忽略掉它，因为创建视频缩略图是个非常消耗内存和时间的事情。

所以我们要修改一下创建缩略图的策略，不要让它已开始就创建，而是让我们根据条件来决定是否要创建缩略图。

1. 修改VideoItem的设计成，

   VideoItem(String strPath, String strName, String createdTime) {
   
       this.path = strPath;
       this.name = strName;
   
       SimpleDateFormat sf = new SimpleDateFormat("yy年MM月dd日HH时mm分");
       Date d = new Date(Long.valueOf(createdTime)*1000);
       this.createdTime = sf.format(d);;
   }
   
   //将创建缩略图的功能独立出来
   void createThumb()
   {
       if(this.thumb == null)
       {
           this.thumb = ThumbnailUtils.createVideoThumbnail(this.path, MediaStore.Images.Thumbnails.MINI_KIND);
       }
   }
   
   //与createThumb()对应，需要一个释放bitmap资源的方法
   void releaseThumb()
   {
       if(this.thumb != null){
           this.thumb.recycle();
           this.thumb = null;
       }
   }

2. 在VideoUpdateTask的doInBackground()函数中，

   @Override
   protected Void doInBackground(Object... params) {
   
       ......
       if(cursor != null)
       {
           while(cursor.moveToNext())
           {
               ......
               VideoItem item = new VideoItem(path, name, createdTime);
   
               if(mVideoList.contains(data) == false) {
                   //判断需要添加，才创建缩略图
                   item.createThumb();
                   publishProgress(item);  
   
               }
           }
   
           cursor.close();
       }
   
       return null;
   }

5.3.3 问题3

如果用户暂停刷新后，设备中的视频因为别的原因被删除了一个，即使采用问题1的解决办法也不会有效果，因为ListView中的保存的视频信息个数比真实刷新到的要多，没有把ListView中多余的数据给清除掉。

所以，要把ListView中所有多余的视频清除，只能在视频查询完成后才能进行，而且这些真正存在的视频信息还得保存下来，在最后的比较中会使用到。

1. 将真正存在的视频信息，再保存一份，

   List<VideoItem> mDataList = new ArrayList<VideoItem>();
   
   @Override
   protected Void doInBackground(Object... params) {
   
       ......
       if(cursor != null)
       {
           while(cursor.moveToNext())
           {
               ......
               VideoItem item = new VideoItem(path, name, createdTime);
   
               if(mVideoList.contains(data) == false) {
                   data.createThumb();
                   publishProgress(item);  
   
               }
   
               //保存起来
               mDataList.add(data);
   
           }
   
           cursor.close();
       }
   
       return null;
   }

2. VideoUpdateTask结束工作以后(无论是取消还是顺利完成)，会调用到onCancelled() onPostExecute()，所以可以在它们共同调用的updateResult()中清除ListView中多余的视频信息，

   private void updateResult() {
   
       ......
       for(int i = 0; i < mVideoList.size(); i++)
       {
           if(!mDataList.contains(mVideoList.get(i)))
           {
               //释放缩略图占用的内存资源
               mVideoList.get(i).releaseThumb();
               //从ListView的数据集中移除多余的视频信息
               mVideoList.remove(i);
               //因为移除了一个视频项，下一个视频项的序号就被减小了一个1
               i--;
           }
       }
       mDataList.clear();
   
       //通知`ListView`数据有改变，需要刷新
       VideoItemAdapter adapter = (VideoItemAdapter) mVideoListView.getAdapter();
       adapter.notifyDataSetChanged();
   }

---

至此，视频刷新的功能就完成了。