android頂部懸停效果(僅用ListView實現)
阿新 • • 發佈:2019-01-04
先看一下效果圖。。。
主要說的是原理。所以介面醜就醜點,大家湊合著看吧。
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);
}
}
程式碼不難,希望大家有所收穫。