Question

我正在尝试构建一个显示Twitter，Facebook和Instagram Feed的应用程序。每个社交媒体平台我总共有三个片段，每个片段都包含Recyclerview。我面临着有效加载媒体的问题。我正在使用Picasso来加载图像并使用MediaPlayer处理视频。由于Feed包含视频和图像，因此我的布局文件中有ImageView和SurfaceView（ VideoView不会将视频填充到视图大小），并隐藏了ImageView或SurfaceView关于数据。我还构建了一个处理视频和图像的自定义SurfaceView，但它有点滞后。有没有更好的方法在单个视图中处理图像和视频？

任何帮助或改进都会有所帮助。谢谢

这是我的twitter列表项的布局文件。

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:custom_text="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="2dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingEnd="16dp"
    android:paddingStart="16dp">

    <LinearLayout
        android:id="@+id/retweet_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingTop="5dp"
        android:weightSum="1.0">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="20dp"
            android:layout_weight="0.15"
            android:contentDescription="@string/none"
            android:scaleType="fitEnd"
            android:src="@drawable/twitter_retweet" />

        <TextView
            android:id="@+id/retweet_user_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_weight="0.85"
            android:text="@string/text"
            android:textSize="12sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal"
        android:paddingBottom="8dp"
        android:paddingTop="5dp">

        <ImageView
            android:id="@+id/twitter_profilePicture"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:contentDescription="@string/none"
            android:scaleType="fitXY"
            android:src="@android:color/darker_gray" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <MerchantApp.Android.Controls.CustomTextView
                    android:id="@+id/twitter_userName"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="start"
                    android:ellipsize="end"
                    android:lines="1"
                    android:maxLength="20"
                    android:text="@string/text"
                    custom_text:customTypeface="Fonts/Roboto-Regular.ttf" />


                <MerchantApp.Android.Controls.CustomTextView
                    android:id="@+id/twitter_time"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:ellipsize="end"
                    android:gravity="end"
                    android:text="@string/text"
                    android:textSize="12sp"
                    custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/twitter_follow_follower_linear_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="2dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/followers_count"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="@string/text"
                    android:textSize="12sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/following_count"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginStart="5dp"
                    android:text="@string/text"
                    android:textSize="12sp"
                    android:textStyle="bold" />
            </LinearLayout>


            <MerchantApp.Android.Controls.CustomTextView
                android:id="@+id/twitter_feed_message"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="5dp"
                android:autoLink="all"
                android:ellipsize="end"
                android:maxLength="160"
                android:maxLines="4"
                android:paddingBottom="5dp"
                android:paddingTop="5dp"
                android:text="@string/text"
                custom_text:customTypeface="Fonts/Roboto-Regular.ttf" />


            <ImageView
                android:id="@+id/twitter_feed_image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_marginBottom="5dp"
                android:contentDescription="@string/none"
                android:scaleType="fitXY"
                android:src="@drawable/animated_loading" />

            <SurfaceView
                android:id="@+id/twitter_feed_video"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:visibility="gone" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="24dp"
                android:orientation="horizontal"
                android:weightSum="1.0">

                <ImageView
                    android:id="@+id/twitter_feed_reply"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.25"
                    android:background="?android:attr/selectableItemBackground"
                    android:contentDescription="@string/none"
                    android:scaleType="fitStart"
                    android:src="@drawable/twitter_reply" />


                <LinearLayout
                    android:id="@+id/twitter_retweeted_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="start"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_weight="0.25"
                    android:clickable="true"
                    android:gravity="center_vertical">

                    <ImageView
                        android:id="@+id/twitter_feed_retweeted_image"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:clickable="false"
                        android:contentDescription="@string/none"
                        android:scaleType="fitXY"
                        android:src="@drawable/twitter_retweet" />

                    <MerchantApp.Android.Controls.CustomTextView
                        android:id="@+id/twitter_feed_retweeted_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:layout_marginStart="5dp"
                        android:clickable="false"
                        android:ellipsize="end"
                        android:gravity="center_vertical|start"
                        android:lines="1"
                        android:text="@string/text"
                        android:textColor="@android:color/darker_gray"
                        android:textSize="12sp"
                        android:textStyle="bold"
                        custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/twitter_favorite_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="10dp"
                    android:layout_marginStart="10dp"
                    android:layout_weight="0.25"
                    android:clickable="true"
                    android:gravity="center_vertical">

                    <ImageView
                        android:id="@+id/twitter_feed_favorite_image"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:clickable="false"
                        android:contentDescription="@string/none"
                        android:scaleType="fitXY"
                        android:src="@drawable/twitter_favorite" />

                    <MerchantApp.Android.Controls.CustomTextView
                        android:id="@+id/twitter_feed_favorite_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:layout_marginStart="5dp"
                        android:clickable="false"
                        android:ellipsize="end"
                        android:gravity="center_vertical|start"
                        android:lines="1"
                        android:text="@string/text"
                        android:textColor="@android:color/darker_gray"
                        android:textSize="12sp"
                        android:textStyle="bold"
                        custom_text:customTypeface="Fonts/Roboto-Light.ttf" />
                </LinearLayout>


                <ImageView
                    android:id="@+id/feed_follow"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:layout_weight="0.25"
                    android:contentDescription="@string/none"
                    android:gravity="end"
                    android:scaleType="fitEnd"
                    android:src="@drawable/twitter_feed_follow" />


            </LinearLayout>


        </LinearLayout>
    </LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

Answer 1

我构建了一个MediaPlaceholder，它在运行时呈现videoview / imageview而不是隐藏它根据数据（即图像/ URL /视频），调用适当的方法。例如：makeSingleImageLoader（）/ makeUrlLoader（），makeVideoView（）.. 这不是有效的解决方案，但这种方式对我有用。

MediaPlaceHolder

public class MediaPlaceholder : LinearLayout
{
    Context mContext;
    PoppingImageView imageView;
    UrlLoader urlLoader;
    MultiImageView multiImageView;
    BufferingSurfaceView bufferingSurfaceView;


    public MediaPlaceholder(Context context) : base(context) {
        init(context);
    }

    public MediaPlaceholder(Context context, IAttributeSet attrs) : base(context, attrs) {
        init(context);
    }

    public MediaPlaceholder(Context context, IAttributeSet attrs, int defStyleAttr) : base(context, attrs, defStyleAttr) {
        init(context);
    }

    void init(Context context) {
        mContext = context;
    }


    void prepareView() {
        this.RemoveAllViews ();
        }


    public void makeUrlLoaderView(String url) {
        prepareView();
        if (urlLoader == null) {
            urlLoader = new UrlLoader(mContext);
        }
        urlLoader.loadPreview(url);
        AddView(urlLoader, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
    }

  //So if it is ImageView, this method is called and another custom view is rendered in the placeholder,   
  //PoppingImageView in this case and videoView in case of video
    public void makeSingleImageView(IMedia imageUrl) {
        prepareView();
        if (imageView == null) {
            imageView = new PoppingImageView(mContext);
        }
        imageView.setDataresources(imageUrl, 0).enableDialogPopup(true);
        AddView(imageView, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
    }

    public void makeVideoView(String videoUrl, int position) {
        prepareView();
        if (bufferingSurfaceView == null) {
            bufferingSurfaceView = new BufferingSurfaceView(mContext);
        }
        bufferingSurfaceView.setMediaSource(videoUrl,position);
        AddView(bufferingSurfaceView, new LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
    }
}

Answer 2

我遇到了类似的问题，并努力找出在列表中显示视频的最佳解决方案。

首先，您不应该使用VideoView或任何其他视图来播放由SurfaceView备份的视频。滚动时会有明显的滞后，所以绝对不是一个选择。最好使用TextureView。

二级，不喜欢使用多个MediaPlayer实例。每个新实例都会占用内存和CPU等资源。

我想出的解决方案是显示视频缩略图，而不是加载实际视频，除非正在播放视频。这样，您可以为每个视图重用播放器的单个实例。通常不需要同时播放多个视频。

我发布了一个库，可以作为一些用例的简单解决方案，或者作为如何实现所需行为的示例：https://github.com/touchlane/ExoVideoView

它使用ExoPlayer进行播放，因为它比内置的MediaPlayer更强大，更通用。此外，它与不同的编解码器具有更好的兼容性。

使用图像和视频加载recyclerview

2 个答案: