1. 程式人生 > >ScrollView+ViewPager+Fragment+RecycleView滑動衝突

ScrollView+ViewPager+Fragment+RecycleView滑動衝突

這段時間比較忙許久沒有寫部落格了,今天寫一個這幾天專案內遇到的問題,問題就是如題的滑動衝突問題,煩得很啊。

一、需求

一個介面(p話),大概分文四部分,第一部分是一個地圖縮圖,第二部分是關於物品的詳細資訊,第三部分是控制時間的按鈕即查詢條件,最後一部分是可以點選或者是互動的輪播類介面。

二、需求實現分析

1、第一種想法肯定是弄個 RecycleView 然後去實現 RecycleView 的豐富多彩列表,額,誰想到了,誰去試一試吧,反正版主很菜,並且很懶,就算了不搞不了,搞不了;
2、就是如題的方案了ScrollView+ViewPager+Fragment+RecycleView,其實,我感覺相比於找後臺那群貨,幫我改改介面,不如自己解決解決衝突呢。

三、佈局搭建

我感覺這個很簡單,走心就行了,算了還是把原始碼搞來吧

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
android:orientation="vertical" tools:context=".activity.HistoryInfoActivity"> <include layout="@layout/activity_title_bar" /> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true"> <LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"> <com.baidu.mapapi.map.MapView android:id="@+id/mv_history" android:layout_width="match_parent" android:layout_height="200dp" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="match_parent" android:layout_height="30dp" android:background="#2370C0" android:gravity="center_vertical" android:paddingEnd="1dp" android:paddingStart="20dp" android:text="專案介紹" android:textColor="#ffffff" android:textSize="16sp" /> <TextView android:id="@+id/tv_address_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_marginTop="40dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="安裝位置:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_address" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_marginTop="40dp" android:layout_toEndOf="@+id/tv_address_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="安裝位置" /> <TextView android:id="@+id/tv_pro_name_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_address_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="專案名稱:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_pro_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_address_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_pro_name_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="專案名稱" /> <TextView android:id="@+id/tv_system_name_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_pro_name_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="系統名稱:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_system_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_pro_name_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_system_name_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="系統名稱" /> <TextView android:id="@+id/tv_device_type_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_system_name_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="裝置型號:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_device_type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_system_name_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_device_type_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="裝置型號" /> <TextView android:id="@+id/tv_device_number_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_device_type_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="裝置編號:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_device_number" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_device_type_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_device_number_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="裝置編號" /> <TextView android:id="@+id/tv_firm_name_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_device_number_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="廠  商:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_firm_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_device_number_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_firm_name_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="廠  商" /> <TextView android:id="@+id/tv_principal_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_firm_name_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="負 責 人:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_principal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_firm_name_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_principal_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="負 責 人" /> <TextView android:id="@+id/tv_fireguard_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_principal_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="防 火 員:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_fireguard" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_principal_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_fireguard_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="防火員" /> <TextView android:id="@+id/tv_remark_h" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_below="@+id/tv_fireguard_h" android:layout_marginTop="5dp" android:lines="1" android:maxLines="1" android:paddingStart="20dp" android:singleLine="true" android:text="備  注:" android:textColor="#666666" android:textSize="14sp" /> <TextView android:id="@+id/tv_remark" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_below="@+id/tv_fireguard_h" android:layout_marginTop="5dp" android:layout_toEndOf="@+id/tv_remark_h" android:lines="1" android:maxLines="1" android:paddingEnd="5dp" android:paddingStart="5dp" android:singleLine="true" android:textColor="#3c3c3c" android:textSize="14sp" tools:text="備  注" /> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:orientation="horizontal"> <TextView android:id="@+id/tv_history_start" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="5dp" android:layout_marginStart="10dp" android:layout_weight="1" android:background="@drawable/shape_round_p" android:gravity="center" android:paddingBottom="5dp" android:paddingTop="5dp" android:text="開始時間" android:textColor="#ffffff" android:textSize="14sp" /> <TextView android:id="@+id/tv_history_end" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="5dp" android:layout_marginStart="5dp" android:layout_weight="1" android:background="@drawable/shape_round_p" android:gravity="center" android:paddingBottom="5dp" android:paddingTop="5dp" android:text="結束時間" android:textColor="#ffffff" android:textSize="14sp" /> <TextView android:id="@+id/tv_history_search" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginEnd="10dp" android:layout_marginStart="5dp" android:layout_weight="1" android:background="@drawable/shape_round_p" android:gravity="center" android:paddingBottom="5dp" android:paddingTop="5dp" android:text="查詢" android:textColor="#ffffff" android:textSize="14sp" /> </LinearLayout> <android.support.design.widget.TabLayout android:id="@+id/tl_history_list_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" app:tabBackground="@color/historyColor" app:tabIndicatorColor="#E21918" app:tabMode="fixed" app:tabSelectedTextColor="#E21918" app:tabTextColor="#ffffff" /> <cn.ln80.happybirdcloud119.view.MyHistoryViewPager android:id="@+id/vp_history_list" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </ScrollView> </LinearLayout>

請記住,版主很懶,也是讓各位知道了具體操作,所以沒有用 style.xml 相關的操作,這些事原始碼。

細心的你定發現了 這裡的 ViewPager 與眾不同,對了,被自定義了。

四、解決衝突的關鍵 自定義 ViewPager

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;

/**
 * Content:ScrollView與viewPager之間的滑動衝突
 * Actor:韓小呆 ヾ(✿゚▽゚)ノ
 * Time:  2018/8/1 13:48
 * Update:
 * Time:
 */
public class MyHistoryViewPager extends ViewPager {
    public MyHistoryViewPager(Context context) {
        super(context);
    }


    public MyHistoryViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int height = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
            int h = child.getMeasuredHeight();
            if (h > height)
                height = h;
        }

        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height,
                MeasureSpec.EXACTLY);

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
}

這裡只是 ViewGroup 根據 其內的 view 高度來 適應處自身的高度。然後我們,我們執行一下程式碼,看看效果:

首次解決衝突效果

細心的你一定發現了,當點選 TabLayout 上的 TabItem 的時候神奇的事情發生了,你的RecycleView自帶動畫效果—閃現了。
你可以屁顛,屁顛的去找產品了,告訴他,你來了點睛之筆 ,幫助產品 做了動畫效果,可以提高使用者的可見性,讓使用者可以很直觀的知道下面列表有資料 巴拉巴拉…一大堆,反正是就是讓產品背鍋唄!(2333)

但是產品也不都是傻狍子哈,下面,告訴你如何解決這個問題。

五、解決閃現 bug

其實吧,很簡單,一行程式碼搞定 ,就是在你的自定義的 ViewPager 直接引用如下方法

 vpHistoryList.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);

徹底解決的效果

完美效果

今天就這些了,該去解決 Zxing 識別度問題了,每天積累一點,對自己沒壞處哈。