Android - Listview/Gridview 滚动选择项目

Android - Listview/Gridview item selection with scrolling

我是 android 的新手,我刚刚开始编写一个简单的应用程序来尝试不同的东西。

我正在编写一个 ListView(并且以同样的方式编写一个 GridView)但是我出错了。每个项目都是一对图像和文本字段。

|图片 | __text__ |

我希望能够选择任意数量的列表项,在将 selected 项传递给下一个 activity 之前,让它们在所有 selection 过程中保持清醒.如果我想 de-select 其中之一,我只需重新单击该项目即可使 selection 消失。为此,我使用自定义 selector 以便在按下该项目时它会改变颜色。

如果所有项目都包含在一个屏幕中,则一切正常。但是,一旦它们的数量增加并开始回收,selected 项目从屏幕上消失的启发性就会消失。我已经调试了项目的状态,那些启发丢失的项目仍然正确 selected,所以我认为这只是项目在离开设备屏幕后恢复时图形如何重新加载的问题。

这是 activity 布局的代码:

<!-- items_selection.xml -->    

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

<ListView
    android:id="@+id/item_list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="@color/divider"
    android:dividerHeight="3dp"
    android:choiceMode="multipleChoice"
    android:listSelector="@drawable/list_selector">
</ListView>

</LinearLayout>

这是行项目布局:

<!-- list_row.xml --> 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >

<LinearLayout
    android:id="@+id/item_list_item"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dip"
    android:padding="3dip" >
    <ImageView
        android:id="@+id/item_image"
        android:layout_width="@dimen/img_side"
        android:layout_height="@dimen/img_side" />
</LinearLayout>

<TextView
    android:id="@+id/item_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/item_list_item"
    android:layout_centerVertical="true"
    android:textColor="@color/black"
    android:textSize="@dimen/textnorm"
    />

</RelativeLayout>

这是select或者我用过的:

<!-- list_selector.xml -->

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

<item
    android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@drawable/rect" />

<item
    android:state_pressed="true"
    android:drawable="@drawable/rect_sel" />

<item
    android:state_selected="true"
    android:state_pressed="false"
    android:drawable="@drawable/rect_sel" />

</selector>


<!-- rect.xml -->

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<gradient
    android:startColor="#D5DDE0"
    android:centerColor="#e7e7e8"
    android:endColor="#CFCFCF"
    android:angle="270" />

</shape>


<!-- rect_sel.xml -->

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<gradient
    android:startColor="#78DDFF"
    android:centerColor="#16cedb"
    android:endColor="#09adb9"
    android:angle="270" />

</shape>

这是Activity的代码:

public class ItemSelection extends AppCompatActivity {

private int numitems;
private ListView listview;
private ArrayList<Item> items = new ArrayList<>();

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

    numitems = 15;
    build_list();

    listview = (ListView) findViewById(R.id.item_list);
    listview.setAdapter(new ListAdapter(this, items));

}

public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.next_btn, menu);
    return true;
}

    public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    switch(id){
        case R.id.next_btn:
            Intent intent = new Intent (this, nextActivity.class);
            intent.putStringArrayListExtra("items", Chosen_Items());
            startActivity(intent);
            return true;
        default:
            Toast.makeText(getApplicationContext(), "ERROR", Toast.LENGTH_SHORT).show();
            return super.onOptionsItemSelected(item);
    }
}

private void build_list() {
     //Populates the item list with more items than the screen can support.
    }


private ArrayList<String> Chosen_Items(){

    ArrayList<String> selitems = new ArrayList<>();

    for (int i=0; i<numitems; i++){
        if (items.get(i).isSelected()){
            selitems.add(items.get(i).getName());
        }
    }

    return selitems;
}

这是listAdapter的代码:

public class ListAdapter extends BaseAdapter {

private ArrayList <Item> items;
private Activity sActivity;

public ListAdapter(Activity sActivity, ArrayList<Item> items) {
    this.sActivity = sActivity;
    this.items = items;
}

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

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

@Override
public long getItemId(int position) {
    return position;
}


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

    View view = convertView;
    ViewHolder holder;

    if(view == null) {
        LayoutInflater li = sActivity.getLayoutInflater();
        view = li.inflate(R.layout.list_row, null);

        holder = new ViewHolder();
        holder.text = (TextView)view.findViewById(R.id.item_name);
        holder.img = (ImageView)view.findViewById(R.id.item_image);

        view.setTag(holder);
    }

    else {
        holder = (ViewHolder)view.getTag();
    }

    holder.text.setText(items.get(position).getName());
    holder.img.setImageResource(items.get(position).getImage());


    view.setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View viewitem) {

            if (!viewitem.isSelected() && !items.get(position).isSelected()) {
                viewitem.setSelected(true);
                items.get(position).setSelected(true);
            }

            else {
                viewitem.setSelected(false);
                items.get(position).setSelected(false);
            }
        }

    });

    return view;
}

private static class ViewHolder{
    public TextView text;
    public ImageView img;
}

}

我已经尝试手动设置项目重新进入屏幕的背景颜色(通过使用

view.setBackgroundResource(R.drawable.rect_sel)

在适配器中,在单击处理程序之前),但问题仍然存在。谁能帮我解决问题?

~~~~~~~~~~~~~~~~~~~解决方案~~~~~~~~~~~~~~~~~~

似乎 selector 不遵循项目的回收,它们的 views.There 必须是利用 selector 的更好更优雅的解决方案这个情况。但在我所做的所有尝试中,none 已经奏效。此解决方案是最佳解决方法,不使用 selector.

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

View view = convertView;
ViewHolder holder;

if(view == null) {
    LayoutInflater li = sActivity.getLayoutInflater();
    view = li.inflate(R.layout.list_row, null);

    holder = new ViewHolder();
    holder.text = (TextView)view.findViewById(R.id.item_name);
    holder.img = (ImageView)view.findViewById(R.id.item_image);

    view.setTag(holder);
}

else {
    holder = (ViewHolder)view.getTag();
}

holder.text.setText(items.get(position).getName());
holder.img.setImageResource(items.get(position).getImage());

if(items.get(position).isSelected()){
    view.setBackgroundResource(R.drawable.rect_sel);
}else{
    view.setBackgroundResource(R.drawable.rect);
}

view.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View viewitem) {

        if (!viewitem.isSelected() && !items.get(position).isSelected()) {
            viewitem.setBackgroundResource(R.drawable.rect_sel);
            viewitem.setSelected(true);
            items.get(position).setSelected(true);
        }

        else {
            viewitem.setBackgroundResource(R.drawable.rect);
            viewitem.setSelected(false);
            items.get(position).setSelected(false);
        }
    }
    });

    return view;
}

private static class ViewHolder{
    public TextView text;
    public ImageView img;
}

而在list_row.xml文件中,可以删除以下行:

android:background="@drawable/list_selector"

您必须在 getView 方法中定义视图的当前选择状态。

添加这一行:

viewitem.setSelected(items.get(position).isSelected());

像这样创建 viewholder 之后:

holder.img.setImageResource(items.get(position).getImage());
viewitem.setSelected(items.get(position).isSelected());

在您的 getView() 方法中只需添加此测试:

if (items.get(position).isSelected()){
   view.setBackgroundResource(R.drawable.rect_sel);
} else {
   view.setBackgroundResource(R.drawable.rect);
}

或者只是 view.setSelected(items.get(position).isSelected());。虽然您的列表项已经有了选择器。

我认为您应该为 RelativeLayout 设置 id,然后将其添加到 ViewHolder

private static class ViewHolder{
    public TextView text;
    public ImageView img;
    RelativeLayout rl;
}

之后你在点击 RelativeLayout 时处理事件然后改变 RelativeLayout 的背景

 public View getView(...)
    ...
    ...
    // you should update the state of relative layout first
     if (items.get(position).isSelected()) {
        holder.setBackgroundColor(Color.parseColor("#ffff00"));
    }else{
         holder.setBackgroundColor(Color.parseColor("#ff0000"));
    }

    holder.rl.setOnClickListener(new View.OnClickListener(){ //remmember it is rl.setOnClick... not view.setOnClick...
        public void onClick(View v) {
              if (!items.get(position).isSelected()) {
                  items.get(position).setSelected(true);
                  holder.setBackgroundColor(Color.parseColor("#ffff00"));
              }else {
                  items.get(position).setSelected(false);
                  holder.setBackgroundColor(Color.parseColor("#ff0000"));
              }
        }
    });
}

建议
你应该像这样修改你的行布局(我已经删除了 LinearLayout 但新布局仍然很好)

    <!-- list_row.xml --> 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/list_selector"
android:orientation="horizontal"
android:padding="5dip" >

  <ImageView 
     android:id="@+id/item_image"
     android:layout_marginRight="5dip"
     android:padding="3dip"
     android:layout_alignParentLeft="true"
     android:layout_width="@dimen/img_side"
     android:layout_height="@dimen/img_side" />

<TextView
    android:id="@+id/item_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/item_image"
    android:layout_centerVertical="true"
    android:textColor="@color/black"
    android:textSize="@dimen/textnorm"
    />

</RelativeLayout>

请记住,您的列表行布局更简单,然后您的列表视图将滚动得更快、更流畅并防止出现一些烦人的错误。

希望对您有所帮助