Listview 頭部懸停效果的實現

        在android App中最常用的控件之一Listview基本上每個app都用的上，其使用頻率高，所以就有更多的人想用它來實現更多的效果，比如listview的多佈局，listview的添加頭部，底部和頭部懸停等效果都是最基礎的！下面就用最簡潔的語言來講述一下listview的頭部懸停效果的使用：整個主要佈局就是一個ListView，如果listview的上面有內容且高度比較高，可以把它當做listview的header。要實現懸浮效果，主要是根據ListView可見的第一個條目是哪個條目來操作的。注意這裏的“懸浮”其實只是通過 隱藏/顯示 懸浮部分來實現：在ListView“背後”有一個隱藏的“懸浮部分”，當ListView條目中的懸浮部分成爲ListView可見部分第一個時，這時非ListView條目中的懸浮部分顯示出來，這樣造成“懸浮”部分一直在頂部浮動，當ListView可見部分第一個條目並不是懸浮時，非ListView那部分“隱藏部分”繼續隱藏。

一、MainActivity的佈局爲

<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"
    tools:context="com.dc.listviewtop.MainActivity">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ListView
            android:id="@+id/lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <TextView
            android:id="@+id/tv"
            android:text="懸停部分"
            android:textSize="22sp"
            android:background="#fff"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </FrameLayout>
</LinearLayout>

二、MainActivity中的代碼爲（看註釋）

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.setContentView(R.layout.activity_main);
    initView();
    //模擬給適配器添加數據
    ArrayList<String> strings=new ArrayList();
    for (int i = 0; i <30 ; i++) {
        strings.add("理工吳彥祖"+i);
    }
    //給listview添加第一個頭部
    View view=View.inflate(this,R.layout.headview,null);
    mLv.addHeaderView(view);
    //添加一個顯示的懸停部分
    TextView tv=new TextView(this);
    tv.setText("懸停部分");
    tv.setTextSize(22);
    mLv.addHeaderView(tv);
    //設置適配器
    MyAdapter adapter = new MyAdapter(this);
    adapter.setStrings(strings);
    mLv.setAdapter(adapter);
    //設置listview的滑動監聽
    mLv.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>=1){
                mTv.setVisibility(View.VISIBLE);
            }else{
                mTv.setVisibility(View.GONE);
            }
        }
    });
 mTv.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View v) {
         Toast.makeText(MainActivity.this, "點擊了懸停部分", Toast.LENGTH_SHORT).show();
     }
 });
}

private void initView() {
    mLv = (ListView) findViewById(R.id.lv);
    mTv = (TextView) findViewById(R.id.tv);
}

三、適配器

public class MyAdapter extends BaseAdapter {
    ArrayList<String> mStrings;
    private Context context;
    public void setStrings(ArrayList<String> strings) {
        mStrings = strings;
    }
    public MyAdapter(Context context){
        this.context=context;
    }
    @Override
    public int getCount() {
        return mStrings==null?0:mStrings.size();
    }
    @Override
    public Object getItem(int position) {
        return mStrings.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView textVie=new TextView(context);
        textVie.setText(mStrings.get(position));
        textVie.setTextSize(22);
        return textVie;
    }
}

四、xml中的頭部對應的佈局

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv"
        android:src="@mipmap/ic_launcher"
        android:layout_width="match_parent"
        android:layout_height="200dp"/>
</LinearLayout>

 

這樣就能實現一個簡單的頭部懸停效果，效果如下：這其中的原理還是比較簡單的。希望對你們有幫助。