1. 程式人生 > >PullToRefreshListView懸浮頭部設置

PullToRefreshListView懸浮頭部設置

abs alt vertical ray count head mas mipmap oid

效果圖:

技術分享圖片

實現方式:

給 PullToRefreshListView 設置 onScrollListener 當滑動時 firstVisibleItem >= 要懸浮的 item 的 position 時,讓懸浮部分顯示,否則隱藏

代碼示例:

    listView.setOnScrollListener(new AbsListView.OnScrollListener() {

            @Override
            public void onScrollStateChanged ( AbsListView view, int scrollState ) {

            }

            @Override
            public void onScroll ( AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount ) {
                if (firstVisibleItem >= 2) { 
                    invis.setVisibility(View.VISIBLE);
                } else {

                    invis.setVisibility(View.GONE);
                }
            }
        });

1. MainActivity布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.handmark.pulltorefresh.library.PullToRefreshListView
            android:id="@+id/refreshListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:id="@+id/invis"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="#ccedc7"
            android:orientation="horizontal"
            android:visibility="gone" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="懸浮部分" />
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

2. header1布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="#000"
        android:gravity="center"
        android:text="標題"
        android:textColor="#ffffff" />

</RelativeLayout>

3. header2布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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:background="#ccedc7"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="懸浮部分" />
    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@mipmap/ic_launcher"/>

</LinearLayout>

4.MainActivity代碼:

public class MainActivity extends Activity {

    private LinearLayout invis;
    private PullToRefreshListView mPullToRefreshListView;   //一個可以下拉刷新的listView對象
    private ArrayList<String> list = new ArrayList<String>(); //數據源
    private ListView listView; //普通的listView對象

    @Override
    protected void onCreate ( Bundle savedInstanceState ) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        invis = (LinearLayout) findViewById(R.id.invis);
        mPullToRefreshListView = (PullToRefreshListView) findViewById(R.id.refreshListView);

        for (int i = 0; i < 50; i++) {
            list.add("data-----" + i);
        }

        listView = mPullToRefreshListView.getRefreshableView();

        //頭部內容,會隱藏的部分
        View header1 = View.inflate(this, R.layout.header1, null);
        listView.addHeaderView(header1);  //添加頭部,會隱藏的部分

        //頭部內容,懸浮的部分
        View header2 = View.inflate(this, R.layout.header2, null);
        listView.addHeaderView(header2);  //添加頭部,ListView條目中的懸浮部分

        //實例化適配器對象
        listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list));

        listView.setOnScrollListener(new AbsListView.OnScrollListener() {

            @Override
            public void onScrollStateChanged ( AbsListView view, int scrollState ) {

            }

            //方法onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) 內參數的介紹:
            // (1)AbsListView view 所監聽的listView對象
            //(2)int firstVisibleItem 能看見的第一個item的位置
            //(3)int visibleItemCount 能看見的item的數量
            //(4)int totalItemCount 所有item的總數
            @Override
            public void onScroll ( AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount ) {
                if (firstVisibleItem >= 2) {  //第二個條目內容已經不顯示
                    invis.setVisibility(View.VISIBLE);
                } else {
                    invis.setVisibility(View.GONE);
                }
            }
        });
    }
}
hander2中的View要一直顯示,其實就是把ListView和另一個跟Hander2相同的View放在同一個幀布局內,
然後判斷顯示的第二個條目是否在顯示當中,如果第二個條目不顯示了,馬上顯示出幀布局內和hander2一樣的View,
這樣就實現了hander2一直顯示的效果,其實呢,hander2在第一個條目滑上去後已經消失了,是用另一個View來代替它的。

這裏要註意的是hander2中的View和代替hander2的View長度和寬度要一樣,才不會產生替換視覺效果。

獲取懸浮部分是第幾個item,在代碼中添加一個item點擊事件:
  listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick ( AdapterView<?> parent, View view, int position, long id ) {
                Toast.makeText(MainActivity.this, "第" + position + "item" , Toast.LENGTH_SHORT).show();
            }
        });
當點擊懸浮部分時,彈窗顯示當前是第幾個item
技術分享圖片
所以懸浮效果是從第二個item設置開始
   @Override
            public void onScroll ( AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount ) {
                if (firstVisibleItem >= 2) {  //第二個條目內容已經不顯示
                    invis.setVisibility(View.VISIBLE);
                } else {
                    invis.setVisibility(View.GONE);
                }
            }

  





PullToRefreshListView懸浮頭部設置