如何在Android中的GridView中,点击另一行后隐藏上一个选定行上出现的视图?

3
我有一个 `Fragment`,其中包含自定义适配器(继承自 `BaseAdapter`),管理着一个 `GridView`。

我想在每一行的 `GridView` 上显示图像,并且在单击每个单元格时,我想要打开一个半透明视图,它将显示图像详细信息。

问题是,当我单击图像时,一个半透明视图出现在图像的顶部,但当我单击下一个图像时,前一个图像上打开的半透明视图没有隐藏,仍然出现在第一个图像上。

我想要类似于这个屏幕...

请参考以下代码

我的 Fragment:

public class ProductFragment extends Fragment {

    String ss = null;
    GridView gridView;
    ArrayList<ProductParameterBO> productlist;
    GridViewCustomAdapter gridViewCustomAdapter;


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        if (savedInstanceState!=null){
            View rootView =  inflater.inflate(R.layout.empty_catalog_item,null);

            TextView configure = (TextView)rootView.findViewById(R.id.text_conf);

            configure.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    Intent intent = new Intent(getActivity(),SplitViewActivity.class);
                    intent.putExtra("firstTab","1stTabs");
                    startActivity(intent);

                }
            });

            TextView text_here = (TextView)rootView.findViewById(R.id.text_here);
            text_here.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                }
            });

            FloatingActionButton fab = (FloatingActionButton)rootView.findViewById(R.id.fab);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {

                    Intent intent = new Intent(getActivity(), EditUploadActivity.class);
                    startActivity(intent);

                }
            });

            return rootView;
        } else {
            View rootView =  inflater.inflate(R.layout.fragment_product,null);

            gridView =(GridView)rootView.findViewById(R.id.gridView);

            productlist = new ArrayList<ProductParameterBO>();

            productlist.add(new ProductParameterBO("Type","Numeric","yes","yes"));
            productlist.add(new ProductParameterBO("Typess","Numericss","yesss","yesss"));
            productlist.add(new ProductParameterBO("Typess","Numericss","yesss","yesss"));
            productlist.add(new ProductParameterBO("Typess","Numericss","yesss","yesss"));
            gridViewCustomAdapter = new GridViewCustomAdapter(getActivity(),productlist);
            gridView.setAdapter(gridViewCustomAdapter);
            gridViewCustomAdapter.notifyDataSetChanged();

            return rootView;
        }

        // return inflater.inflate(R.layout.fragment_product,null);
    }
}

我的适配器

public class GridViewCustomAdapter extends BaseAdapter {

    private List<ProductParameterBO> availList;

    private LayoutInflater inflater;

    Context context;

    public GridViewCustomAdapter(Context ctx,List<ProductParameterBO> list){
        this.context = ctx;
        this.availList = list;
    }

    @Override
    public int getCount() {
        return availList.size();
    }

    @Override
    public Object getItem(int position) {
        return availList.get(position);
    }

    @Override
    public long getItemId(int position) {
        ProductParameterBO c = availList.get(position);
        // long id = c.getTimeId();
        return 0;
    }

    @Override
    public View getView(int position,View convertView,final ViewGroup parent) {

        View row = convertView;
        final TeeTimeHolder holder;

        if (row == null){
            inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.grid_row,parent,false);
            holder = new TeeTimeHolder();
            holder.myImage =(ImageView)row.findViewById(R.id.imageView10);
            holder.name =(TextView)row.findViewById(R.id.textView47);
            holder.edit =(TextView)row.findViewById(R.id.textView49);
            holder.rl =(RelativeLayout)row.findViewById(R.id.img_ovrly);
            row.setTag(holder);
        } else {
            holder =(TeeTimeHolder)row.getTag();
        }

        holder.name.setText(availList.get(position).getParameterName());
        holder.myImage.setImageResource(R.drawable.toi);
        holder.rl.setVisibility(View.GONE);

        holder.myImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                View rows = null;
                inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                rows = inflater.inflate(R.layout.image_overlay,parent,false);
                // holder.rl = (RelativeLayout)rows.findViewById(R.id.img_ovrly);
                holder.rl.setVisibility(View.VISIBLE);

            }
        });

        return row;
    }

    static class TeeTimeHolder {
        ImageView myImage;

        TextView name,edit;

        RelativeLayout rl;

        //TextView descriptions;

        /*  TextView coursefee;

        TextView viewdetils;*/
    }
}

我的 XML 布局 grid_row.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="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView10"
        android:src="@drawable/toi"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Image Name"
        android:id="@+id/textView47"
        android:layout_below="@+id/imageView10"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Edit"
        android:id="@+id/textView49"
        android:layout_below="@+id/textView47"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/img_ovrly"
        android:background="@color/opacity">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/mail"
            android:layout_marginTop="10dp"
            android:id="@+id/image_i"
            android:layout_centerHorizontal="true"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Title :"
            android:id="@+id/text_ttle"
            android:layout_below="@+id/image_i"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_ttle"
            android:text="hmmmm"
            android:layout_below="@+id/image_i"
            android:layout_marginTop="20dp"
            android:textColor="#6ec6c5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Dimensions :"
            android:id="@+id/text_dimen"
            android:layout_below="@+id/text_ttle"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_dimen"
            android:text="32*23"
            android:layout_below="@+id/text_ttle"
            android:layout_marginTop="10dp"
            android:textColor="#6ec6c5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Price :"
            android:id="@+id/text_prce"
            android:layout_below="@+id/text_dimen"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_prce"
            android:text="32*23"
            android:layout_below="@+id/text_dimen"
            android:layout_marginTop="10dp"
            android:textColor="#6ec6c5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Color :"
            android:id="@+id/text_clr"
            android:layout_below="@+id/text_prce"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_clr"
            android:text="red,white"
            android:layout_below="@+id/text_prce"
            android:layout_marginTop="10dp"
            android:textColor="#6ec6c5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Min. Quantity :"
            android:id="@+id/text_minq"
            android:layout_below="@+id/text_clr"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_minq"
            android:text="1000"
            android:layout_below="@+id/text_clr"
            android:layout_marginTop="10dp"
            android:textColor="#6ec6c5"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Type :"
            android:id="@+id/text_typ"
            android:layout_below="@+id/text_minq"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:textColor="#ffffff"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/text_typ"
            android:text="creamic"
            android:layout_below="@+id/text_minq"
            android:layout_marginTop="10dp"
            android:textColor="#6ec6c5"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/img_flp"
            android:background="@drawable/flip"
            android:layout_below="@+id/text_typ"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"/>

    </RelativeLayout>

</RelativeLayout>

我有点不明白,希望你能帮助我解决这个问题。我想要一个屏幕看起来像那样。我是否正确地在图像上方打开半透明屏幕,以及如何隐藏或在单击我的Adater类中的其他图像时使其不可见。非常感谢您提供的任何帮助。

2个回答

1
你可以选择以下两种做法之一。

1.使用标志

2.不使用标志


注意:此代码未经测试。

您可以在您的ProductParameterBO对象中创建一个封装标志来确定覆盖视图的可见性。例如:

boolean mInformationViewVisible = false;

public void setInformationViewVisible(boolean visible) {
    mInformationViewVisible = visible;
}

public boolean isInformationViewVisible() {
    return mInformationViewVisible;
}

然后在您的getView方法中使用它来设置视图的可见性。
@Override 
public View getView(int position,View convertView,final ViewGroup parent) {
    ...

    holder.myImage.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            for(int itemPosition = 0; itemPosition < availList.size(); itemPosition++) {
                if(itemPosition != position){
                    availList.get(itemPosition)
                        .setInformationViewVisible(false);
            }

            availList.get(itemPosition).setInformationViewVisible(true);
        }
    });

    if (currentItem.isInformationViewVisible()) {
        holder.rl.setVisibility(View.VISIBLE);
    } else {
        holder.rl.setVisibility(View.GONE);
    }

    ...
}

2. 切换到RecyclerView


第二种更好的选择是切换到RecyclerView。这个视图专门为与适配器中的项进行个别交互而构建。它在动画和添加/删除适配器项方面比View更具有优势。您可以在这里这里阅读更多信息。
很可能你所附图片中的应用程序正在使用RecyclerView来管理其内容。管理所选信息视图的代码在RecyclerView中将与我为ListView发布的代码非常相似,唯一的区别是您将把OnClickListener传递给RecyclerView.ViewHolder并将其设置为该视图而不是在getView()方法中。我强烈建议您使用这种方法,因为它将有益于您的应用程序未来。

谢谢您的回复。但是,控制台总是进入else条件,其中写有holder.rl.setVisibility(View.GONE); - Anand
当我点击图片时,它会显示覆盖屏幕,但是当我点击下一张图片时,之前的覆盖屏幕仍然显示,没有隐藏。 - Anand
你好Neil,有没有办法在Android GridView中获取先前选择的项目? - Anand

0
在ProductParameterBO中,您可以保留一个布尔成员变量,在getView()中,如果点击了一张图片,则可以将该列表中的布尔变量设置为false,但不包括您点击的那个。如果变量为true,则会显示图像详细信息,如果变量为false,则可以将该特定位置的半透明视图的可见性设置为Invisible。
        @Override 
    public View getView(int position,View convertView,final ViewGroup parent) {

        View row = convertView;
      final TeeTimeHolder holder;
        if (row == null){
            inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.grid_row,parent,false);
            holder = new TeeTimeHolder();
            holder.myImage =(ImageView)row.findViewById(R.id.imageView10);
            holder.name =(TextView)row.findViewById(R.id.textView47);
            holder.edit =(TextView)row.findViewById(R.id.textView49);
            holder.rl =(RelativeLayout)row.findViewById(R.id.img_ovrly);
            row.setTag(holder);
        } 
        else { 
            holder =(TeeTimeHolder)row.getTag();
        } 


        holder.name.setText(availList.get(position).getParameterName());
        holder.myImage.setImageResource(R.drawable.toi);
        holder.rl.setVisibility(View.GONE);

        holder.myImage.setOnClickListener(new View.OnClickListener() {
            @Override 
            public void onClick(View v) {
                View rows = null;
                inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                rows = inflater.inflate(R.layout.image_overlay,parent,false);
               // holder.rl = (RelativeLayout)rows.findViewById(R.id.img_ovrly); 
               // holder.rl.setVisibility(View.VISIBLE);
       for(int i=0;i<availList.size();i++){
            if(i!=position){
       availList.get(i).flag=false;
             }
          }
  availList.get(position).flag=true;

        } 
    }); 

    if(availList.get(i).flag){
      holder.rl.setVisibility(View.VISIBLE);
      }else{
      holder.rl.setVisibility(View.INVISIBLE);
          }
    return row;
} 

谢谢您的回复,Arjun。我正在应用您的概念,让我们看看...然后回到您那里。 - Anand
嗨,Arjun,我尝试了你的更改,但现在在点击事件中,半透明视图根本没有打开。 - Anand
你在onClick()中设置了变量true吗?我没有在那里提到它。 - MrRobot9
我已经做出了更改! - MrRobot9
当点击下一张图片时,如何隐藏视图...它还没有起作用。 - Anand

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接