第13章 多 媒 体
本章介绍App开发常见的多媒体技术,主要包括如何使用各种图像控件实现自定义相册、如何使用视频相关控件实现视频播放器,另外介绍四大组件之一的ContentProvider的基本概念与常见用法。最后结合本章所学的知识演示一个实战项目“音乐播放器——浪花音乐”的设计与实现。
13.1 相 册
本节介绍自定义相册的实现过程,首先说明使用画廊或循环视图如何实现简单相册;接着阐述使用图像切换器如何实现相册的左右滑动功能;然后分别介绍卡片视图与调色板的用法,并结合上述图像控件完成一个图片查看器——青青相册。
13.1.1 画廊Gallery
前几章使用文件对话框打开图片时只能看到图片的文件名,看不到图片的缩略图,对用户来说很不方便,因为光看文件名怎么知道这张图片什么模样呢?如果是在电脑上,就可以查看一组图片的缩略图列表,很容易找到想要的图片。在手机上可以使用相应的图像控件做出缩略图展示的相册效果。
画廊Gallery是专门用于展示图片列表的控件,左右滑动手势即可展示内嵌的图片列表,画面效果类似于一个平面万花筒。尽管Android将Gallery标记为Deprecation(表示已废弃),建议开发者采用HorizontalScrollView或ViewPager代替,不过Gallery用来轮播图片是一个挺好的选择。不妨了解一下Gallery控件,并结合其他控件加深对图像开发的理解。
下面是Gallery的常用方法说明。
? setSpacing:设置图片之间的间隔大小,对应的XML属性是spacing。
? setUnselectedAlpha:设置未选定图片的透明度,对应的XML属性是unselectedAlpha。取值范围为0.0~1.0,0.0表示完全透明,1.0表示完全不透明。
? setAdapter:设置画廊的适配器。
? getSelectedItemId:获取当前选中的视图序号。
? setSelection:设置当前选中第几个视图。
? setOnItemClickListener:设置单项的点击监听器。
使用画廊看起来很简单,接下来试着用Gallery结合ImageView实现观看画廊的相册效果。首先在布局文件中放置一个框架布局FrameLayout,里面放一个画廊控件与一个图像视图控件,ImageView设置为充满整个屏幕,Gallery放在屏幕下方;然后监听Gallery控件的单项点击事件,当用户点击指定图片项时,使用ImageView控件填充该图片,也就是点小图看大图。
下面是通过Gallery与ImageView实现简单相册的代码:
public class GalleryActivity extends AppCompatActivity implements OnItemClickListener {
private ImageView iv_gallery;
private Gallery gl_gallery;
private int[] mImageRes = { R.drawable.scene1, R.drawable.scene2, R.drawable.scene3,
R.drawable.scene4, R.drawable.scene5, R.drawable.scene6 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_gallery);
iv_gallery = (ImageView) findViewById(R.id.iv_gallery);
iv_gallery.setImageResource(mImageRes[0]);
int dip_pad = Utils.dip2px(this, 20);
gl_gallery = (Gallery) findViewById(R.id.gl_gallery);
gl_gallery.setPadding(0, dip_pad, 0, dip_pad);
gl_gallery.setSpacing(dip_pad);
gl_gallery.setUnselectedAlpha(0.5f);
gl_gallery.setAdapter(new GalleryAdapter(this, mImageRes));
gl_gallery.setOnItemClickListener(this);
}
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
iv_gallery.setImageResource(mImageRes[position]);
}
}
Gallery相册的画面效果如图13-1和图13-2所示。其中,图13-1所示为展示相册第一张图片时的画面;图13-2所示为点击第二张小图时,屏幕展示第二张大图的画面。
图13-1 画廊展示第一张图片 图13-2 画廊展示第二张图片
如果想用其他控件替代Gallery,就可以考虑使用功能强大的循环视图RecyclerView。具体实现时主要是定义一个水平方向的线性布局管理器,然后通过适配器填入图片列表。
使用RecyclerView与ImageView实现相册的代码很简单,举例如下:
public class RecyclerViewActivity extends AppCompatActivity implements OnItemClickListener {
private ImageView iv_photo;
private RecyclerView rv_photo;
private int[] mImageRes = { R.drawable.scene1, R.drawable.scene2, R.drawable.scene3,
R.drawable.scene4, R.drawable.scene5, R.drawable.scene6 };
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_view);
iv_photo = (ImageView) findViewById(R.id.iv_photo);
iv_photo.setImageResource(mImageRes[0]);
rv_photo = (RecyclerView) findViewById(R.id.rv_photo);
LinearLayoutManager manager = new LinearLayoutManager(this);
manager.setOrientation(LinearLayout.HORIZONTAL);
rv_photo.setLayoutManager(manager);
PhotoAdapter adapter = new PhotoAdapter(this, mImageRes);
adapter.setOnItemClickListener(this);
rv_photo.setAdapter(adapter);
rv_photo.setItemAnimator(new DefaultItemAnimator());
rv_photo.addItemDecoration(new SpacesItemDecoration(20));
}
@Override
public void onItemClick(View view, int position) {
iv_photo.setImageResource(mImageRes[position]);
rv_photo.scrollToPosition(position);
}
}
使用RecyclerView方式实现的相册效果如图13-3和图13-4所示。其中,图13-3所示为展示相册第3张图片时的画面;图13-4所示为点击第4张小图时,屏幕展示第4张大图的画面。
图13-3 循环视图展示第3张图片 图13-4 循环视图展示第4张图片
13.1.2 图像切换器ImageSwitcher
可能读者已经发现,前面Gallery相册在切换大图时比较生硬,前后两张图片闪一下就切过去了,用户体验不够友好。有没有办法让图片切换自然一些呢,比如通过渐变动画的方式?答案肯定是有的,就是把占据整个屏幕的图像视图ImageView换成图像切换器ImageSwitcher,然后通过ImageSwitcher实现前后图片的切换动画。
ImageSwitcher继承自视图动画器ViewAnimator,用于承载前后两个图像的变换动画;与之对应的是,文本切换器TextSwitcher承载前后两个文本的变换动画;第11章介绍的飞掠视图ViewFlipper是从ViewAnimator派生而来,读者已经知道它用来承载前后两个视图的变换动画。
下面介绍ImageSwitcher的常用方法。
? setFactory:设置一个视图工厂。该视图工厂由ViewFactory派生而来,需重写makeView方法返回工厂的具体视图。对于ImageSwitcher来说,工厂返回的是ImageView对象。
? setImageResource:设置当前图像的资源ID。该方法与下面的setImageDrawable方法和setImageURI方法为三选一操作,调用了其中一个方法,就无须调用另外两个方法。
? setImageDrawable:设置当前图像的Drawable对象。
? setImageURI:设置当前图像的URI地址。
? setInAnimation:设置后一个图像的进入动画。
? setOutAnimation:设置前一个图像的退出动画。
这里运用的动画技术跟第11章和第12章的飞掠视图类似。首先,对前后图片的切换动画可以事先设置好集合动画,通过setInAnimation和setOutAnimation方法完成动画调用;其次,前后图片的切换操作不但可由Gallery控件的点击操作出发,而且可由手势的左滑和右滑操作触发,这要借助于手势检测器GestureDetector,通过检测左滑手势和右滑手势自动轮播 图片。
按照以上的设计思路使用ImageSwitcher实现相册切换动画的代码如下:
public void onItemClick(AdapterView parent, View view, int position, long id) {
is_switcher.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in));
is_switcher.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_out));
is_switcher.setImageResource(mImageRes[position]);
}
public class ViewFactoryImpl implements ViewFactory {
@Override
public View makeView() {
ImageView iv = new ImageView(ImageSwitcherActivity.this);
iv.setBackgroundColor(0xFFFFFFFF);
iv.setScaleType(ScaleType.FIT_XY);
iv.setLayoutParams(new ImageSwitcher.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
return iv;
}
}
@Override
public boolean onTouch(View v, MotionEvent event) {
mGesture.onTouchEvent(event);
return true;
}