Android 应用程序：处理大量图像水平滚动的最有效方法

Question

我想知道是否有更有效的方法来处理大量图像的水平滚动。

现在我正在使用 HorizontalScrollView 组件，它的唯一子组件是 Frame Layout。然后我在 Layout 上布置 ImageViews。它有效，但我注意到在某些设备上滚动非常不稳定，但在其他设备上非常流畅。

所以想知道有没有更好更高效的处理方式

一些代码片段：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/app_background"
tools:context="com.toyota.fanmojis.PostActivity">

<RelativeLayout
    android:layout_height="265dp"
    android:layout_width="match_parent"
    android:layout_alignParentBottom="true"
    android:id="@+id/keyboardLayout">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#C9C9C9"
        android:layout_alignParentTop="true"
        android:id="@+id/shareLayout">

        <RelativeLayout
            android:id="@+id/socialLayout"
            android:layout_centerHorizontal="true"
            android:layout_width="217dp"
            android:layout_height="40dp">

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/fb_button"
                android:layout_marginLeft="8dp"
                android:layout_centerVertical="true"
                android:background="@drawable/fb_color"
                android:scaleType="fitXY"
                android:contentDescription="Post via Facebook" />

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/twitter_button"
                android:layout_toRightOf="@id/fb_button"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:background="@drawable/twitter_color"
                android:scaleType="fitXY"
                android:contentDescription="Post via Twitter" />

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/sms_button"
                android:layout_toRightOf="@id/twitter_button"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:background="@drawable/sms_color"
                android:scaleType="fitXY"
                android:contentDescription="Post via SMS" />

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/email_button"
                android:layout_toRightOf="@id/sms_button"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:background="@drawable/email_color"
                android:scaleType="fitXY"
                android:contentDescription="Post via SMS" />

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/copy_paste_button"
                android:layout_toRightOf="@id/email_button"
                android:layout_marginLeft="10dp"
                android:layout_centerVertical="true"
                android:background="@drawable/copy"
                android:scaleType="fitXY"
                android:contentDescription="Post via SMS" />

        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:text="@string/share"
            android:id="@+id/textView"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/socialLayout"
           />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/fanmojisLayout"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/shareLayout">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="32dp"
            android:id="@+id/bottomViewLayout"
            android:layout_alignParentBottom="true"
            android:background="@drawable/red_background">

            <ImageButton
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:id="@+id/homeButton"
                android:layout_centerVertical="true"
                android:layout_alignParentLeft="true"
                android:background="@drawable/home"
                android:scaleType="fitXY"
                android:contentDescription="Go back to home" />

            <ImageButton
                android:layout_width="44dp"
                android:layout_height="31dp"
                android:id="@+id/backspaceButton"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:background="@drawable/delete_selector"
                android:layout_marginRight="1dp"
                android:layout_marginLeft="4dp"
                android:scaleType="fitXY"
                android:contentDescription="Go back to home" />

            <Button
                android:layout_width="44dp"
                android:layout_height="31dp"
                android:id="@+id/clearButton"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@id/backspaceButton"
                android:background="@drawable/clear_selector"
                android:scaleType="fitXY"
                android:contentDescription="Go back to home" />

        </RelativeLayout>

            <com.upinteractive.fanmojis.components.FanmojiHorizontalScrollView
            android:id="@+id/fanmojisScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/bottomViewLayout"
            android:scrollbars="none"
            android:animationCache="false"
            android:orientation="horizontal">

                <FrameLayout
                    android:id="@+id/fanmojiContentLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"/>

        </com.upinteractive.fanmojis.components.FanmojiHorizontalScrollView>

    </RelativeLayout>

</RelativeLayout>

<com.upinteractive.fanmojis.components.ChatBubble
    android:id="@+id/chatBubble"
    android:layout_width="220dp"
    android:layout_height="100dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/chat"/>

<RelativeLayout
    android:id="@+id/errorLayout"
    android:layout_width="300dp"
    android:layout_height="180dp"
    android:layout_marginTop="80dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/error_layout_bg"
    android:visibility="invisible">

    <TextView
        android:id="@+id/errorText"
        android:textColor="@android:color/white"
        android:textAlignment="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

以及使用图像加载框架布局的代码：

protected void setupScroll() {

    double hspacing = (displaymetrics.widthPixels - (IMAGE_SIZE * 6)) / 7;
    double hfixedspacing = hspacing;
    double vspacing = 5.0;
    double max = 0;

    double topSpacing = 20.0;
    double xPosition = hspacing;
    double yPosition = topSpacing;

    int row = 0;
    int col = 0;

    int viewcount = imageArray.length() / 18;

    int mod = (imageArray.length() % 18);
    if (mod > 6)
        viewcount++;

    FrameLayout fl = (FrameLayout) this.findViewById(R.id.fanmojiContentLayout);
    fl.setBackgroundColor(getResources().getColor(R.color.kb_bg_color));
    scrollView.setBackgroundColor(getResources().getColor(R.color.kb_bg_color));

    int inSampleSize = 0;

    try {
        for (int i = 0; i < imageArray.length(); i++) {
            JSONObject emoji = imageArray.getJSONObject(i);

            String basename = emoji.getString("name");
            String fullname = "f" + basename + "_small";

            int resourceID = getResources().getIdentifier(fullname, "drawable", getPackageName());

            if(i == 0){
                final BitmapFactory.Options options = new BitmapFactory.Options();
                options.inJustDecodeBounds = true;
                BitmapFactory.decodeResource(getResources(), resourceID, options);
                inSampleSize = Util.calculateInSampleSize(options,IMAGE_SIZE,IMAGE_SIZE);
            }

            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inSampleSize = inSampleSize;
            Bitmap b = BitmapFactory.decodeResource(getResources(), resourceID, options);

            FMImageView iv = new FMImageView(this);
            iv.name = basename;
            iv.fullname = fullname;
            iv.setImageBitmap(b);

            FrameLayout.LayoutParams imageParams = new FrameLayout.LayoutParams(IMAGE_SIZE, IMAGE_SIZE);
            imageParams.leftMargin = (int) xPosition;
            imageParams.topMargin = (int) yPosition;

            fl.addView(iv, imageParams);

            col++;

            if (col > 5) {
                col = 0;
                row++;

                if (row > 2) {
                    xPosition += hspacing + IMAGE_SIZE;
                    hfixedspacing = xPosition;
                } else {
                    xPosition = hfixedspacing;
                }

                yPosition += vspacing + IMAGE_SIZE;
            } else {
                xPosition += hspacing + IMAGE_SIZE;
            }

            if (xPosition > max)
                max = xPosition;

            if (row > 2) {
                xPosition = hfixedspacing;
                yPosition = topSpacing;
                row = 0;
                col = 0;
            }

        }
    } catch (JSONException je) {
        je.printStackTrace();
    }

    fl.setMinimumWidth((int) max + 200);
}

Answer 1

使用回收其视图的滚动组件可能会获得更好的性能。

尝试将 RecyclerView 与 GridLayoutManager 一起使用 orientation 属性设置为 "horizontal"。

您需要为 RecyclerView.

编写一个适配器

Android 应用程序：处理大量图像水平滚动的最有效方法

Android App: Most Efficient Way to Handle Horizontal Scrolling With Lots of Images

android

horizontal-scrolling

smooth-scrolling