美文网首页Android UI
仿美团悬浮效果

仿美团悬浮效果

作者: kornan | 来源:发表于2017-05-20 11:22 被阅读83次
    filter_image.gif

    PullToRefreshListView实现到顶部悬浮效果,这里主要是在ListView的addHeaderView里实现的,后面会讲在item里实现,以下是主要代码:

    public class MainActivity extends AppCompatActivity {
    
    private Toolbar toolbar;
    private PullToRefreshListView pullToRefreshListView;
    private List<String> dataList = new ArrayList<>();
    private FilterAdapter filterAdapter;
    
    private View headerView;
    private View headerView2;
    private View filterView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        filterView = findViewById(R.id.filterView);
        pullToRefreshListView = (PullToRefreshListView) findViewById(R.id.pullToRefreshListView);
    
        //第一个headerView 这里加载美女图片的地方
        headerView = LayoutInflater.from(this).inflate(R.layout.item_head_filter, null);
        //setLayoutParams防止PullToRefreshListView报Caused by: java.lang.ClassCastException
        AbsListView.LayoutParams headerLayoutParams = new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.WRAP_CONTENT);
        headerView.setLayoutParams(headerLayoutParams);
    
        //第二个headerView 这里到顶部后
        AbsListView.LayoutParams rgLayoutParams = new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.WRAP_CONTENT);
        headerView2 = LayoutInflater.from(this).inflate(R.layout.layout_filter, null);
        headerView2.setLayoutParams(rgLayoutParams);
    
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                ListView tempView = pullToRefreshListView.getRefreshableView();
                //添加HeaderView
                tempView.addHeaderView(headerView);
                tempView.addHeaderView(headerView2);
            }
        }, 0);
    
    
        pullToRefreshListView.getRefreshableView().setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
    
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                // 第二个headerView 到顶部时  悬浮tab出现
                if (firstVisibleItem < 2) {
                    filterView.setVisibility(View.GONE);
                } else {
                    filterView.setVisibility(View.VISIBLE);
                }
            }
        });
        for (int i = 0; i < 20; i++) {
            dataList.add("标题:" + i);
        }
        filterAdapter = new FilterAdapter(this, dataList);
        ListView actualListView = pullToRefreshListView.getRefreshableView();
        actualListView.setAdapter(filterAdapter);
        pullToRefreshListView.setMode(PullToRefreshBase.Mode.BOTH);
    }
    
    class FilterAdapter extends BaseAdapter {
        private LayoutInflater mInflater;
        private List<String> dataList;
    
        public FilterAdapter(Context context, List<String> dataList) {
            this.mInflater = LayoutInflater.from(context);
            this.dataList = dataList;
        }
    
        @Override
        public int getCount() {
            return dataList.size();
        }
    
        @Override
        public Object getItem(int i) {
            return dataList.get(i);
        }
    
        @Override
        public long getItemId(int i) {
            return i;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup viewGroup) {
            ViewHolder holder = null;
            if (convertView == null) {
                convertView = mInflater.inflate(android.R.layout.simple_list_item_1, null);
                holder = new ViewHolder();
                holder.textView = (TextView) convertView.findViewById(android.R.id.text1);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            holder.textView.setText(dataList.get(position));
            return convertView;
        }
      }
    
      public static class ViewHolder {
          public TextView textView;
      }
    }
    

    布局:

     <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          tools:context="com.flobberworm.demo.MainActivity">
    
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:minHeight="?attr/actionBarSize"
          tools:layout_editor_absoluteX="8dp"
          tools:layout_editor_absoluteY="0dp">
    
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:lines="1"
            android:text="@string/app_name"
            android:textSize="20sp" />
    
        </android.support.v7.widget.Toolbar>
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.handmark.pulltorefresh.library.PullToRefreshListView
            android:id="@+id/pullToRefreshListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:dividerHeight="0.5dp"
            android:paddingTop="0.5dp"
            app:ptrDrawable="@mipmap/ic_launcher"
            app:ptrRefreshableViewBackground="#ffffff"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp" />
    
          <include
            android:id="@+id/filterView"
            layout="@layout/layout_filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />
      </RelativeLayout>
    </LinearLayout>
    

    注意:因为ListView中的headView和悬浮在顶部的是两个不同的View,所以在点击时需要做状态同步

    相关文章

      网友评论

      • luckyzhangx:这个可行吗?根据 RecyclerView 的回收原理,这应该会导致滑动速度满时所有的 View 都不能得到回收,而滑动速度太快时无法悬停。

      本文标题:仿美团悬浮效果

      本文链接:https://www.haomeiwen.com/subject/eeauxxtx.html