listview簡單實現QQ聊天欄側滑


下面是效果圖:


原理:佈局方面就是一個listview裏面的item根佈局爲橫向的HorizontalScrollView

下面是XML代碼:

<com.tianxia.administrator.zidingyiui.UI_ScrollView   android:id="@+id/scroll"
                      xmlns:android="http://schemas.android.com/apk/res/android"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:scrollbars="none"
    >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <com.tianxia.administrator.zidingyiui.UI_RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <ImageView
                android:id="@+id/item_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside"
                android:src="@mipmap/ic_launcher"
                android:layout_marginLeft="10dp"/>
            <TextView
                android:id="@+id/wenben"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:layout_toRightOf="@id/item_image"
                android:layout_marginLeft="20dp"
                android:text="文本"
                android:textSize="15sp"
                />
        </com.tianxia.administrator.zidingyiui.UI_RelativeLayout>

        <Button
            android:id="@+id/zhiding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:text="置頂"/>

        <Button
            android:id="@+id/shanchu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:text="刪除"/>

    </LinearLayout>

</com.tianxia.administrator.zidingyiui.UI_ScrollView>
很簡單的item佈局。裏面的自定義的
RelativeLayout
只做了一件事,就是在測量的時候設置佈滿整個屏幕,這樣剩下的2個button就在屏幕外面去了。下面是代碼部分:
<pre name="code" class="java"> public UI_RelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
   private void init(){
        widthPixels = getResources().getDisplayMetrics().widthPixels;

   }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMinimumWidth(widthPixels);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }



自定義scrollview裏面寫了2個方法:

/**
 * 判斷是否打開
 *
 * @return
 */
public boolean is_Open() {
    if(this.getScrollX()>30)
    return true;
    return  false;
}

/**
 * 關閉
 */
public void close() {
   this.fullScroll(ScrollView.FOCUS_UP);
}
這2個方法一個是判斷是這個item當前的狀態是否向右滑動了,一個是把當前的item滑動到開始位置。

下面是listview的代碼部分:

   @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        float x = ev.getX();
        float y = ev.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                flag = true;
                break;
            case MotionEvent.ACTION_MOVE:
                if (flag) {
                    if (Math.abs((lastX - x)) < 30 && Math.abs((lastY - y)) > 30 && !is_Ok()) {
                        closeAll();
                        flag = false;
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                int position = pointToPosition((int) lastX, (int) lastY);
                View view = getChildAt(position - getFirstVisiblePosition());
                if (view != null) {
                    UI_ScrollView scrollView = (UI_ScrollView) view;
                    scrollViews.add(scrollView);
                    if (Math.abs((lastX - x)) < 30 && Math.abs((lastY - y)) < 30 && is_Ok())
                    {//移動距離小於30
                        super.performItemClick(view, position, view.getId());
                    }else{
                        closeAll();
                    }
                }
                break;
            default:
                break;
        }
        return super.dispatchTouchEvent(ev);
    }

    /**
     * 關閉全部scrollView
     */
    private void closeAll() {
        Iterator<UI_ScrollView> iterator = scrollViews.iterator();
        while(iterator.hasNext()){
            UI_ScrollView next = iterator.next();
            if(next.is_Open())
                next.close();
        }

    }

    /**
     * 檢查有沒有沒有關閉的scrollview
     * 全部關閉返回true
     * 有一個及以上的沒有關閉返回false
     */
    private boolean is_Ok() {
        Iterator<UI_ScrollView> iterator = scrollViews.iterator();
        while(iterator.hasNext()){
            UI_ScrollView next = iterator.next();
            if(next.is_Open())
                return  false;
        }
        return  true;
    }
scrollViews是存放自定scrollview的一個hashset。
裏面處理的邏輯有:
1.在上下滑動的時候判斷item所有是否處於打開狀態。如果是則關閉
2.在<span style="font-size: 15.0667px; font-family: 宋體;">ACTION_UP擡起手指時,如果是點擊就分配給onItemclick.因爲自定義的</span><span style="font-size: 15.0667px; font-family: 宋體;">scrollView把佔了item的全部,使得item的點擊失效,這裏手動分配。</span>
<span style="font-size: 15.0667px; font-family: 宋體;">Adapter的代碼:</span>
<span style="font-size: 15.0667px; font-family: 宋體;"></span><pre name="code" class="java">      ViewHolder viewHolder=null;
              if(convertView==null){
                  viewHolder=new ViewHolder();
                  convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, null);
                  viewHolder.btn  = (Button) convertView.findViewById(R.id.shanchu);
                  viewHolder.btn1 = (Button) convertView.findViewById(R.id.zhiding);
                  viewHolder.scrollView= (UI_ScrollView) convertView.findViewById(R.id.scroll);
                  convertView.setTag(viewHolder);
              }else{
                  viewHolder= (ViewHolder) convertView.getTag();
              }
            viewHolder.btn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"點擊了刪除",Toast.LENGTH_SHORT).show();
                    }
                });
            viewHolder.btn1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this,"點擊了置頂",Toast.LENGTH_SHORT).show();
                }
            });
            viewHolder.scrollView.fullScroll(ScrollView.FOCUS_UP);
            return convertView;
        }
        class ViewHolder{
            Button btn;
            Button btn1;
            UI_ScrollView scrollView;
        }



Adapter沒什麼好說的。就是每次進來的時候把scrollview置爲初始位置,因爲item是複用的,且爲了保證刪除一個item後全部的item處於初始位置,就是沒有滑動的位置。
<span style="font-family:宋體;">總結:以上基本上就實現了QQ側滑的效果,且保證了item的點擊事件的生效,置頂刪除的點擊事件有效。像QQ一樣保證了永遠只有一個item是打開的。打開的時候點擊item先關閉側滑,再點擊才能item生效。上下滑動的時候也需要關閉item,要實現置頂的話只需要在數據中調用list的add(int postion,String str<span style="white-space:pre">	</span>)方法然後刷新listview,刪除差不多,調用remove就OK。</span>
以上如有bug和錯誤之處,歡迎指正

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章