Widok listy w stylu Gmaila

Question

Chcę utworzyć widok listy podobny pod względem funkcjonalności do aplikacji na Androida Gmaila. Rozumiem przez to, że możesz wybrać wiersze, klikając obraz po lewej stronie lub przeglądając wiadomość e-mail, klikając w dowolnym miejscu w wierszu. Mogę podejść blisko, ale to jeszcze nie koniec.

Mój niestandardowy wiersz składa się z widoku obrazu po lewej stronie i niektórych widoków tekstowych po prawej stronie. Oto sedno getView na moim adapterze.

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

To jest bardzo blisko! Brakuje podświetlenia wiersza w detektorze z kliknięciem wiersza.

Answer 1

Musisz ustawić choiceMode do swojego ListView.

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

Answer 2

Czego brakuje jest wyróżnianie wiersza na wiersz click słuchacza.

Brzmi jak trzeba tematem wiersza 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> 

stąd: How do I style selected item in Android ListView?

Answer 3

Czy to nie jest niczym niestandardowych ListView z imagebuttom zamiast wyboru?

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

Potrzebne jest ustawienie selektora list.

Co trzeba zrobić, aby utworzyć narzędzie listSelector, jest rysowaniem xml podobnym do tego, które napisał 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> 

Jak widać, tagi pozycja może nawet korzystać z Androidem: atrybut rozciągliwej w przypadku gdy masz PNG chcesz użyć, aby podświetlić wiersz. Sprawdź wszystkie atrybuty, które ma do zaoferowania, i zastosuj to, czego potrzebujesz.

Wreszcie, aby upewnić się, że ListView korzysta z tego selektora, należy ustawić go w środku układu 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"/> 

lub za pomocą kodu:

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

Answer 5

Wariant 1 Use listView na wbudowany choiceMode funkcja. Niestety, nigdy nie zaimplementowałem. Tak więc, nie mogę udzielić Ci szczegółowej odpowiedzi. Ale możesz wziąć podpowiedź od here i innych odpowiedzi.

Opcja 2: Wykonaj to samodzielnie. Zdefiniuj array/list lub obejście, które zachowuje indeksy wybranego elementu z listy. A następnie użyj go do filtrowania tła w getView(). Oto działający przykład:

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

Powodzenia!

Answer 6

Ten link może Ci pomóc przy użyciu gmail jak machnięcia i więcej animacji

github list view aniamtion

Answer 7

ten sposób zrobiłem moją metodę 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 ja dwie animacje:

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

Nadzieja ten link pozwoli Ci dalszej pomocy: http://techiedreams.com/gmail-like-flip-animated-multi-selection-list-view-with-action-mode/