android自定義View滑動(dòng)刪除效果
更新時(shí)間：2017年03月04日 10:54:56 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了android自定義控件View滑動(dòng)刪除效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
View滑動(dòng)刪除效果圖
實(shí)現(xiàn)功能
1、可以向左滑動(dòng),右側(cè)出現(xiàn)刪除
2、向左滑動(dòng)如果刪除出現(xiàn)一大半,松手打開(kāi)刪除,反之關(guān)閉刪除
3、應(yīng)用場(chǎng)景
微信消息的刪除功能
實(shí)現(xiàn)原理
1、外面是一個(gè)ListView
2、條目是一個(gè)自定義控件繼承ViewGroup
1）、左邊一個(gè)TextView,右側(cè)屏幕外也有一個(gè)TextView
2）、所以繼承ViewGroup
實(shí)現(xiàn)步驟
1、創(chuàng)建一個(gè)SlideDeleteView類
1）.構(gòu)造方法要關(guān)聯(lián)
public class SlideDelete extends ViewGroup {
private View leftView;
private View rightView;
private ViewDragHelper helper;
//第一步關(guān)聯(lián)構(gòu)造方法
//第二步重寫(xiě)onMeasure和onLViewayout測(cè)量子View和布局子View
public SlideDelete(Context context) {
this(context,null);
}
public SlideDelete(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
helper = ViewDragHelper.create(this, callback);
}
}
2、在布局文件中設(shè)置SlideDeleteView里面的子View
SlideDeleteView height=80
TextView
width:matchParent
height:matchparent
TextView
<com.example.movedelete.SlideDelete android:id="@+id/container" android:layout_width="match_parent" android:layout_height="80dp"> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#33000000" android:text="第0個(gè)條目" android:textColor="#fff" android:textSize="20sp" /> <TextView android:id="@+id/delete" android:layout_width="80dp" android:layout_height="match_parent" android:background="#f00" android:gravity="center" android:text="刪除" android:textColor="#fff" android:textSize="20sp" /> </com.example.movedelete.SlideDelete>
3、重寫(xiě)onMeasure,給子View進(jìn)行測(cè)量
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//對(duì)當(dāng)前組合View的測(cè)量,不使用的話,也可以自己設(shè)置
measureChildren(widthMeasureSpec,heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
4、重寫(xiě)onLayout,給子View進(jìn)行布局
注意事項(xiàng):要設(shè)置leftView,也要設(shè)置rightView,不要都寫(xiě)成leftView了
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//第一步獲取里面子View
leftView = getChildAt(0);
rightView = getChildAt(1);
//第二步給子View提供相應(yīng)的布局
int leftL = 0;
int leftT = 0;
int leftR = leftView.getMeasuredWidth();
int leftB = leftView.getMeasuredHeight();
leftView.layout(leftL,leftT,leftR,leftB);
//給rightView提供相應(yīng)的布局
int rightL = leftView.getMeasuredWidth();
int rightT = 0;
int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();
int rightB = rightView.getMeasuredHeight();
rightView.layout(rightL,rightT,rightR,rightB);
}
5、設(shè)置View的滑動(dòng)事件onTouchEvent,實(shí)現(xiàn)滑動(dòng)
1）.因?yàn)橐瑒?dòng),所以消費(fèi)該事件返回true
2）.使用ViewDragHelper來(lái)實(shí)現(xiàn)滑動(dòng)效果
注意事項(xiàng):
只能實(shí)現(xiàn)leftView的滑動(dòng),右側(cè)RightView看不到所以滑動(dòng)不了
只能給滑動(dòng)的View設(shè)置監(jiān)聽(tīng),當(dāng)滑動(dòng)的時(shí)候,重新設(shè)置另一個(gè)View的布局跟著滑動(dòng)
@Override
public boolean onTouchEvent(MotionEvent event) {
//1,要消費(fèi)該事件,所以直接返回true
//2,使用ViewDragHelper來(lái)實(shí)現(xiàn)滑動(dòng)效果
helper.processTouchEvent(event);
return true;
}
6、重寫(xiě)滑動(dòng)事件的監(jiān)聽(tīng)onViewPositionChanged解決只有l(wèi)efView滑動(dòng)的問(wèn)題
1）.重寫(xiě)的方法是在ViewDragHelper.Callback的子實(shí)現(xiàn)類中
2）.要實(shí)現(xiàn)滑動(dòng)事件,必須在tryCaptureView方法中返回true
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
//手勢(shì)滑動(dòng)時(shí)
@Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
}
//監(jiān)聽(tīng)控件移動(dòng)狀態(tài)
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
//如果左邊控件拖動(dòng),我們要讓右邊控件也重新布局
if(changedView == leftView){
rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);
}else if(changedView == rightView){
leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);
}
}
7、重寫(xiě)clampViewPositionHorizontal水平位置移動(dòng),解決左右越界問(wèn)題
1.返回值為移動(dòng)時(shí)左側(cè)滑動(dòng)的距離
2.如果滑動(dòng)的控件是leftView時(shí),解決越界
3.如果滑動(dòng)的控件是rightView時(shí),解決越界
public int clampViewPositionHorizontal(View child, int left, int dx) {
//對(duì)左右越界問(wèn)題的處理
if(child == leftView){
//處理兩邊的越界問(wèn)題
if(left >= 0){
left = 0;
}else if(left <= -rightView.getMeasuredWidth()){
left = -rightView.getMeasuredWidth();
}
}else if(child == rightView){
//只處理右邊的越界問(wèn)題,因?yàn)樽髠?cè)越界的時(shí)看不到該View
if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){
left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();
}else if(left >= leftView.getMeasuredWidth()){
left = leftView.getMeasuredWidth();
}
}
return left;
}
8、手松開(kāi)時(shí)重寫(xiě)onViewReleased方法,實(shí)現(xiàn)滑動(dòng)手松開(kāi)時(shí),rightView是打開(kāi)還是關(guān)閉
1.使用ViewDragHelper滑動(dòng)時(shí),要調(diào)用invalidate方法,回調(diào)computeScroll方法
2.重寫(xiě)computeScroll方法
1）.先判斷是否要繼承滑動(dòng)
2）.使用兼容的invalidate方法來(lái)實(shí)現(xiàn)勻速滑動(dòng)
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
//松開(kāi)后,什么時(shí)候打開(kāi)rightView,什么時(shí)候關(guān)閉leftView
//臨界值,rightView.getLeft() 和 屏幕的寬度-rightView.getWidth()/2
if(releasedChild == leftView){
if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){
//使用ViewDragHelper來(lái)滑動(dòng)
helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);
invalidate();
}else{
helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);
invalidate();
}
}
}
//需要重寫(xiě)computeScroll
@Override
public void computeScroll() {
//判斷是否要繼承滑動(dòng)
if(helper.continueSettling(true)){
//invalidate();
//兼容使用
ViewCompat.postInvalidateOnAnimation(this);
}
}
9、實(shí)現(xiàn)刪除rightView的點(diǎn)擊刪除事件
1.在listView的adapter中找到右側(cè)的rightView
2.調(diào)用rightView的點(diǎn)擊事件
3.刪除該條目
1）刪除集合中的數(shù)據(jù)
list.remove(position);
2）更新adapter
notifyDataSetChanged();
3）重新繪制整個(gè)條目
requestLayout();
//設(shè)置刪除的點(diǎn)擊事件
vh.delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//刪除當(dāng)前的數(shù)據(jù)
list.remove(position);
notifyDataSetChanged();
//讓父容器更新下
}
});
vh.container.requestLayout();
注意事項(xiàng)
1、在重寫(xiě)onLayout方法的時(shí)候,給rightView設(shè)置布局的時(shí)候,寫(xiě)成leftView一直出錯(cuò)
2、在onTouchEvent中要返回true,因?yàn)橐M(fèi)該事件
3、在使用ViewDragHelper.Callback時(shí),重寫(xiě)tryCaptureView時(shí)要返回true
4、在onTouchEvent中,不使用scrollby或者scrollTo,而是使用ViewDragHelper工具類,不需要判斷滑動(dòng)的距離
總結(jié)
1、首先該控件是自定義View,不是組合控件,因?yàn)榻M合的話rightView在屏幕右側(cè)不能實(shí)現(xiàn)
2、是自定義View中的繼承ViewGroup,因?yàn)樽髠?cè)leftView和右側(cè)rightView都是TextView不需要自己畫(huà)
源碼
SlideDelete的源碼
package com.example.movedelete;
import android.content.Context;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by guixin on 2017/1/5.
*/
public class SlideDelete extends ViewGroup {
private View leftView;
private View rightView;
private ViewDragHelper helper;
//第一步關(guān)聯(lián)構(gòu)造方法
//第二步重寫(xiě)onMeasure和onLViewayout測(cè)量子View和布局子View
public SlideDelete(Context context) {
this(context,null);
}
public SlideDelete(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
helper = ViewDragHelper.create(this, callback);
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
//手勢(shì)滑動(dòng)時(shí)
@Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
}
//拖動(dòng)控件水平移動(dòng)
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
//對(duì)左右越界問(wèn)題的處理
if(child == leftView){
//處理兩邊的越界問(wèn)題
if(left >= 0){
left = 0;
}else if(left <= -rightView.getMeasuredWidth()){
left = -rightView.getMeasuredWidth();
}
}else if(child == rightView){
//只處理右邊的越界問(wèn)題,因?yàn)樽髠?cè)越界的時(shí)看不到該View
if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){
left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();
}else if(left >= leftView.getMeasuredWidth()){
left = leftView.getMeasuredWidth();
}
}
return left;
}
//監(jiān)聽(tīng)控件移動(dòng)狀態(tài)
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
//如果左邊控件拖動(dòng),我們要讓右邊控件也重新布局
if(changedView == leftView){
rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);
}else if(changedView == rightView){
leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);
}
}
//解決滑動(dòng)一半松手時(shí),View的復(fù)位
/**
*
* @param releasedChild 松開(kāi)的View
* @param xvel
* @param yvel
*/
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
//松開(kāi)后,什么時(shí)候打開(kāi)rightView,什么時(shí)候關(guān)閉leftView
//臨界值,rightView.getLeft() 和 屏幕的寬度-rightView.getWidth()/2
if(releasedChild == leftView){
if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){
//使用ViewDragHelper來(lái)滑動(dòng)
helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);
invalidate();
}else{
helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);
invalidate();
}
}
}
};
//需要重寫(xiě)computeScroll
@Override
public void computeScroll() {
//判斷是否要繼承滑動(dòng)
if(helper.continueSettling(true)){
//invalidate();
//兼容使用
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//對(duì)當(dāng)前組合View的測(cè)量,不使用的話,也可以自己設(shè)置
measureChildren(widthMeasureSpec,heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//第一步獲取里面子View
leftView = getChildAt(0);
rightView = getChildAt(1);
//第二步給子View提供相應(yīng)的布局
int leftL = 0;
int leftT = 0;
int leftR = leftView.getMeasuredWidth();
int leftB = leftView.getMeasuredHeight();
leftView.layout(leftL,leftT,leftR,leftB);
//給rightView提供相應(yīng)的布局
int rightL = leftView.getMeasuredWidth();
int rightT = 0;
int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();
int rightB = rightView.getMeasuredHeight();
rightView.layout(rightL,rightT,rightR,rightB);
}
//View的事件傳遞
@Override
public boolean onTouchEvent(MotionEvent event) {
//1,要消費(fèi)該事件,所以直接返回true
//2,使用ViewDragHelper來(lái)實(shí)現(xiàn)滑動(dòng)效果
helper.processTouchEvent(event);
return true;
}
}
MainActivity.java源碼
package com.example.movedelete;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import com.example.movedelete.adapter.SlideDeleteAdapter;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ListView lv;
private ArrayList<String> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化視圖
initView();
//初始化數(shù)據(jù)
initData();
//初始化事件
initEvent();
}
//初始化視圖
private void initView() {
lv = (ListView) findViewById(R.id.lv);
}
//初始化數(shù)據(jù)
private void initData() {
list = new ArrayList<>();
for (int i = 0; i < 20; i++) {
list.add("第"+i+"項(xiàng)條目");
}
}
//初始化事件
private void initEvent() {
SlideDeleteAdapter adapter = new SlideDeleteAdapter(list);
lv.setAdapter(adapter);
}
}
SlideDeleteAdapter.java源碼
package com.example.movedelete.adapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import com.example.movedelete.R;
import com.example.movedelete.SlideDelete;
import java.util.ArrayList;
/**
* Created by guixin on 2017/1/5.
*/
public class SlideDeleteAdapter extends BaseAdapter{
private ArrayList<String> list;
public SlideDeleteAdapter(ArrayList<String> list) {
this.list = list;
}
@Override
public int getCount() {
return list == null ? 0 : list.size();
}
@Override
public String getItem(int position) {
return list == null ? null : list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder vh;
if(convertView == null){
convertView = View.inflate(parent.getContext(), R.layout.item_slide,null);
vh = new ViewHolder(convertView);
convertView.setTag(vh);
}else{
vh = (ViewHolder) convertView.getTag();
}
vh.content.setText(list.get(position));
//設(shè)置刪除的點(diǎn)擊事件
vh.delete.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//刪除當(dāng)前的數(shù)據(jù)
list.remove(position);
notifyDataSetChanged();
//讓父容器更新下
}
});
vh.container.requestLayout();
return convertView;
}
class ViewHolder{
private TextView content;
private TextView delete;
private SlideDelete container;
public ViewHolder(View v){
container = (SlideDelete) v.findViewById(R.id.container);
content = (TextView) v.findViewById(R.id.content);
delete = (TextView) v.findViewById(R.id.delete);
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/lv" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </RelativeLayout>
item_slide.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.movedelete.SlideDelete android:id="@+id/container" android:layout_width="match_parent" android:layout_height="80dp"> <TextView android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:background="#33000000" android:text="第0個(gè)條目" android:textColor="#fff" android:textSize="20sp" /> <TextView android:id="@+id/delete" android:layout_width="80dp" android:layout_height="match_parent" android:background="#f00" android:gravity="center" android:text="刪除" android:textColor="#fff" android:textSize="20sp" /> </com.example.movedelete.SlideDelete> </LinearLayout>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android編程自定義title bar(標(biāo)題欄)示例
- Android自定義TitleView標(biāo)題開(kāi)發(fā)實(shí)例
- Android使用setCustomTitle()方法自定義對(duì)話框標(biāo)題
- Android中自定義Window Title樣式實(shí)例
- Android編程自定義Dialog的方法分析
- Android編程自定義圓角半透明Dialog的方法
- Android自定義TabLayout效果
- Android自定義手機(jī)界面狀態(tài)欄實(shí)例代碼
- Android自定義View仿微信LetterView效果
- Android實(shí)現(xiàn)自定義圓角對(duì)話框Dialog的示例代碼
- Android動(dòng)態(tài)自定義圓形進(jìn)度條
- Android編程實(shí)現(xiàn)自定義title功能示例
相關(guān)文章
這篇文章主要為大家介紹了Kotlin Flow常用封裝類StateFlow使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Android與單片機(jī)通信常用數(shù)據(jù)轉(zhuǎn)換方法總結(jié)
本文主要介紹Android與單片機(jī)通信常用數(shù)據(jù)轉(zhuǎn)換方法，這里提供了代碼示例，有需要的小伙伴可以參考下2016-09-09
下面小編就為大家?guī)?lái)一篇Android 獲取簽名公鑰和公鑰私鑰加解密的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
Android仿硬幣轉(zhuǎn)動(dòng)微信紅包動(dòng)畫(huà)效果
項(xiàng)目需要研究了一下微信紅包動(dòng)畫(huà)，即硬幣轉(zhuǎn)動(dòng)的效果，原理其實(shí)就是三張不同角度的圖片利用AnimationDrawable幀動(dòng)畫(huà)進(jìn)行播放。下面通過(guò)本文給大家分享Android仿微信紅包動(dòng)畫(huà)效果，感興趣的朋友一起看看吧2017-12-12
Android ListView的OnItemClickListener詳解
這篇文章主要介紹了Android ListView的OnItemClickListener詳解的相關(guān)資料，涉及到OnItemClickListener的position和id參數(shù)做詳細(xì)的解釋的知識(shí)點(diǎn)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2016-07-07
Android ExpandableListView展開(kāi)列表控件使用實(shí)例
這篇文章主要介紹了Android ExpandableListView展開(kāi)列表控件使用實(shí)例,本文實(shí)現(xiàn)了一個(gè)類似手機(jī)QQ好友列表的界面效果,需要的朋友可以參考下2014-07-07
Android自定義EditText實(shí)現(xiàn)登錄界面
這篇文章主要為大家詳細(xì)介紹了Android自定義EditText實(shí)現(xiàn)登錄界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
獲取Android系統(tǒng)唯一識(shí)別碼的方法
這篇文章主要介紹了獲取Android系統(tǒng)唯一識(shí)別碼的方法,涉及通過(guò)編程獲取Android系統(tǒng)硬件設(shè)備標(biāo)識(shí)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Android實(shí)現(xiàn)藍(lán)牙串口通訊
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)藍(lán)牙串口通訊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Android注冊(cè)登錄實(shí)時(shí)自動(dòng)獲取短信驗(yàn)證碼
注冊(cè)登錄或修改密碼功能常常需要輸入短信驗(yàn)證碼，如何自動(dòng)獲取短信驗(yàn)證碼，這篇文章就為大家介紹了Androidcv注冊(cè)登錄自動(dòng)獲取短信驗(yàn)證碼的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-08-08