Android 之 SwipeLayout 的基本使用

dartye 8年前發布 | 8K 次閱讀安卓開發 Android開發移動開發

使用方法（以listview作為例子）：

Step 1 添加項目依賴

項目依賴如下：

在你的app中的build.gradle文件中添加以下依賴

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
//swipeLayout
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile "com.daimajia.swipelayout:library:1.2.0@aar"
    compile 'com.daimajia.easing:library:1.0.0@aar'
    compile 'com.daimajia.androidanimations:library:1.1.2@aar'
    compile 'com.nineoldandroids:library:2.4.0'
}

注意：

compile 'com.daimajia.androidanimations:library:1.1.2@aar'
compile'com.nineoldandroids:library:2.4.0'

這兩個庫的引用是滑動bottomView所需要依賴的。

Step 2 添加swipeLayout的xml文件

首先創建一個swipelayout作為列表項（listview_item）的布局

swipelayout由兩部分view組成：surfaceView 和 bottomView

圖中左邊是surfaceView，右邊被滑動出來的是bottomView

Tips：

surfaceView應當寫在此view中的最后，其余的都是bottomView
在你的bottomView中最好使用layout_gravity這個屬性

xml模版格式：

<?xml version="1.0" encoding="utf-8"?>
<com.daimajia.swipe.SwipeLayout android:id="@+id/swipe"
                                xmlns:android="http://schemas.android.com/apk/res/android"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">


    <!-- Bottom View Start-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/red"
        android:orientation="horizontal"
        android:padding="4dp"
        android:weightSum="1">

    <!--some view in it-->

    </LinearLayout>
    <!-- Bottom View End-->


    <!--surfaceView Start-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!--some view in it-->

    </LinearLayout>
    <!--surfaceView End-->

</com.daimajia.swipe.SwipeLayout>

Example：

<?xml version="1.0" encoding="utf-8"?>
<com.daimajia.swipe.SwipeLayout android:id="@+id/swipe"
                                xmlns:android="http://schemas.android.com/apk/res/android"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">


    <!-- Bottom View Start-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/red"
        android:orientation="horizontal"
        android:padding="4dp"
        android:weightSum="1">

        <TextView
            android:id="@+id/tv_cancel_favorite"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="取消收藏"
            android:textColor="@color/white"
            android:textSize="14sp"/>
    </LinearLayout>
    <!-- Bottom View End-->


    <!--surfaceView Start-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal"
            android:paddingLeft="10dp">

            <TextView
                android:id="@+id/tv_station_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="@string/text_station_title"
                android:textColor="@color/popup_title_gray"
                android:textSize="16sp"/>

            <ImageView
                android:id="@+id/iv_pop_openImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="6dp"
                android:src="@mipmap/station_open_up"
                android:visibility="gone"/>

            <ImageView
                android:id="@+id/iv_pop_freeImage"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="4dp"
                android:gravity="center_vertical"
                android:src="@mipmap/station_free_park"
                android:visibility="gone"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:paddingLeft="10dp">

            <ImageView
                android:id="@+id/iv_navi_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:src="@drawable/address"/>

            <TextView
                android:id="@+id/tv_pop_distance"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="6dp"
                android:layout_marginTop="10dp"
                android:text="@string/text_station_distance"
                android:textColor="@color/popup_distance_gray"
                android:textSize="13sp"/>

            <View
                android:layout_width="1dp"
                android:layout_height="15dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:background="@color/div_line"/>

            <TextView
                android:id="@+id/tv_pop_address"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:singleLine="true"
                android:text="@string/text_station_address"
                android:textColor="@color/popup_address_gray"
                android:textSize="13sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:paddingBottom="6dp"
            android:paddingLeft="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/text_station_opentime"
                android:textColor="@color/popup_address_gray"
                android:textSize="13sp"/>

            <TextView
                android:id="@+id/tv_pop_opentime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="@string/text_station_time"
                android:textColor="@color/popup_address_gray"
                android:textSize="13sp"/>
        </LinearLayout>

    </LinearLayout>
    <!--surfaceView End-->

</com.daimajia.swipe.SwipeLayout>

現在你已經創建好的列表項的布局了，要想在activity中讓listview使用這個swipelayout你還需要一個listviewAdapter

Step 3 創建swipeLayout的adapter

首先swipelayout的adapter是繼承于BaseAdapter，不同的是你不需要重寫getView()，取而代之的是你需要重寫以下三個方法來代替getView():

//return the `SwipeLayout` resource id in your listview | gridview item layout.
public abstract int getSwipeLayoutResourceId(int position);

//generate a new item layout.
public abstract View generateView(int position, ViewGroup parent);

/*fill values to your item layout returned from `generateView`.
  The position param here is passed from the BaseAdapter's 'getView()*/
public abstract void fillValues(int position, View convertView);

所以最終你在實現ListViewAdapter的時候需要重寫6個方法：

public int getSwipeLayoutResourceId (int position)
public View generateView (final int position, ViewGroup parent)
public void fillValues (int position, View convertView)
public int getCount ()
public Object getItem (int position)
public long getItemId (int position)

Tips:

如果你想綁定監聽事件應當在 fillValues() 方法中去實現而不是在 generateView() 方法中！！

如果你按照該項目作者在github上的demo把bind listener以及fill values的具體實現寫在 generateView() 中，則會出現刪除item控件錯亂的問題。
為了避免滑動事件在滑回來不與該swipelayout的點擊事件沖突，swipelayout的點擊事件請使用 swipeLayout.getSurfaceView().setOnClickListener 方法去實現。

Example：

/**
     * swipeLayout控件的listviewAdapter
     */
    public class FavoriteStationListViewAdapter extends BaseSwipeAdapter {

        private Context mContext;
        private ArrayList<FavoriteStationEntity> dataList;

        private SwipeLayout mSwipeLayout;

        public FavoriteStationListViewAdapter(Context mContext, ArrayList<FavoriteStationEntity> dataList) {
            this.mContext = mContext;
            this.dataList = dataList;
        }

        @Override
        public int getSwipeLayoutResourceId(int position) {
            return R.id.swipe;
        }

        /**
         * 此方法中一定不能綁定監聽器和填充數據
         * never bind listeners or fill values, just genertate view here !!
         *
         * @param position
         * @param parent
         * @return
         */
        @Override
        public View generateView(final int position, ViewGroup parent) {

            View v = LayoutInflater.from(mContext).inflate(R.layout.listview_item_favorite_station, null);
            return v;
        }

        @Override
        public void fillValues(final int position, View convertView) {

            favoriteStation = dataList.get(position);

            //填充數據
            TextView stationName = (TextView) convertView.findViewById(R.id.tv_station_name);
            stationName.setText(favoriteStation.getStationName());

            if (favoriteStation.getCompetence() == 0) {//對外開放
                convertView.findViewById(R.id.iv_pop_openImage).setVisibility(View.VISIBLE);
            } else {
                convertView.findViewById(R.id.iv_pop_openImage).setVisibility(View.GONE);
            }

            if (favoriteStation.getParkPrice().equals("免費")) {//免停車費
                convertView.findViewById(R.id.iv_pop_freeImage).setVisibility(View.VISIBLE);
            } else {
                convertView.findViewById(R.id.iv_pop_freeImage).setVisibility(View.GONE);
            }

            TextView stationAddress = (TextView) convertView.findViewById(R.id.tv_pop_address);
            stationAddress.setText(favoriteStation.getAddress());

            TextView openTime = (TextView) convertView.findViewById(R.id.tv_pop_opentime);
            openTime.setText(favoriteStation.getServiceStartTime() + "--" + favoriteStation.getServiceEndTime());

            TextView stationDistance = (TextView) convertView.findViewById(R.id.tv_pop_distance);
            stationDistance.setText(favoriteStation.getDistance());


            mSwipeLayout = (SwipeLayout) convertView.findViewById(getSwipeLayoutResourceId(position));
            //綁定監聽事件
            mSwipeLayout.addSwipeListener(new SimpleSwipeListener() {
                @Override
                public void onOpen(SwipeLayout layout) {
                    YoYo.with(Techniques.Tada).duration(500).delay(100).playOn(layout.findViewById(R.id.tv_cancel_favorite));
                }
            });

            /**
             * 用getSurfaceView()可以防止滑回與點擊事件沖突
             */
            mSwipeLayout.getSurfaceView().setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {//跳轉到充電站詳情

                    favoriteStation = dataList.get(position);
                    Log.d("favoriteActivity", "favoriteActivity--position--->" + position);
                    Log.d("favoriteActivity", "favoriteActivity--stationName--->" + favoriteStation.getStationName());
                    int stationId = favoriteStation.getStationId();
                    Intent intentStationDetail = new Intent().putExtra("stationId", stationId);
                    intentStationDetail.setClass(FavoriteActivity.this, StationDetailActivity.class);
                    startActivity(intentStationDetail);
                }
            });

            convertView.findViewById(R.id.tv_cancel_favorite).setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {//bottomView點擊事件 取消收藏站點

                    favoriteStation = dataList.get(position);
                    Log.d("favoriteActivity", "favoriteActivity--cancelStationName--->" + favoriteStation.getStationName());
                    mFavoritePresenter.cancelFavorite(favoriteStation.getId());
                    mSwipeLayout.close();

                }
            });
        }

        @Override
        public int getCount() {
            Log.d("dataListSize", "dataListSize--->" + dataList.size());
            return dataList.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }
    }

至此，我們已經寫好了listview_item布局，listview的adapter。最后看一下在activity中如何使用這個滑動控件。

Step 4 使用swipeLayout

在activity中使用swipelayout

Example:

根據需要在 onCreate() 或者 onResume() 中使用

favoriteListLv = (ListView) findViewById(R.id.lv_favorite_station);
favoriteStaionListAdapter = new FavoriteStationListViewAdapter(FavoriteActivity.this,
                favoriteStationList);
favoriteStaionListAdapter.setMode(Attributes.Mode.Single);
favoriteListLv.setAdapter(favoriteStaionListAdapter);

以上就是swipelayout的基本用法，當然還有很多可以設置的地方，swipelayout這個view還可以用在gridview、recyclerView等等

來自：http://jngoogle.farbox.com/post/android/view/swipelayoutde-ji-ben-shi-yong

本文由用戶 dartye 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1478484695364.html

安卓開發 Android開發移動開發

Android 之 SwipeLayout 的基本使用

Step 1 添加項目依賴

Step 2 添加swipeLayout的xml文件

Step 3 創建swipeLayout的adapter

Step 4 使用swipeLayout

相關經驗

相關資訊

相關文檔

目錄