Question

我尝试在我的活动中使用列表视图的网格视图，但是我收到了错误。

还有其他方法可以获得以下结果吗？

在我的主要活动中，我希望有一个列表视图显示larg imageview，第二个显示为每行2个图像，我应该使用网格视图还是第二个列表视图就足够了？

这是我的代码

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fillViewport="true" >

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
          android:text="sssss"
            android:textSize="16sp"
            android:padding="10dp"
            android:background="#ffe474" />

        <ListView
            android:id="@+id/list3"
            android:layout_width="wrap_content"
            android:layout_height="1500dp"
            android:background="#eeeeee" >
        </ListView>

         <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="Recommanded"
            android:textSize="18sp"
            android:padding="10dp"
            android:background="#ffe474" />


        <ListView
            android:id="@+id/list1"
            android:layout_width="wrap_content"
            android:layout_height="1500dp"
            android:background="#eeeeee" >
        </ListView>

    </LinearLayout>


</ScrollView>

Answer 1

这有点棘手，每当我们得到这样的要求时，我们必须采取一种解决方法，例如保持 LinearLayout ，方向为垂直 并将LinearLayout 保留在ScrollView 中。我为您的问题创建了一个示例..我希望这会对您有所帮助。

custom_grid_item.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/layout_horizontal"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@android:color/black">

    <LinearLayout
            android:id="@+id/gridItemLeft"
            android:orientation="horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:layout_margin="4dp"
            android:gravity="left"
            android:visibility="invisible">

        <TextView
                android:id="@+id/itemNameLeft"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="@android:style/TextAppearance.Medium"
                android:text="@string/app_name"
                android:textColor="@android:color/black"
                android:padding="4dp"
                android:background="@android:color/white"/>

    </LinearLayout>

    <LinearLayout
            android:id="@+id/gridItemRight"
            android:orientation="horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:layout_margin="4dp"
            android:gravity="right"
            android:visibility="invisible">

        <TextView
                android:id="@+id/itemNameRight"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="4dp"
                android:textAppearance="@android:style/TextAppearance.Medium"
                android:text="@string/app_name"
                android:textColor="@android:color/black"
                android:background="@android:color/white"/>

    </LinearLayout>
</LinearLayout>

custom_list_item.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="4dp"
        android:background="@android:color/black">

    <TextView
            android:id="@+id/itemName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="@android:style/TextAppearance.Medium"
            android:background="@android:color/white"
            android:padding="8dp"
            android:text="@string/app_name"
            android:textColor="@android:color/black"/>

</LinearLayout>

main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black">

    <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <LinearLayout
                    android:orientation="vertical"
                    android:id="@+id/custom_list"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"/>

            <LinearLayout
                    android:orientation="vertical"
                    android:id="@+id/custom_grid"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/white"/>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

MyActivity.java：

public class MyActivity extends Activity {

    private List<String> mItems;
    private LinearLayout mListLayout, mGridLayout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mItems = new ArrayList<String>(Arrays.asList("Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"));

        mListLayout = (LinearLayout) findViewById(R.id.custom_list);
        mGridLayout = (LinearLayout) findViewById(R.id.custom_grid);

        loadListView();
        loadGridView();

    }

    private void loadGridView() {
        if (mItems.size() % 2 == 0) {
            loadEvenGridView(true);
        } else {
            loadEvenGridView(false);

            LayoutInflater inflater = getLayoutInflater();
            LinearLayout gridItem = (LinearLayout) inflater.inflate(R.layout.custom_grid_item, null);
            LinearLayout leftItem = (LinearLayout) gridItem.findViewById(R.id.gridItemLeft);
            LinearLayout rightItem = (LinearLayout) gridItem.findViewById(R.id.gridItemRight);
            leftItem.setVisibility(View.VISIBLE);
            rightItem.setVisibility(View.INVISIBLE);
            TextView txtItemName = (TextView) gridItem.findViewById(R.id.itemNameLeft);
            txtItemName.setText(mItems.get(mItems.size() - 1));
            leftItem.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(getApplicationContext(), mItems.get(mItems.size() - 1), Toast.LENGTH_SHORT).show();
                }
            });
            mGridLayout.addView(gridItem);
        }
    }

    private void loadEvenGridView(boolean isEvenSize) {
        int len = mItems.size();
        if (!isEvenSize) {
            len = len - 1;
        }
        if (len > 1) {
            for (int index = 1; index < len; index += 2) {
                LayoutInflater inflater = getLayoutInflater();
                LinearLayout gridItem = (LinearLayout) inflater.inflate(R.layout.custom_grid_item, null);
                LinearLayout leftItem = (LinearLayout) gridItem.findViewById(R.id.gridItemLeft);
                LinearLayout rightItem = (LinearLayout) gridItem.findViewById(R.id.gridItemRight);
                TextView txtItemName;
                for (int sIndex = 0; sIndex < 2; sIndex++) {
                    switch (sIndex) {
                        case 0:
                            leftItem.setVisibility(View.VISIBLE);
                            txtItemName = (TextView) gridItem.findViewById(R.id.itemNameLeft);
                            txtItemName.setText(mItems.get(index - 1));
                            final int finalIndex = index;
                            leftItem.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View view) {
                                    Toast.makeText(getApplicationContext(), mItems.get(finalIndex - 1), Toast.LENGTH_SHORT).show();
                                }
                            });
                            continue;
                        case 1:
                            rightItem.setVisibility(View.VISIBLE);
                            txtItemName = (TextView) gridItem.findViewById(R.id.itemNameRight);
                            txtItemName.setText(mItems.get(index));
                            final int finalIndex1 = index;
                            rightItem.setOnClickListener(new View.OnClickListener() {
                                @Override
                                public void onClick(View view) {
                                    Toast.makeText(getApplicationContext(), mItems.get(finalIndex1), Toast.LENGTH_SHORT).show();
                                }
                            });
                            continue;
                    }
                }
                mGridLayout.addView(gridItem);
            }
        }
    }

    private void loadListView() {
        for (int index = 0; index < mItems.size(); index++) {
            LayoutInflater inflater = getLayoutInflater();
            View listItem = inflater.inflate(R.layout.custom_list_item, null);
            TextView txtItemName = (TextView) listItem.findViewById(R.id.itemName);
            txtItemName.setText(mItems.get(index));
            mListLayout.addView(listItem);
            final int finalIndex = index;
            listItem.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(getApplicationContext(), mItems.get(finalIndex), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

屏幕截图：

Answer 2

更合适和直接的解决方案是使用RecyclerView和GridLayoutManager。 GridLayoutManager采用SpanSizeLookup对象，该对象允许您指定每个项占用的跨度数。

此问题的完整解决方案包括以下部分：

使用RecyclerView，GridLayoutManager和自定义SpanSizeLookup

的活动

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        // specify that grid will consist of 2 columns
        GridLayoutManager gridLayoutManager = new GridLayoutManager(getApplicationContext(), 2);
        // provide our CustomSpanSizeLookup which determines how many spans each item in grid will occupy
        gridLayoutManager.setSpanSizeLookup(new CustomSpanSizeLookup());
        // provide our GridLayoutManager to the view
        recyclerView.setLayoutManager(gridLayoutManager);
        // this is fake list of images
        List<Integer> imageResList = getMockedImageList();
        // finally, provide adapter to the recycler view
        Adapter adapter = new Adapter(imageResList);
        recyclerView.setAdapter(adapter);
    }


    private List<Integer> getMockedImageList() {
        // fake images list, you'd need to upload your own image resources
        List<Integer> imageResList = new ArrayList<Integer>();

        imageResList.add(R.drawable.img1);
        imageResList.add(R.drawable.img2);
        imageResList.add(R.drawable.img3);
        imageResList.add(R.drawable.img4);
        imageResList.add(R.drawable.img5);
        imageResList.add(R.drawable.img6);

        return imageResList;
    }


    private static class CustomSpanSizeLookup extends GridLayoutManager.SpanSizeLookup {
        @Override
        public int getSpanSize(int i) {
            if(i == 0 || i == 1) {
                // grid items on positions 0 and 1 will occupy 2 spans of the grid
                return 2;
            } else {
                // the rest of the items will behave normally and occupy only 1 span
                return 1;
            }
        }
    }
}

RecyclerView适配器

public class Adapter extends RecyclerView.Adapter {
    // I assume that you will pass images as list of resources, but this can be easily switched to a list of URLS
    private List<Integer> imageResList = new ArrayList<Integer>();

    public Adapter(List<Integer> imageUrlList) {
        this.imageResList = imageUrlList;
    }


    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View itemView = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.recycle_view_item, viewGroup, false);

        return new ItemViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
        ItemViewHolder itemViewHolder = (ItemViewHolder) viewHolder;
        itemViewHolder.item.setImageResource(imageResList.get(i));
    }

    @Override
    public int getItemCount() {
        return imageResList.size();
    }


    private static class ItemViewHolder extends RecyclerView.ViewHolder {
        private ImageView item;

        public ItemViewHolder(View itemView) {
            super(itemView);

            this.item = (ImageView) itemView.findViewById(R.id.item_image);
        }
    }
}

activity_main.xml布局

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

recycler_view_item.xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:padding="10dp">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

</LinearLayout>

最后一部分是确保在RecyclerView的build.gradle文件中添加依赖项：

dependencies {
    compile 'com.android.support:recyclerview-v7:21.0.+'
}

结果如下：

此解决方案的优点是：

它可扩展，轻量级，可定制
当您向上和向下滚动时回收视图时效率很高
它不需要搞乱触摸事件，一旦你添加任何额外的触摸功能，很容易变得非常棘手

我希望这有用。

Answer 3

实现这一目标的方法很简单： - AsymmetricGridView

希望这会对你有所帮助!!

Answer 4

您不能简单地将可滚动的View置于另一个可滚动的View内，并期望它们开箱即用，特别是如果它们都朝同一方向滚动。实现这一目标的最佳方法是扩展这些视图并拦截发送给他们的触摸事件。在这里，您可以确定用户滚动的方向，并相应地路由触摸事件。

阅读本文：Intercept Touch Events in a ViewGroup

列表视图中的网格视图或2个列表视图更好？

4 个答案: