android顶部悬停效果(仅用ListView实现)

先看一下效果图。。。





主要说的是原理。所以界面丑就丑点，大家凑合着看吧。

1.布局文件

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="@+id/comment_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true" />
<LinearLayout
android:visibility="gone"
android:id="@+id/comment_bar"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="悬停框\n悬停框"
android:textSize="18dp"
/>
</LinearLayout>
</RelativeLayout>

(1)布局最好是选择Relativelayout，这样悬停框就会直接在最上面出现。

(2)设置其可见度为GONE（不可见且不占用屏幕空间）

(3)背景色设置为白色(否则会是透明，可以自己去试试看看效果)

(4)给定一个固定高度，后面要用到

header_view.xml(ListView的头部布局)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="内容\n内容\n内容\n内容\n内容"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="悬停框\n悬停框"
android:textSize="18dp"/>
</LinearLayout>

(1)布局随意写，但是一定要存在悬停框。。。（自己体会）

2.主要代码

MainActivity

public class MainActivity extends AppCompatActivity{

private ListView comment_list;
private LayoutInflater inflater;
private View headerView;
private LinearLayout comment_bar;

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

initView();
addListContent();
}

private void initView() {
comment_bar = (LinearLayout)findViewById(R.id.comment_bar);

comment_list = (ListView) findViewById(R.id.comment_list);
inflater = LayoutInflater.from(this);
//找到头部布局文件
headerView = inflater.inflate(R.layout.header_view,null);
//给列表添加头部
comment_list.addHeaderView(headerView);
//绑定滑动监听
comment_list.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {

}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
//得到头部（没有添加头部则是第一项）
View c = comment_list.getChildAt(0);
if(c == null){return ;}
//显示在屏幕中的第一个子项
int firstVisiblePosition = comment_list.getFirstVisiblePosition();
//得到头部与标题栏的距离
int top = c.getTop();
//得到实际滑动距离
int scrollvalue = -top+firstVisiblePosition*c.getHeight();
//将dp转化为px
float scale = getApplication().getResources().getDisplayMetrics().density;
//这里的50(dp)即悬停框的高度设定
int dpvalue = (int)(50*scale + 0.5f);
//悬停框显示需要滑动的距离(头部布局的高度减去悬停框的高度)
int pxvalue = c.getHeight() - dpvalue;

//前面为实际滑动距离
if(scrollvalue < pxvalue){
comment_bar.setVisibility(View.GONE);
}else{
comment_bar.setVisibility(View.VISIBLE);
}
}
});
}

public void addListContent(){
//创建数组List，用来存放要显示的内容
List<String> list = new ArrayList<String>();
for (int i = 0; i < 20; i++){
list.add("listView item" + i);
}
//将数据与适配器adapter连接     android.R.layout.simple_list_item_1是android内置的布局文件，里面只有一个TextView
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_list_item_1,list);
//将适配器添加到listView
comment_list.setAdapter(adapter);
}
}

代码不难，希望大家有所收获。