Android項目實戰（二十）：淺談ListView懸浮頭部展現效果

標籤：logs   方法   滑動   set   data-   array   out   title   滾動   

原文:Android項目實戰（二十）：淺談ListView懸浮頭部展現效果

　　先看下效果：需求是 滑動列表 ，其中一部分視圖（粉絲數，關注數這一部分）在滑動到頂端的時候不消失，而是停留在整個介面頭部。

 

我們先分析要解決的問題：

1、如何?列表ListView頂部視圖跟隨ListView一起滑動

2、如何?滑動過程中需要停留在頂部的視圖

 

解決：

第一個問題，實現ListView與頂部視圖一起滑動，ListView提供一個方法，addHeadView(View);  意思就是在ListView頂部添加一個View。那麼這個View就能和ListView一起滾動。

第二個問題，怎麼保證介面中間的某一部分視圖滑動到頂部的時候停留在頂部呢？

首先我們這個停留在頂部的View（稱為View1）是ListView.addHeadView()上去的，即滑動列表，這個View1會划出去，那麼如何讓它不划出去？只要在Listview所在布局最上方

也寫一個同樣的View（稱為View2，View2和ListView同屬於一個FragmentLayout）並先隱藏（Visible = ‘gone‘），當View1剛划出頂部的時候，View2顯示。

View1剛划出頂部的時機就是：

當滑動時 firstVisibleItem>=要懸浮的 item的position時 讓View2顯示 ，否則隱藏。

 

代碼實現：

首先布局檔案：

頭部布局：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" 4     android:layout_width="match_parent" 5     android:layout_height="wrap_content" 6     android:gravity="center" 7     > 8     <ImageView 9         android:layout_width="match_parent"10         android:layout_height="90dp"11         android:src="@mipmap/p1"12         android:scaleType="fitXY"13         />14 </LinearLayout>

要停留在頂部的View布局：(這裡是要停留在頂部的View，這裡addHeadView到ListView頂部,跟隨者ListView滑動到頂部消失，這時滿足firstVisibleItem>=要懸浮的 item的position條件，主介面裡在寫一個相同的View顯示即可)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:gravity="center"    >        <ImageView            android:layout_width="match_parent"            android:layout_height="50dp"            android:src="@mipmap/p2"            android:scaleType="fitXY"            /></LinearLayout>

主布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    >    <TextView        android:id="@+id/title"        android:layout_width="match_parent"        android:layout_height="30dp"        android:gravity="center"        android:text="個人中心"        android:textSize="20dp"         />    <FrameLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        >        <ListView            android:id="@+id/lv"            android:layout_width="match_parent"            android:layout_height="match_parent" />        <LinearLayout            android:id="@+id/invis"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="horizontal"            android:visibility="gone"            >            <ImageView                android:layout_width="match_parent"                android:layout_height="50dp"                android:src="@mipmap/p2"                android:scaleType="fitXY"                />        </LinearLayout>    </FrameLayout></LinearLayout>

java代碼:

 1 private LinearLayout invis; 2     private ListView lv; 3     String[] strs; 4     @Override 5     protected void onCreate(Bundle savedInstanceState) { 6         super.onCreate(savedInstanceState); 7         setContentView(R.layout.activity_main); 8  9         invis = (LinearLayout) findViewById(R.id.invis);10 11         strs = new String[100];12 13         for (int i = 0; i < 20; i++) {14             strs[i] = "data-----" + i;15         }16 17         lv = (ListView) findViewById(R.id.lv);18         View header = View.inflate(this, R.layout.stick_header, null);//頭部內容19         lv.addHeaderView(header);//添加頭部20 21         lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView條目中的懸浮部分 添加到頭部22 23         lv.setAdapter(new ArrayAdapter<String>(this,24                 android.R.layout.simple_list_item_1, strs));25         lv.setOnScrollListener(new AbsListView.OnScrollListener() {26 27             @Override28             public void onScrollStateChanged(AbsListView view, int scrollState) {29 30             }31 32             @Override33             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {34                 if (firstVisibleItem >= 1) {35                     invis.setVisibility(View.VISIBLE);36                 } else {37 38                     invis.setVisibility(View.GONE);39                 }40             }41         });42 43     }

 

Android項目實戰（二十）：淺談ListView懸浮頭部展現效果