更改列数gridview时切换文本字段的可见性

Question

我目前在设计可以从“网格”视图切换到“列表”视图的活动时遇到问题。我正在使用 GridView 并切换到“列表”，我将最大列数设置为 1。现在我的问题是，当我切换到“列表”视图时，我想要左边的图像和一些文本在右侧，而不仅仅是中间的图像。所有数据均取自手动填充的自定义类。以下图片将演示。

我想要什么：

我有什么：

我的代码（XML 和 Java）如下：

single_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:contentDescription="@string/content"
        android:id="@+id/imageView1"
        android:layout_width="128dp"
        android:layout_height="128dp"

        android:layout_centerHorizontal="true"/>
</RelativeLayout>

activity_main.xml

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.gridview.MainActivity"
    tools:ignore="MergeRootFrame" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="auto_fit" 
        android:columnWidth="128dp"
        android:verticalSpacing="10dp"
        >
    </GridView>

</FrameLayout>

MainActivity.java

private GridView myGrid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myGrid = (GridView) findViewById(R.id.gridView1);

        myGrid.setAdapter(new myGridAdapter(this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu items for use in the action bar
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {       
        GridView gv = (GridView) findViewById(R.id.gridView1);
        //ImageView iv = (ImageView) findViewById(R.id.imageView1);     

        switch (item.getItemId()) {
            case R.id.action_grid:
                Toast.makeText(this, "Grid Button", Toast.LENGTH_SHORT).show();             
                gv.setNumColumns(GridView.AUTO_FIT);                                
                return true;

            case R.id.action_list:
                Toast.makeText(this, "List Button", Toast.LENGTH_SHORT).show();                                                        
                gv.setNumColumns(1);                
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }

有谁知道我可以如何做到这一点？我已经阅读了很长一段时间，也想到了 viewSwitcher 和 viewFlipper，但不认为它们正是我想要的。我还考虑过为每个布局创建单独的活动的想法，但也了解了缺点。

感谢您的宝贵时间。

Answer 1

最简单的选择可能是：

• 在single_item.xml 中添加TextView，并将其放置在图片的右侧。
• 将 GridView 的当前状态（即它所处的模式）传递给您的自定义适配器。
• 在Adapter的getView()中，根据这个状态：
  • 在TextView 上致电setVisibility()，使用VISIBLE 或GONE。
  • 更新 ImageView 的 layoutParams，使其与其父级的中心或右侧对齐。

这不需要任何重复。

示例代码：

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
    if (convertView == null)
    {
        convertView = LayoutInflater.from(mContext)inflate(...);
    }

    TextView tv = convertView.findViewById(R.id.textView1);
    ImageView imageView = convertView.findViewById(R.id.imageView1);

    // Show/hide text according to ListView mode.
    tv.setVisibility(mMode == SHOW_TEXT ? View.VISIBLE : View.GONE);

    // also update imageView.getLayoutParams() according to mMode.