Danh sách xem kiểu Gmail

Question

Tôi muốn tạo một chế độ xem danh sách tương tự về chức năng cho ứng dụng Gmail dành cho Android. Bằng cách đó, tôi có nghĩa là bạn có thể chọn các hàng bằng cách nhấp vào một hình ảnh ở bên trái hoặc xem email bằng cách nhấp vào bất kỳ nơi nào khác trên hàng. Tôi có thể đến gần, nhưng nó không hoàn toàn ở đó.

Hàng tùy chỉnh của tôi bao gồm một ImageView ở bên trái và một số TextViews ở bên phải. Đây là ý chính của getView trên Adapter của tôi.

@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(); 
      } 
     }); 
    } 

Điều này đến rất gần! Điều còn thiếu là làm nổi bật hàng trên trình nghe nhấp chuột vào hàng.

Answer 1

Bạn phải đặt choiceMode thành ListView của mình.

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

Answer 2

Điều còn thiếu là làm nổi bật hàng trên trình nghe nhấp chuột hàng.

Âm thanh như bạn cần phải chủ đề hàng 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> 

Từ đây: How do I style selected item in Android ListView?

Answer 3

Mà không phải là giống như một số listview tùy chỉnh với imagebuttom thay vì hộp kiểm?

<?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> 

Answer 4

Điều bạn cần là đặt danh sáchCông cụ tìm kiếm.

Những gì bạn cần làm để tạo danh sáchSelector là một xml có thể vẽ tương tự như hình được Karl đăng.

<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> 

Như bạn thấy, thẻ mục thậm chí có thể sử dụng thuộc tính android: drawable trong trường hợp bạn có png bạn muốn sử dụng để đánh dấu một hàng. Tìm tất cả các thuộc tính mà thẻ này cung cấp và thực hiện những gì bạn cần.

Cuối cùng, để đảm bảo ListView của bạn sử dụng bộ chọn này, bạn phải cài đặt nó bên trong bố trí 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"/> 

hoặc thông qua mã:

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

Answer 5

Lựa chọn 1: Sử dụng ListView của inbuilt choiceMode tính năng. Thật không may, tôi chưa bao giờ thực hiện. Vì vậy, không thể cung cấp cho bạn một câu trả lời chi tiết. Nhưng bạn có thể lấy một gợi ý từ here và các câu trả lời khác.

Tùy chọn 2: Tự mình triển khai. Xác định array/list hoặc bất kỳ công việc nào giúp giữ chỉ mục của phần tử được chọn trong danh sách của bạn. Và sau đó sử dụng nó để lọc hình nền trong getView(). Dưới đây là ví dụ hoạt động:

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; 
} 

Chúc may mắn!

Answer 6

Liên kết này có thể giúp bạn sử dụng gmail như swipe và nhiều hơn nữa hình ảnh động

github list view aniamtion

Answer 7

Đây là cách tôi đã làm phương pháp getview tôi:

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); 

} 

Và tôi sử dụng hai hình ảnh động:

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"/> 

Hope liên kết này sẽ giúp bạn thêm: http://techiedreams.com/gmail-like-flip-animated-multi-selection-list-view-with-action-mode/