ListView嵌套Viewpager实现左滑打电话,右滑发短信(附源码)

最新推荐文章于 2021-05-26 09:27:57 发布

原创

最新推荐文章于 2021-05-26 09:27:57 发布 · 4.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#ListView左右滑动

本文介绍如何在ListView中使用Viewpager实现左滑打电话、右滑发短信的功能。通过ListView每个Item包含一个ViewPager，同时处理好滑动事件避免混乱。详细介绍了布局文件、关键Java文件的实现，并提到了Touch事件的分发和消费机制的重要性。提供源码下载供进一步学习。

最近自己一直在写一个开源的通讯录项目,在实现的过程中参照了不少优秀通讯录的用户体验效果,比如现在很流行的左滑打电话,右滑发短信功能,先来看看实现后的效果图(在下载Android手机通讯录和Listview实现A-Z排序这篇样例代码上增加的)

关于ListView的Item左右滑动实现的方式网上也有很多种,我这里用的是ListView嵌套Viewpager来实现的.下面说说思路和需要注意的地方

1,ListView中每一个Item的联系人都是一个ViewPager(如效果图)

2,这两个组件都是可以滑动的,为了避免滑动出现混乱或者不好的用户体验,当父组件ListVew在滑动时子组件Viewpager不能滑动,同样在子ViewPager滑动时父ListView不能滑动

先看看布局文件

<?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="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="通话"
        android:textSize="25dp"
        android:textColor="#FFFFFF"/>

</LinearLayout>

fragment1.xml是蓝色背景的"通话"界面布局,Viewpager中的第一个页面

<?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="match_parent"
    android:background="@android:color/holo_green_dark"
    android:gravity="center"
    android:orientation="vertical" >
    <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="短信"
        android:textSize="25dp"
        android:textColor="#FFFFFF"/>

</LinearLayout>

fragment3.xml是绿色背景的"短信"界面布局,Viewpager中的第三个页面

<?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="match_parent"
    android:orientation="vertical">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView 
            android:id="@+id/contacts_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#336598"
            android:textStyle="bold"/>
        <TextView 
            android:id="@+id/contacts_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#336598"/>
    </LinearLayout>
	    
	
</LinearLayout>

list_item.xml是显示"联系人姓名和电话"界面布局,Viewpager中的第二个页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical" >
    
    	<TextView 
	    android:id="@+id/pb_item_LetterTag"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:background="#E0E0E0"
	    android:visibility="gone"
	    android:paddingLeft="5dp"/>
    	
    	<!-- 自定义的Viewpager -->
        <huahua.mycontacts.ItemsViewPager
        android:id="@+id/tabcontent_vp"
        android:background="@andro