几种实现ListView顶部悬浮效果

来源:互联网 发布:成都哪有四川广电网络 编辑:程序博客网 时间:2024/05/01 12:28

顶部悬浮,这个是老生常谈的控件,一搜索网上大篇幅的介绍,有几种实现方式:
1.简单的实现ListView顶部悬浮http://blog.csdn.net/ljfbest/article/details/38765641

2.Android 仿美团网,大众点评购买框悬浮效果,使用的ScrollView
http://blog.csdn.net/xiaanming/article/details/17761431

3.可以采用开源框架StickyListHeadersListView,地址 https://github.com/emilsjolander/StickyListHeaders

4.CollapsingToolbarLayout+Toolbar方式轻松实现
https://github.com/honjane/FloatTabListViewDemo

效果图:
这里写图片描述

这几种方式要实现的悬浮tab不都是透明的,并且是ListView或者ScrollView中一个单独的模块,比如是一个单独的header或item悬浮。
如果要实现header中的部分悬浮呢,效果又是怎样?

效果图:
这里写图片描述

要实现悬浮效果,与1介绍的方式类似,写2个tab,一个先隐藏在顶部,当list View中的tab滚动到隐藏的tab位置时,显示悬浮的tab。通过监听OnScrollListener事件,与1的区别在于1通过判断第一个条目irstVisibleItem >= 1来控制,悬浮tab的显示与隐藏,这里介绍的是通过view的位置与变化来判断悬浮tab的显示与隐藏。

主要代码:

  @Override    public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) {     if (realTabView.getHeight() + headerTv.getHeight() > headerLayout.getBottom()) {            hideView.setVisibility(View.VISIBLE);            realtab.setVisibility(View.INVISIBLE);        } else {            hideView.setVisibility(View.INVISIBLE);            realtab.setVisibility(View.VISIBLE);        }   }

其中realTabVIew.getHeight()是上图中半透明tab的高度
headerTv.getHeight()是顶部白色的标题栏高度
headerLayout.getBottom()是背景图片底部到顶部边缘距离
也就是:
半透明tab的高度+标题栏高度>背景图片底部到顶部边缘距离 时,隐藏真实的tab,显示悬浮tab
这里写图片描述

完整代码:

public class FloatListActivity extends Activity implements AbsListView.OnScrollListener {    private ArrayList<String> listData;    private ListView listView;    private MyAdapter adapter;    private View headerPicView;    private View hideView;    private View headerTv;    private View realTab;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_float);        initView();    }    private void initView() {        headerPicView = LayoutInflater.from(this).inflate(R.layout.layout_header, null);        hideView = findViewById(R.id.secondLayout);        headerTv = findViewById(R.id.header_tv);        realTab = headerPicView.findViewById(R.id.inc_tab);        listData = new ArrayList<>(30);        for (int i = 0; i < 30; i++) {            listData.add("item" + i);        }        adapter = new MyAdapter();        listView = (ListView) findViewById(R.id.listView);        //按顺序添加1个view,先添加的在上面。        listView.addHeaderView(headerPicView);        listView.setAdapter(adapter);        //listView监听滑动事件,很重要,因为可以根据滑动的位置        //决定是否要加载隐藏的视图hideView        listView.setOnScrollListener(this);    }    @Override    public void onScrollStateChanged(AbsListView absListView, int scrollState) {    }    @Override    public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) {        if (hideView.getHeight() + headerTv.getHeight() > headerPicView.getBottom()) {            hideView.setVisibility(View.VISIBLE);            realTab.setVisibility(View.INVISIBLE);            headerTv.setBackgroundColor(getResources().getColor(android.R.color.white));        } else {            hideView.setVisibility(View.INVISIBLE);            realTab.setVisibility(View.VISIBLE);            headerTv.setBackgroundColor(getResources().getColor(android.R.color.transparent));        }    }    private class MyAdapter extends BaseAdapter {        @Override        public int getCount() {            return listData.size();        }        @Override        public String getItem(int i) {            return listData.get(i);        }        @Override        public long getItemId(int i) {            return i;        }        @Override        public View getView(int i, View view, ViewGroup viewGroup) {            ViewHolder viewHolder = null;            if (view == null) {                view = LayoutInflater.from(FloatListActivity.this).inflate(R.layout.layout_item, null);                viewHolder = new ViewHolder();                viewHolder.initView(view);                view.setTag(viewHolder);            } else {                viewHolder = (ViewHolder) view.getTag();            }            String item = getItem(i);            if (item == null) {                return view;            }            viewHolder.updateView(item);            return view;        }        class ViewHolder {            TextView textView;            void initView(View view) {                textView = (TextView) view.findViewById(R.id.item_tv);            }            void updateView(String item) {                textView.setText(item);            }        }    }}

完整demo实现及其CollapsingToolbarLayout+Toolbar实现下载地址:

https://github.com/honjane/FloatTabListViewDemo

0 0