Android控件之ScrollView（滚动视图）

昨天boss让做一个效果，大体说就是做ListView的横向显示。我想了两天一直捣鼓ListView，没有弄出来。

今天翻书的时候看到滚动视图(ScrollView)，有垂直和水平滚动两种效果。

用这个实现列表的横向显示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/forward"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:text="上一页" />

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView1"
        android:layout_width="200dip"
        android:layout_height="wrap_content"
        android:layout_gravity="center" >

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TableRow
                android:id="@+id/tableRow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p1"
                    android:padding="5dip" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p2"
                    android:padding="5dip" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p3"
                    android:padding="5dip" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p4" 
                    android:padding="5dip"/>

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p5" 
                    android:padding="5dip"/>

                <Button
                    android:id="@+id/button1"
                    android:layout_width="50dip"
                    android:layout_height="50dip"
                    android:background="@drawable/p6" 
                    android:padding="5dip"/>
            </TableRow>

            <TableRow
                android:id="@+id/tableRow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="111" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="22" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="33" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="4" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="5" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="66" />
            </TableRow>
        </TableLayout>
    </HorizontalScrollView>

    <Button
        android:id="@+id/next"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:text="下一页" />

</LinearLayout>

下面是Activity函数，也可以通过两个按钮控制视图的左右移动：

package com.xplus.scrollviewtest;


import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.HorizontalScrollView;


public class ScrollTestActivity extends Activity {


	private Button forward;
	private Button next;


	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		forward = (Button) findViewById(R.id.forward);
		next = (Button) findViewById(R.id.next);


		forward.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//通过监听按钮，控制HorizontalScrollView的滚动，每次滚动50dip
				HorizontalScrollView h = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);
				h.smoothScrollTo(h.getScrollX() - 50, 0);
			}
		});
		next.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				//通过监听按钮，控制HorizontalScrollView的滚动，每次滚动50dip
				HorizontalScrollView h = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);
				h.smoothScrollTo(h.getScrollX() + 50, 0);
			}
		});


	}


	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}


}

另外，这种实现方法中，按钮需要自己挨个添加。包括图片按钮的触发事件。

在滚动的过程中，在下面会出现一个横向的滚动条，可以通过在android:scrollbars="none"来隐藏滚动条。

通过按钮实现滚动条滚动还有一种 方法：h.arrowScroll(View.FOCUS_RIGHT);