Android - 在图像/缩略图上叠加播放按钮的最佳方式

Android - Best way to overlay a play button on an image/thumbnail(Android - 在图像/缩略图上叠加播放按钮的最佳方式)

问题描述

我有一个可以播放音频/视频和显示图片的 android 应用程序.对于视频，我想在预览图像的顶部以及列表视图中叠加一个播放按钮..现在我的做法是使用 xml 中的 ImageView，然后 drawable 是我以编程方式定义的层层列表，因为其中一个图像是动态的，播放按钮当然是静态的.我想将播放按钮从底部对齐 10px，并水平居中.

I have an android application which can playback audio/video and show pictures. For videos I want to overlay a play button on top of the preview image and also in list views.. Right now how I'm doing it is with an ImageView in xml, and then the drawable is a layer layer-list which I define programmatically because one of the images is dynamic, the play button is static of course. I want to align the play button 10px from the bottom, and centered horizontally.

我的 ImageView 是这样定义的(在 xml 中)

My ImageView is defined like this (in xml)

<ImageView 
          android:id="@+id/EvidencePreview"      
          android:layout_width="267dp"
          android:layout_height="201dp"
          android:scaleType="centerCrop"
          android:layout_margin="3dp"
          android:layout_gravity="center_horizontal|center_vertical"/>

ImageView 是用户可以编辑标题和其他信息的表单的一部分.然后在我的活动中，我创建了这样的图层列表:

The ImageView is part of a form where the user can edit title and other information. Then in my activity now I create the layer list like this:

Resources resources = mContext.getResources();
Drawable playOverlayDrawable = resources.getDrawable(R.drawable.play_overlay_large);                        
Drawable[] layers = new Drawable[2];
layers[0] = Drawable.createFromPath(tb.filePath);
layers[1] = playOverlayDrawable;
LayerDrawable layerDrawable = new LayerDrawable(layers);
ViewGroup.LayoutParams lp = iv.getLayoutParams();

int imageHeight = lp.height;
int imageWidth = lp.width;
int overlayHeight = layers[1].getIntrinsicHeight();
int overlayWidth = layers[1].getIntrinsicWidth();
int lR = (imageWidth - overlayWidth) / 2;
int top = imageHeight - (overlayHeight + 10);
int bottom = 10;
layerDrawable.setLayerInset(1, lR, top, lR, bottom);
iv.setImageDrawable(layerDrawable);

这仅适用于图像的方向是水平的.请记住，图像/缩略图是 MINI_KIND，这意味着它应该是 512 x 384，但我看到它实际上不是大小.在我的手机上，它们是 480x800 或 800x480，具体取决于相机的方向在..由于我的布局宽度/高度是预先定义的，我只想要一种方法来防止播放按钮层完全缩放并每次都以相同的方式对齐..

This only works when the orientation of the image is horizontal. Keep in mind that the image/thumbnail is the MINI_KIND which means its supposed to be 512 x 384 but I'm seeing that it actually isn't the size.. On my phone they are either 480x800 or 800x480 depending on the orientation the camera was in.. Since my layout width/height is pre defined I just want a way to keep the play button layer from scaling at all and align it the same way everytime..

另一种明显的方法是使用相对布局(或者可能是框架布局?)，但我希望避免这种情况，因为我使用相同的代码来显示图像和视频(两者都是有一个图像缩略图预览——但只有视频应该有播放按钮).

The other obvious way to do this would be to use a relative layout (or perhaps a frame layout?) but I was hoping to avoid that since I'm using the same code for displaying both images and videos (both of which have an image thumbnail preview -- but only videos should have the play button on them).

知道如何将图层与图层列表对齐，或者使用同样或更好的替代方法吗?

Any idea how to align the layers with a layer list, or alternatives that would work just as well or better?

推荐答案

我最终使用了这样的 FrameLayout:

I ended up using a FrameLayout like this:

<FrameLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="3dp"
    android:layout_gravity="center_horizontal|center_vertical" >

<ImageView 
    android:id="@+id/MediaPreview"      
    android:layout_width="267dp"
    android:layout_height="201dp"
    android:scaleType="centerCrop"
    android:src="@drawable/loading" />

<ImageView
    android:id="@+id/VideoPreviewPlayButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="10dp"
    android:layout_gravity="center_horizontal|bottom"
    android:visibility="gone"
    android:src="@drawable/play_overlay_large" />

</FrameLayout>

然后，我只是将可见性设置为 View.VISIBLE 到视频的预览播放​​按钮，然后将其留给照片.对于我的列表视图，我使用了上面显示的图层列表方法，因为所有缩略图的尺寸都相同.希望这对其他人有帮助！

Then I just set the visibility to View.VISIBLE to the preview play button for videos and left it gone for photos. For my list view I used the layer list method shown above because all of the thumbnails were the same dimension. Hope this helps someone else!

请注意，ID 为 VideoPreviewPlayButton 的 ImageView 上的 layout_gravity 将其置于水平居中的底部，而 10dp paddingBottom 将其从底部向上移动了一点.

notice that the layout_gravity on the ImageView with id VideoPreviewPlayButton puts it at the bottom centered horizontally, and the 10dp paddingBottom moves it up a bit from the bottom.

这篇关于Android - 在图像/缩略图上叠加播放按钮的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！