1. 程式人生 > >android頂部懸停效果(僅用ListView實現)

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);
    }
}

程式碼不難,希望大家有所收穫。