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>

这样就能实现一个简单的头部悬停效果，效果如下：这其中的原理还是比较简单的。希望对你们有帮助。

Listview 头部悬停效果的实现

猜你喜欢