仿照微博詳情頁動態評論滾動頭
阿新 • • 發佈：2019-01-27
最近做到一個需求，就是可以懸停的頭部。就是當一個條目在螢幕之下的時候懸停在螢幕最下部，當條目在螢幕上方的時候，懸停在螢幕的頭部。最終效果如下：
效果看起來不怎麼好，因為mac上的GiF製作軟體很奇怪，大家先看著吧。真的需要的話可以下載專案來執行試試。
首先我們考慮下實現的思路：
1.由於內容可滑動我們最好是放在listview 中。
2.由於listview的頭部很大，可能超出螢幕，所以這個時候我們控制元件應該顯示螢幕的最下方。
3.listview是有內容的，當內容很長的時候我們的頭部是會被移動到螢幕的上面然後移除螢幕，此時我們需要將這個評論控制元件顯示在螢幕的最上方。
好了這個就是具體的需求那我們怎麼做呢：
1.我們可以重寫listview的滑動事件，監聽當評論的的頭部滑到螢幕listview的頭部時我們顯示我們提前寫好的一樣的控制元件，這樣使用者看起來就是一個控制元件在使用。那麼底部也是同理了。具體我們看程式碼：
activity程式碼：
package com.example.songzhihang.listheadtest;
import android.graphics.Rect;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import 接下來看下佈局檔案：其中提前定義好的兩個備用那個控制元件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.songzhihang.listheadtest.MainActivity">
<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff0"></View>
<com.example.songzhihang.listheadtest.CusListView
android:layout_below="@+id/view"
android:id="@+id/listview"
android:layout_width="match_parent"
android:scrollbars="none"
android:layout_height="match_parent"></com.example.songzhihang.listheadtest.CusListView>
<TextView
android:id="@+id/text"
android:layout_below="@+id/view"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="我是頭部"
android:visibility="gone"
android:background="#fff"
/>
<TextView
android:id="@+id/buttom_text"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="我是頭部"
android:visibility="gone"
android:background="#fff"
/>
</RelativeLayout>
然後看下自定的listview其中包含2個頭部：
package com.example.songzhihang.listheadtest;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ListView;
/**
* @discription
* @autor songzhihang
* @time 2017/3/15 下午8:58
**/
public class CusListView extends ListView{
public CusListView(Context context) {
super(context);
init();
}
public CusListView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CusListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
void init(){
LinearLayout headView=new LinearLayout(getContext());
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// headView.setLayoutParams(params);
headView.setOrientation(LinearLayout.VERTICAL);
//內容佈局
View misshead=inflate(getContext(),R.layout.dismiss_head_layout,null);
//長期駐存在螢幕的控制元件頭
View showhead=inflate(getContext(),R.layout.head_layout,null);
headView.addView(misshead);
headView.addView(showhead);
addHeaderView(headView);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(ev);
}
}
其實這只是個思路，具體的話實現了我們可以做很多的事情，達到很多的效果。想看原始碼的同學可以看我的Github，地址：這裡寫連結內容