05/29
2013

滚动到底部或顶部响应的ScrollView使用

本文介绍滚动到底部或顶部响应(如加载更多)的ScrollView的使用。网上关于到达底部加载更多的listView示例很多,对于ScrollView却寥寥无几,下面介绍使用自定义的ScrollView来完成该功能的实例。

 

Demo APK 可以方便的查看效果,在各大应用商店搜索 trinea android 下载即可,如:Google Play

示例代码地址见BorderScrollViewDemo,效果图如下:

1、引入公共库

引入TrineaAndroidCommon@Github(欢迎star和fork^_^)作为你项目的library(如何拉取代码及添加公共库),或是自己抽取其中的BorderScrollView@Github部分使用,BorderScrollView继承自ScrollView,可以自定义滚动到底部或顶部时需要完成的任务。

 

2、自定义layout
只需将定义的ScrollView标签换成cn.trinea.android.common.view.BorderScrollView标签即可,源码如下(其中的多个TextView只是为了将ScrollView撑满一屏幕):

<cn.trinea.android.common.view.BorderScrollView
	android:id="@+id/scroll_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_marginBottom="@dimen/dp_40"
	android:orientation="vertical" >

	<RelativeLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content" >

		<TextView
			android:id="@+id/top_text"
			android:layout_width="match_parent"
			android:layout_height="20dp"
			android:gravity="center"
			android:text="top text" />

		<TextView
			android:id="@+id/text1"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_below="@+id/top_text"
			android:gravity="center"
			android:text="text1" />

		<TextView
			android:id="@+id/text2"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:layout_below="@+id/text1"
			android:gravity="center"
			android:text="text2" />

		<TextView
			android:id="@+id/bottom_text"
			android:layout_width="match_parent"
			android:layout_height="20dp"
			android:layout_below="@+id/text2"
			android:gravity="center"
			android:text="bottom text" />
	</RelativeLayout>
</cn.trinea.android.common.view.BorderScrollView>

 

3、设置onTop和onBottom事件
通过borderScrollView.setOnBorderListener(OnBorderListener onBorderListener)设置到达底部和顶部的响应。
OnBorderListener有onTop()和void onBottom()两个函数可以实现,分别在滑动到顶部和底部时被调用执行。代码如下:

public class BorderScrollViewDemo extends Activity {

    private BorderScrollView borderScrollView;
    private TextView         textView1;
    private TextView         textView2;

    private Context          context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.border_scroll_view_demo);

        context = getApplicationContext();

        borderScrollView = (BorderScrollView)findViewById(R.id.scroll_view);
        borderScrollView.setOnBorderListener(new OnBorderListener() {

            @Override
            public void onTop() {
                // may be done multi times, u should control it
                Toast.makeText(context, "has reached top", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onBottom() {
                // may be done multi times, u should control it
                Toast.makeText(context, "has reached bottom", Toast.LENGTH_SHORT).show();
            }
        });
        textView1 = (TextView)findViewById(R.id.text1);
        textView2 = (TextView)findViewById(R.id.text2);

        Display display = getWindowManager().getDefaultDisplay();
        textView1.setHeight(display.getHeight() / 2);
        textView2.setHeight(display.getHeight() / 2);
    }
}

注意onTop和onBottom是有可能被多次执行的,需要自己控制,将在后面的实现原理中介绍具体原因~。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

One thought on “滚动到底部或顶部响应的ScrollView使用