android 仿新浪微博转发 评论悬浮框的功能

可能这个标题会误导大家,但是又知道博客标题起什么好,微博相信大家都很爱玩,而且微博很多好玩的东西,为我们无聊的生活添加点乐趣,微博正文有个功能就是我们向下拖动的时候,标题栏下面会悬挂一个评论.转发,赞,的功能,当我们向上滑动到一定高度后这个又自动消失,如图：

无行中逛泡在网上的日子 这个论坛,看到关于这篇文章,就下载下来了,看了相关代码,发现设计的很巧妙,可能我们会想通过什么自定义来实现,现在简单的画一个图分析它的实现方式：

这个关键是在2这个部分,现在我们布局文件贴下,然后分析：

<com.zhimore.myscrollview.view.TopView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/custom_top_view"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/meinv"            android:contentDescription="@string/app_name"             />        <FrameLayout            android:id="@+id/top"            android:layout_width="match_parent"            android:layout_height="wrap_content"             android:background="#66ffffff"            >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="horizontal"                android:padding="5dp" >                <EditText                    android:id="@+id/et"                    android:layout_width="0dp"                    android:layout_height="wrap_content"                    android:layout_gravity="center"                    android:layout_weight="1"                    android:gravity="center"                    android:hint="请输入你想搜的内容"                    android:textSize="14sp" />                <Button                    android:id="@+id/btn"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:background="@drawable/body_bg"                    android:layout_gravity="center_vertical"                    android:text="一键搜索"                     android:padding="11dp"                    android:layout_marginLeft="10dp"                    />            </LinearLayout>        </FrameLayout><com.zhimore.myscrollview.view.ScrollViewListView    android:id="@+id/listview"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:scrollbars="none"    android:dividerHeight="1dp"    android:divider="#e5e5e5"    android:background="#ffffff"    ></com.zhimore.myscrollview.view.ScrollViewListView>    </LinearLayout></com.zhimore.myscrollview.view.TopView>

分析：

1：首先TopView会获取它的根布局 然后移除所有它的子view，创建一个ScrollerView,我们知道ScrollerView要有一个根布局,就把刚才获取TopView的根布局添加到ScrollerView中,然后把ScrollerView添加到TopView中,这样整个界面就可以滑动了

2：在图上面2部分如果向下滑动到这个搜索部分(也就是2部分),这个搜索布局就会悬挂在标题栏下面,现在我们有ScrollerView，它有个onScrollChanged()方法可以判断我们向上滑动了多少距离,这样时候就要算出搜索布局离上面的top是多少进行判断,如果滑动的距离大于这个向上的距离,搜索布局就悬挂在标题栏下面,否则就在原来位置显示,

现在把相关代码贴下：

MainActivity.java

package com.zhimore.myscrollview;import com.zhimore.myscrollview.view.ScrollViewListView;import com.zhimore.myscrollview.view.TopView;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;public class MainActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ScrollViewListView listview = (ScrollViewListView) findViewById(R.id.listview);listview.setAdapter(new MyAdapter());TopView view_hover = (TopView) findViewById(R.id.custom_top_view);view_hover.setTopView(R.id.top);}class MyAdapter extends BaseAdapter{@Overridepublic int getCount() {return 100;}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {TextView tView = new TextView(getApplicationContext());tView.setText("微博内容");    tView.setTextSize(24);    tView.setTextColor(Color.parseColor("#000000"));tView.setGravity(Gravity.CENTER);return tView;}}}

TopView.java 布局文件的根布局

package com.zhimore.myscrollview.view;import android.content.Context;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;public class TopView extends FrameLayout {private ViewGroup mContentView;private ViewGroup mTopView;private int  mTopViewTop;private View mTopContent;public TopView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}public TopView(Context context, AttributeSet attrs) {this(context, attrs,0);}public TopView(Context context) {this(context,null);}private void init() { post(new Runnable() {            @Override            public void run() {//获取它的根目录 view                mContentView = (ViewGroup) getChildAt(0);//就是LinearLayout                removeAllViews();//这是移除所有的view对象                CustomScrollView scrollView = new CustomScrollView(getContext(), TopView.this);//创建ScrollView                scrollView.addView(mContentView);//把移除的view 添加到scrollview中                addView(scrollView);//把scrollview添加到自定义的topview中因为需要滑动            }        });}public void setTopView(final int id) {post(new Runnable() {@Overridepublic void run() {mTopView = (ViewGroup) mContentView.findViewById(id);//悬挂的搜索布局  就是一个FrameLayoutint height = mTopView.getChildAt(0).getMeasuredHeight();//LienarLayout 高度ViewGroup.LayoutParams params = mTopView.getLayoutParams();params.height = height;mTopView.setLayoutParams(params);//设置搜索的高度mTopViewTop = mTopView.getTop();//离上面的距离mTopContent = mTopView.getChildAt(0);//mTopContent  其实就是LinearLayout}});    }public void onScroll(final int scrollY) {        post(new Runnable() {            @Override            public void run() {                if (mTopView == null) return;                if (scrollY >= mTopViewTop&& mTopContent.getParent() == mTopView) {                    mTopView.removeView(mTopContent);                    addView(mTopContent);                } else if (scrollY < mTopViewTop&& mTopContent.getParent() == TopView.this) {                    removeView(mTopContent);//从布局中移除这个mTopContent                    mTopView.addView(mTopContent);//把 这个mTopContent添加到搜索布局中                }            }        });}}

CustomScrollView.java

package com.zhimore.myscrollview.view;import android.content.Context;import android.util.AttributeSet;import android.util.Log;import android.widget.ScrollView;public class CustomScrollView extends ScrollView {private static final String TAG = CustomScrollView.class.getSimpleName();private TopView mTopView;public CustomScrollView(Context context, TopView topView) {super(context);this.mTopView = topView;setVerticalScrollBarEnabled(false);//禁止竖直滑动条出现}public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);}public CustomScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public CustomScrollView(Context context) {super(context);}   @Override   protected void onScrollChanged(int l, int t, int oldl, int oldt) {      super.onScrollChanged(l, t, oldl, oldt);      Log.e(TAG, "t---------->"+t);      mTopView.onScroll(t);   }}

ScrollViewListView.java

package com.zhimore.myscrollview.view;import android.content.Context;import android.util.AttributeSet;import android.widget.ListView;/** * 解决ListView与SrollView共存自定义ListView */public class ScrollViewListView extends ListView {public ScrollViewListView(Context context) {super(context);}public ScrollViewListView(Context context, AttributeSet attrs) {super(context, attrs);}public ScrollViewListView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 1, MeasureSpec.AT_MOST);super.onMeasure(widthMeasureSpec, expandSpec);}}

布局文件：

<com.zhimore.myscrollview.view.TopView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/custom_top_view"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" >        <ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@drawable/meinv"            android:contentDescription="@string/app_name"             />        <FrameLayout            android:id="@+id/top"            android:layout_width="match_parent"            android:layout_height="wrap_content"             android:background="#66ffffff"            >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:orientation="horizontal"                android:padding="5dp" >                <EditText                    android:id="@+id/et"                    android:layout_width="0dp"                    android:layout_height="wrap_content"                    android:layout_gravity="center"                    android:layout_weight="1"                    android:gravity="center"                    android:hint="请输入你想搜的内容"                    android:textSize="14sp" />                <Button                    android:id="@+id/btn"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:background="@drawable/body_bg"                    android:layout_gravity="center_vertical"                    android:text="一键搜索"                     android:padding="11dp"                    android:layout_marginLeft="10dp"                    />            </LinearLayout>        </FrameLayout><com.zhimore.myscrollview.view.ScrollViewListView    android:id="@+id/listview"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:scrollbars="none"    android:dividerHeight="1dp"    android:divider="#e5e5e5"    android:background="#ffffff"    ></com.zhimore.myscrollview.view.ScrollViewListView>    </LinearLayout></com.zhimore.myscrollview.view.TopView>