四種方案解決ScrollView嵌套ListView問題

在工作中,曾多次碰到ScrollView嵌套ListView的問題,網(wǎng)上的解決方法有很多種,但是雜而不全。我試過很多種方法,它們各有利弊。

在這里我將會從使用ScrollView嵌套ListView結(jié)構(gòu)的原因、這個結(jié)構(gòu)碰到的問題、幾種解決方案和優(yōu)缺點比較,這4個方面來為大家闡述、分析、總結(jié)。

實際上不光是ListView,其他繼承自AbsListView的類也適用,包括ExpandableListView、GridView等等,為了方便說明,以下均用ListView來代表。

一、 為什么要使用ScrollView嵌套ListView的奇怪的結(jié)構(gòu)

ScrollView和ListView都是滾動結(jié)構(gòu),按理說,這兩個控件在UI上的功能是一樣的,但是看看下面這個設(shè)計:

這是天貓商城的確認訂單的頁面,ScrollView中嵌套了ExpandableListView,ExpandableListView上面有固定的一些控件,下面也有固定的一些控件,整體又要能夠滾動。列表數(shù)據(jù)要嵌在固定數(shù)據(jù)中間,并且作為整體一起滾動,有了這樣的設(shè)計需求,于是就有了ScrollView嵌套ListView的奇怪結(jié)構(gòu)。

二、

ScrollView、ListView嵌套結(jié)構(gòu)碰到的問題

不多說,直接看失敗例子:

android:id="@+id/act_solution_1_sv"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="\nListView上方數(shù)據(jù)\n" />

android:id="@+id/act_solution_1_lv"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="\nListView下方數(shù)據(jù)\n" />

復(fù)制代碼

ScrollView中只能放一個控件,一般都放LinearLayout,orientation屬性值為vertical。在LinearLayout中放需要呈現(xiàn)的內(nèi)容。ListView也在其中,ListView的高度設(shè)為適應(yīng)自身內(nèi)容(wrap_content)。粗略一看,應(yīng)該沒有什么問題。但是看下面的實際效果圖:

圖中黑框的部分就是ListView,里面放了20條數(shù)據(jù),但是卻只顯示了1條。

控件的屬性設(shè)置上沒有問題,但是為什么沒有按照我的想法走呢?

看看下面這個圖:

是否有點明白了呢?原因就是scroll事件的消費處理以及ListView控件的高度設(shè)定問題。

雖然我看源碼也看了不少,但是要說出來卻不知到該怎么下手,我是大概知道原因,但是不知道怎么整理完全。求高手賜教…

三、問題解決方案

1、手動設(shè)置ListView高度

經(jīng)過測試發(fā)現(xiàn),在xml中直接指定ListView的高度,是可以解決這個問題的,但是ListView中的數(shù)據(jù)是可變的,實際高度還需要實際測量。于是手動代碼設(shè)置ListView高度的方法就誕生了。

public static void setListViewHeightBasedOnChildren(ListView listView) {

if(listView == null) return;

ListAdapter listAdapter = listView.getAdapter();

if (listAdapter == null) {

// pre-condition

return;

}

int totalHeight = 0;

for (int i = 0; i < listAdapter.getCount(); i++) {

View listItem = listAdapter.getView(i, null, listView);

listItem.measure(0, 0);

totalHeight += listItem.getMeasuredHeight();

}

ViewGroup.LayoutParams params = listView.getLayoutParams();

params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));

listView.setLayoutParams(params);

}

復(fù)制代碼

上面這個方法就是設(shè)定ListView的高度了,在為ListView設(shè)置了Adapter之后使用,就可以解決問題了。

但是這個方法有個兩個細節(jié)需要注意:

一是Adapter中g(shù)etView方法返回的View的必須由LinearLayout組成,因為只有LinearLayout才有measure()方法,如果使用其他的布局如RelativeLayout,在調(diào)用listItem.measure(0,

0);時就會拋異常,因為除LinearLayout外的其他布局的這個方法就是直接拋異常的,沒理由…。我最初使用的就是這個方法,但是因為子控件的頂層布局是RelativeLayout,所以一直報錯,不得不放棄這個方法。

二是需要手動把ScrollView滾動至最頂端,因為使用這個方法的話,默認在ScrollView頂端的項是ListView,具體原因不了解,求大神解答…可以在Activity中設(shè)置:

sv = (ScrollView) findViewById(R.id.act_solution_1_sv);

復(fù)制代碼

2、使用單個ListView取代ScrollView中所有內(nèi)容

這個方法是我在試了幾個方法都失敗的情況下自己琢磨出來的。

用一張圖來解釋這個方法的思想:

就是說,把整個需要放在ScrollView中的內(nèi)容,統(tǒng)統(tǒng)放在ListView中,原ListView上方的數(shù)據(jù)和下方數(shù)據(jù),都作為現(xiàn)ListView的一個itemView,和原ListView中的單條數(shù)據(jù)是平級的關(guān)系。

xml布局方面十分簡單:

android:id="@+id/act_solution_2_lv"

android:layout_width="fill_parent"

android:layout_height="wrap_content">

復(fù)制代碼

一個單獨的ListView就可以了。

原ListView上方數(shù)據(jù)和下方數(shù)據(jù),都寫進兩個xml布局文件中:

Java代碼方面,需要自定義一個Adapter,在Adapter中的getView方法中進行position值的判斷,根據(jù)position值來決定inflate哪個布局:

public View getView(int position, View convertView, ViewGroup parent) {

//列表第一項

if(position == 0){

convertView = inflater.inflate(R.layout.item_solution2_top, null);

return convertView;

}

//列表最后一項

else if(position == 21){

convertView = inflater.inflate(R.layout.item_solution2_bottom, null);

return convertView;

}

//普通列表項

ViewHolder h = null;

if(convertView == null || convertView.getTag() == null){

convertView = inflater.inflate(R.layout.item_listview_data, null);

h = new ViewHolder();

h.tv = (TextView) convertView.findViewById(R.id.item_listview_data_tv);

convertView.setTag(h);

}else{

h = (ViewHolder) convertView.getTag();

}

h.tv.setText("第"+ position + "條數(shù)據(jù)");

return convertView;

}

復(fù)制代碼

在Activty中,只需要直接為ListView設(shè)置自定義的Adapter就行了。

lv = (ListView) findViewById(R.id.act_solution_2_lv);

adapter = new AdapterForListView2(this);

lv.setAdapter(adapter);

復(fù)制代碼

3、使用LinearLayout取代ListView

既然ListView不能適應(yīng)ScrollView,那就換一個可以適應(yīng)ScrollView的控件,干嘛非要吊死在ListView這一棵樹上呢?而LinearLayout是最好的選擇。但如果我仍想繼續(xù)使用已經(jīng)定義好的Adater呢?我們只需要自定義一個類繼承自LinearLayout,為其加上對BaseAdapter的適配。

import android.content.Context;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

import android.widget.BaseAdapter;

import android.widget.LinearLayout;

public class LinearLayoutForListView extends LinearLayout {

private BaseAdapter adapter;

private OnClickListener onClickListener = null;

public void bindLinearLayout() {

int count = adapter.getCount();

this.removeAllViews();

for (int i = 0; i < count; i++) {

View v = adapter.getView(i, null, null);

v.setOnClickListener(this.onClickListener);

addView(v, i);

}

Log.v("countTAG", "" + count);

}

public LinearLayoutForListView(Context context) {

super(context);

復(fù)制代碼

上面的代碼拷貝保存為LinearLayoutForListView.class,或者直接拷貝Demo中的這個類在自己的工程里。我們只需要把原來xml布局文件中的ListView替換為這個類就行了:

android:id="@+id/act_solution_3_mylinearlayout"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical" >

復(fù)制代碼

在Activity中也把ListView改成LinearLayoutForListView,就能成功運行了。

mylinearlayout = (LinearLayoutForListView) findViewById(R.id.act_solution_3_mylinearlayout);

adapter = new AdapterForListView(this);

mylinearlayout.setAdapter(adapter);

復(fù)制代碼

4、自定義可適應(yīng)ScrollView的ListView

這個方法和上面的方法是異曲同工,方法3是自定義了LinearLayout以取代ListView的功能,但如果我脾氣就是倔,就是要用ListView怎么辦?那就只好自定義一個類繼承自ListView,通過重寫其onMeasure方法,達到對ScrollView適配的效果。

下面是繼承了ListView的自定義類:

import android.content.Context;

import android.util.AttributeSet;

import android.widget.ListView;

public class ListViewForScrollView extends ListView {

public ListViewForScrollView(Context context) {

super(context);

}

public ListViewForScrollView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public ListViewForScrollView(Context context, AttributeSet attrs,

int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,

MeasureSpec.AT_MOST);

super.onMeasure(widthMeasureSpec, expandSpec);

}

}

復(fù)制代碼

三個構(gòu)造方法完全不用動,只要重寫onMeasure方法,需要改動的地方比起方法3少了不是一點半點…

在xml布局中和Activty中使用的ListView改成這個自定義ListView就行了。代碼就省了吧…

這個方法和方法1有一個同樣的毛病,就是默認顯示的首項是ListView,需要手動把ScrollView滾動至最頂端。

sv = (ScrollView) findViewById(R.id.act_solution_4_sv);

sv.smoothScrollTo(0, 0);

復(fù)制代碼

5、設(shè)置ScrollView的屬性,使ListView能夠成功嵌套(無法達到預(yù)定效果)

這個方法是我在寫Demo的時候找到的,第一反應(yīng)是有這個方法我還寫這個Demo干嘛,只要在布局文件中添加一個屬性就搞定了。不過結(jié)果確實是ListView的大小把ScrollView的剩余部分填滿了,但卻不能滾動,真是個致命的問題…

不廢話了,布局文件中:

android:id="@+id/act_solution_5_sv"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_below="@+id/act_solution_5_vg_top"

android:fillViewport="true">

復(fù)制代碼

設(shè)置fillViewport的屬性為true即可。簡單吧?

但是不能滾動這個致命的問題我卻不知道該怎么解決了,繼續(xù)求大神解答…

四、幾種種方法的優(yōu)缺點比較

上面一共給出了4中親測可用的方法,各自有使用條件,復(fù)雜程度也各不相同。

下面我來從幾個方面來分析幾種方法的優(yōu)勢和劣勢。

方法1的優(yōu)點是不用對使用的控件做任何修改,只需要使用一個現(xiàn)成的方法就好了,而最大的限制是ListView的item只能由LinearLayout這一個布局組成,對于一些復(fù)雜的布局就不適用了。如果你的工程急需解決這個問題,而且滿足方法的使用條件,即ListView的item布局簡單,完全有LinearLayout組成,你就只需要把setListViewHeightBasedOnChildren方法拿過去就行了。

方法2的優(yōu)點是布局文件設(shè)計簡單、Activity中的代碼也很少,而缺點卻是自定義Adapter變得十分復(fù)雜,而且執(zhí)行效率會變低,因為findViewById是十分費時的操作,而使用ViewHolder結(jié)構(gòu)可以解決費時的問題(有興趣的童鞋可以去搜一艘ViewHolder結(jié)構(gòu)),然而使用了方法2的話,會破壞這種結(jié)構(gòu)。如果你的工程設(shè)計上偏簡單,ListView子項相對少、ListView上下方數(shù)據(jù)少、子項間交互少的話,可以嘗試一下。

方法3的優(yōu)點是完全解決了ScrollView嵌套ListView的問題,同時代碼較少,你甚至可以直接使用LinearLayout,而在Activity中手動為LinearLayout添加子項控件,不過需要注意的是,在添加前需要調(diào)用其removeAllViews的方法,否則可能會出現(xiàn)預(yù)想不到的事情,那時你會想念天國的ListView的。缺點不是很明顯,但還是有兩個:一是使用的不是系統(tǒng)控件,不能在xml布局的Graphical Layout視圖中直接看到效果;二是不能向ListView那樣可以使用ViewHolder結(jié)構(gòu),在加載大量子項時會費很多時間在findViewById中。如果你的列表數(shù)據(jù)比較少的話,不妨試試這個方法,除了不能使用ViewHolder結(jié)構(gòu),使用方法幾乎和ListView一樣。

方法4…比方法3更簡單,代碼更少,同時保留了ListView原有的所有方法,包括notifyDataSetChanged方法,相比其他方法是最趨近于完美的方法,只是需要在Activity中設(shè)定ScrollView滾動至頂端。如果你還在猶豫不決的話就選這個方法吧,我想我以后是只會用這個方法了…

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,622評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,716評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,746評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,991評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,706評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,036評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,029評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,203評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,725評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,451評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,677評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,161評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,857評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,266評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,606評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,407評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,643評論 2 380

推薦閱讀更多精彩內(nèi)容