Hướng dẫn xử lý dữ liệu trong listview dùng animation để làm mượt hiệu ứng

Thảo luận trong 'Android nâng cao' bắt đầu bởi thanhlongi90.it, 3/6/13.

  1. thanhlong90.it

    thanhlong90.it Admin Support

    Lượt xem: 2,501
    Chào các bạn sau đây Long xin hướng dẫn các bạn làm mượt một hiệu ứng xóa dữ liệu ra khỏi một listview. Cũng như các chủ đề khác, chủ đề làm đẹp giao diện vẫn là khá quan trọng bởi nó được đánh giá trực tiếp bởi người dùng mà ^^
    training-prof
    1) Source code demo:
    Click vào đây để download source code demo.

    2) Giới thiệu:
    - Đầu tiên Long sẽ hướng dẫn các bạn đổ dữ liệu vào listview bằng cách sử dụng adapter, nó là đơn giản và hiệu quả nhất.
    - Tiếp đó sẽ là xóa dữ liệu bất kỳ ra khỏi listview từ một vị trí bất kỳ.
    - Cuối cùng là làm đẹp hiệu ứng xóa item trong listview bằng cách sử dụng animation.

    3) Hình ảnh của demo:
    1
    4) Hướng dẫn code:
    - res/anim/fade_anim.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="200"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toAlpha="0" >
    </alpha>
    - activity_main.xml
    PHP:
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        
    xmlns:tools="http://schemas.android.com/tools"
        
    android:layout_width="match_parent"
        
    android:layout_height="match_parent"
        
    android:paddingBottom="@dimen/activity_vertical_margin"
        
    android:paddingLeft="@dimen/activity_horizontal_margin"
        
    android:paddingRight="@dimen/activity_horizontal_margin"
        
    android:paddingTop="@dimen/activity_vertical_margin"
        
    android:orientation="vertical"
        
    tools:context=".MainActivity" >
     
        <
    TextView
            android
    :layout_width="match_parent"
            
    android:layout_height="wrap_content"
            
    android:layout_marginTop="5dp"
            
    android:gravity="center"
            
    android:text="@string/parsed_data"
            
    android:textAppearance="?android:attr/textAppearanceMedium"
            
    android:textStyle="bold" />
     
        <
    ListView
            android
    :id="@+id/listView"
            
    android:layout_width="wrap_content"
            
    android:layout_height="wrap_content" />
     
    </
    LinearLayout>
    - MainActivity.java
    PHP:
    package android.vn;
     
    import java.util.ArrayList;
    import java.util.List;
     
    import android.os.Bundle;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.app.Activity;
     
    public class MainActivity extends Activity {
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            ListView lv = (ListView) findViewById(R.id.listView);
     
            List<ItemDetail> itemList = createItems(20);
     
            //Tải animation
            final Animation anim = AnimationUtils.loadAnimation(this, R.anim.fade_anim);
     
            //Tạo dữ liệu cho listview bằng Adapter
            final ArrayAdapter<ItemDetail> aAdpt = new ArrayAdapter<ItemDetail>(this, android.R.layout.simple_list_item_1, itemList);
       
            //Đổ dữ liệu từ Adapter vào listview
            lv.setAdapter(aAdpt);
     
            //Thiết lập sự kiện cho listview
            lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> adapterView, final View view, final int position, long id) {
                    //Thiết lập lắng nghe từ sự kiện
                    anim.setAnimationListener(new Animation.AnimationListener() {
                        @Override
                        public void onAnimationStart(Animation animation) {
     
                        }
     
                        @Override
                        public void onAnimationRepeat(Animation animation) {
     
                        }
     
                        @Override
                        public void onAnimationEnd(Animation animation) {
                            ItemDetail item = aAdpt.getItem(position);
                            aAdpt.remove(item);
                        }
                    });
                    view.startAnimation(anim);
                }
            });
        }
     
        //Khởi tạo listview
        private List<ItemDetail> createItems(int size) {
            List<ItemDetail> result = new ArrayList<ItemDetail>();
            for (int i = 0; i < size; i++) {
                ItemDetail item = new ItemDetail(i, "Item " + i);
                result.add(item);
            }
            return result;
        }
    }
    - ItemDetail.java
    PHP:
    package android.vn;
     
    public class 
    ItemDetail {
        private 
    int id;
        private 
    String descr;
     
        public 
    ItemDetail(int idString descr) {
            
    this.id id;
            
    this.descr descr;
        }
     
        public 
    int getId() {
            return 
    id;
        }
     
        public 
    void setId(int id) {
            
    this.id id;
        }
     
        public 
    String getDescr() {
            return 
    descr;
        }
     
        public 
    void setDescr(String descr) {
            
    this.descr descr;
        }
     
        @
    Override
        
    public String toString() {
            return 
    descr;
        }
    }
    5) Video kết quả demo:


    Bài viết đăng lên diễn đàn khác vui lòng ghi rõ nguồn: Android.vn
    Pass giải nén: http://android.vn
    Support: thanhlong90.it@gmail.com
    Chúc các bạn thành công!
    hoc, lap trinh, android, huong dan, xu ly, data, listview, animation, tutorial, example
    lumia88, Tiasangmoi92HaiHack thích bài này.
  2. lequangthai

    lequangthai New Member

    Anh ThanhLong cho em hỏi vs : là mình tạo list như trong demo trên khi ta click vào từng cái list 1 nó hiện ra liên kết khác hay 1 số hình ảnh khác thì phải làm ntn . Mong anh hướng dẫn...
  3. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    sẽ phải có 1 cái mảng tương ứng, vào trong cái hàm create cái view đó mình set giá trị cho nó!
  4. BEAN939

    BEAN939 New Member

    Bạn có thể hướng dẫn kỹ hơn hoặc làm 1 ví dụ cho "sẽ phải có 1 cái mảng tương ứng, vào trong cái hàm create cái view đó mình set giá trị cho nó!". Cám ơn bạn nhiều!
  5. deathrock12

    deathrock12 New Member

    Long ơi cho mình hỏi chút, bình thường listview phạm vị click xảy ra sự kiện là toàn bộ listview cơ mà tại sao ở pj của bạn thì phạm vi sảy ra sự kiển chỉ ở trong phần text của listview thế, làm như thế nào có thể chỉ rõ cho mình được không
  6. deathrock12

    deathrock12 New Member

    Long ơi cho mình hỏi chút, bình thường listview phạm vị click xảy ra sự kiện là toàn bộ listview cơ mà tại sao ở pj của bạn thì phạm vi sảy ra sự kiển chỉ ở trong phần text của listview thế, làm như thế nào có thể chỉ rõ cho mình được không
  7. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    nói chung đây là 1 cách trong rất nhiều cách custom listview.
    Hiện tại Long làm app thấy tối ưu nhất là cách sử dụng 1 viewgroup add 1 view

Chia sẻ trang này