Gmail风格列表视图

时间:2013-08-25 05:38:27

标签: android listview android-listview

我想创建一个与Gmail Android应用程序功能相似的列表视图。我的意思是你可以通过单击左侧的图像来选择行,或者通过单击行上的任何其他位置来查看电子邮件。我可以近距离接触,但它并不存在。

我的自定义行包含左侧的ImageView和右侧的一些TextView。这是我的适配器上的getView的要点。

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        View row = super.getView(position, convertView, parent);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getListView().setItemChecked(position, !getListView().isItemChecked(position));
            }
        });

        row.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "" + position, Toast.LENGTH_SHORT).show();
            }
        });
     }

这非常接近!缺少的是突出显示行点击监听器上的行。

7 个答案:

答案 0 :(得分:4)

选项1 :使用listView的内置choiceMode功能。不幸的是,我从未实施过。所以,不能给你一个详细的答案。但你可以从here和其他答案中提取一些提示。

选项2 :自行实施。定义array / list或任何可以保留列表中所选元素的索引的变通方法。然后用它来过滤getView()中的背景。这是一个有效的例子:

public class TestAdapter extends BaseAdapter {

List<String> data;
boolean is_element_selected[];

public TestAdapter(List<String> data) {
    this.data = data;
    is_element_selected = new boolean[data.size()];
}

public void toggleSelection(int index) {
    is_element_selected[index] = !is_element_selected[index];
    notifyDataSetChanged();
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    //Initialize your view and stuff

    if (is_element_selected[position])
        convertView.setBackgroundColor(context.getResources().getColor(R.color.blue_item_selector));
    else
        convertView.setBackgroundColor(Color.TRANSPARENT);

     imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                toggleSelection(position);
            }
        });

      row.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //get to detailed view page
            }
        });

    return convertView;
}
祝你好运!

答案 1 :(得分:2)

这就是我制作getview方法的方法:

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

    LayoutInflater inflater = (LayoutInflater) context.getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null) {
        convertView = inflater.inflate(R.layout.list_item, null);
        holder = new ViewHolder();
        holder.title = (TextView) convertView.findViewById(R.id.title);
        holder.selectBox = (ImageView) convertView.findViewById(R.id.selectBox);
        convertView.setTag(holder);
    }

    holder = (ViewHolder) convertView.getTag();

    holder.title.setText(getItem(position).getTitle());
    holder.selectBox.setTag("" + position);
    holder.selectBox.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            ivFlip = (ImageView) v;
            ivFlip.clearAnimation();
            ivFlip.setAnimation(animation1);
            ivFlip.startAnimation(animation1);
            setAnimListners(mailList.get(Integer.parseInt(v.getTag().toString())));
        }

    });

    if (mailList.get(position).isChecked()) {
        holder.selectBox.setImageResource(R.drawable.cb_checked);
        convertView.setBackgroundColor(context.getResources().getColor(R.color.list_highlight));

    } else {
        holder.selectBox.setImageResource(R.drawable.cb_unchecked);
        convertView.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.list_selector));

    }

    return convertView;

}

private void setAnimListners(final MyListItem curMail) {
    AnimationListener animListner;
    animListner = new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            if (animation == animation1) {
                if (curMail.isChecked()) {
                    ivFlip.setImageResource(R.drawable.cb_unchecked);
                } else {
                    ivFlip.setImageResource(R.drawable.cb_checked);
                }
                ivFlip.clearAnimation();
                ivFlip.setAnimation(animation2);
                ivFlip.startAnimation(animation2);
            } else {
                curMail.setIsChecked(!curMail.isChecked());
                setCount();
                setActionMode();
            }
        }

        // Set selected count
        private void setCount() {
            if (curMail.isChecked()) {
                checkedCount++;
            } else {
                if (checkedCount != 0) {
                    checkedCount--;
                }
            }

        }

        // Show/Hide action mode
        private void setActionMode() {
            if (checkedCount > 0) {
                if (!isActionModeShowing) {
                    mMode = ((MainActivity) context).startActionMode(new MainActivity.AnActionModeOfEpicProportions(context));
                    isActionModeShowing = true;
                }
            } else if (mMode != null) {
                mMode.finish();
                isActionModeShowing = false;
            }

            // Set action mode title
            if (mMode != null)
                mMode.setTitle(String.valueOf(checkedCount));

            notifyDataSetChanged();

        }

        @Override
        public void onAnimationRepeat(Animation arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation arg0) {
            // TODO Auto-generated method stub

        }
    };

    animation1.setAnimationListener(animListner);
    animation2.setAnimationListener(animListner);

}

我使用了两个动​​画:

a)to_middle.xml:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.0"
    android:toYScale="1.0" />

b)from_middle.xml:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="200"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.0"/>

希望此链接能够进一步帮助您:http://techiedreams.com/gmail-like-flip-animated-multi-selection-list-view-with-action-mode/

答案 2 :(得分:1)

您需要设置listSelector。

创建listSelector需要做的是xml drawable,类似于Karl发布的那个。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#929292" />
        </shape>
    </item>
    <!-- if you need even a disabled state -->
    <item android:state_enabled="false" android:drawable="@drawable/my_drawable" />
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</selector>

正如您所看到的,项目标签甚至可以使用android:drawable属性,以防您有一个要用于突出显示行的png。 查找此标记必须提供的所有属性并实现您所需的属性。

最后,为了确保ListView使用此选择器,您必须在xml布局中设置它:

<ListView
    android:id="@id/android:list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:choiceMode="multipleChoice"
    android:listSelector="@drawable/enel_list_selector"/>

或通过代码:

ListView listView = (ListView) <activity|view>.findViewById(android.R.id.list);
listView.setSelector(R.drawable.<nameOfYourXmlDrawable>);

答案 3 :(得分:1)

此链接可以帮助您使用gipe,如滑动和更多动画

github list view aniamtion

答案 4 :(得分:0)

您必须为列表视图设置choiceMode

myListView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
myListView().setSelector(android.R.color.BLUE);

答案 5 :(得分:0)

  

缺少的是突出显示行点击侦听器上的行。

听起来你需要以listview行为主题......

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        <shape>
            <solid android:color="#929292" />
        </shape>
    </item>

    <item>
        <shape>
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</selector>

从这里开始:How do I style selected item in Android ListView?

答案 6 :(得分:0)

是不是像带有imagebuttom的自定义列表视图而不是复选框?

<?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="wrap_content"
android:orientation="horizontal" >

<ImageView
    android:id="@+id/ivImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    android:layout_gravity="left"
    android:contentDescription="@string/app_name" >
</ImageView>

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:orientation="vertical"
    android:layout_weight="1" >

    <TextView
        android:id="@+id/tvDescr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text=""
        android:textSize="20sp" >
    </TextView>

    <TextView
        android:id="@+id/tvPrice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="" >
    </TextView>
   </LinearLayout>


  </LinearLayout>