android - 使用图像和视频加载 recyclerview

Question

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

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

这是我的 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));
    }
}