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

于 2016-03-01 15:54:40 发布
阅读量5.7k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： 自定义控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderinchina/article/details/50772957
本文介绍了如何在Android应用中模仿新浪微博的下拉悬停评论和转发功能。当用户向下滚动时，标题栏下方会出现评论、转发等选项，并在向上滑动到一定高度后自动隐藏。实现这一功能的关键在于自定义ScrollerView，通过监听滑动事件，计算布局距离并判断是否应该显示悬停效果。相关代码示例包括MainActivity.java和CustomScrollView.java。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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



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


这个关键是在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 {

	@Override
	protected 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{
		@Override
		public int getCount() {
			return 100;
		}
		@Override
		public Object getItem(int position) {
			return null;
		}
		@Override
		public long getItemId(int position) {
			return 0;
		}
		@Override
		public 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() {
			@Override
			public void run() {
				mTopView = (ViewGroup) mContentView.findViewById(id);//悬挂的搜索布局  就是一个FrameLayout
				int 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);
	}
	@Override
	protected 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>


评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值