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 識別度問題了,每天積累一點,對自己沒壞處哈。