Android UI系列-----ScrollView和HorizontalScrollView

本篇随笔将讲解一下Android当中比较经常使用的两个布局容器--ScrollView和HorizontalScrollView，从字面意义上来看也是很是的简单的，ScrollView就是一个能够滚动的View，这个滚动的方向是垂直方向的，而HorizontalScrollView则是一个水平方向的能够滚动的View。本篇随笔可能描述性的知识比较少，最主要仍是经过代码来看看如何使用这两个View。

1、ScrollView的简单介绍

首先来看看ScrollView和HorizontalScrollView这两个View的定义。ScrollView和HorizontalScrollView都是一个布局容器，里面能够放入child View控件，咱们经过其继承关系看到，ScrollView和HorizontalScrollView这两个类是ViewGroup的一个间接子类。

java.lang.Object
   ↳    android.view.View
        ↳    android.view.ViewGroup
             ↳    android.widget.FrameLayout
                  ↳    android.widget.ScrollView

java.lang.Object
   ↳    android.view.View
        ↳    android.view.ViewGroup
             ↳    android.widget.FrameLayout
                  ↳    android.widget.HorizontalScrollView

由于ScrollView和HorizontalScrollView只是两种滚动方向不一样的View而已，其余方面都基本相同，因此下面只单单以ScrollView来说解。

经过使用ScrollView，咱们能够滚动其里面的子View控件，这样就容许咱们控件的高度能够大于咱们实际屏幕的尺寸高度。ScrollView是一个FrameLayout，至于什么是FrameLayout，简单的来讲，FrameLayout一般被用来设计成在屏幕上占用一块地方而且里面只有一个Item，咱们经常使用到的例如DatePicker、TimePicker这些控件都是属于FrameLayout布局的。所以在ScrollView当中，也一般只包含一个子元素，而且这个子元素也是一个布局文件，这样咱们才能在这个布局文件里面添加咱们想要的任何子控件，从而实现滚动的效果。

对于ScrollView来讲，由于其是垂直方向上的滚动布局，所以一般咱们给其添加一个LinearLayout的子元素，而且设置orientation为vertical(垂直方向的)。下面咱们经过一个小例子来看看如何使用咱们的ScrollView来展现多张图片，而且实现图片的垂直方向的滚动。

首先咱们定义一个ScrollView，由于ScrollView也是一个ViewGroup，因此咱们能够直接使用ScrollView做为咱们的xml文件的根元素：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="false">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:orientation="vertical"/>

</ScrollView>

咱们看到，在ScrollView元素下面咱们还给其定义了一个LinearLayout，而且设置了其方向为垂直方向的线性布局。咱们添加图片的操做放在了代码中来完成。下面来看一下ScrollViewActivity这个类：

public class ScrollViewActivity extends Activity
{
    private LinearLayout layout;

    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_scrollview);

        layout = (LinearLayout) findViewById(R.id.layout);

        for(int i = 0; i < 8; i++)
        {
            //  经过资源文件来得到指定一个Drawable对象
            Drawable drawable = getResources().getDrawable(R.drawable.kk_hero);
            ImageView imageView = new ImageView(this);
            imageView.setImageDrawable(drawable);
            layout.addView(imageView);
        }
    }
}

咱们看到，这个Activity很是的简单，由于LinearLayout就是一个ViewGroup对象，因此咱们能够动态的给其添加咱们想要的View控件，这里咱们给其添加了8张图片，咱们来看看效果：

咱们看到，在Activity启动之后，就会在其下面生成8个ImageView的对象，而且这几张图片是能够在垂直方向上滚动的。

2、经过ScrollView实现从服务器端获取一条新闻，显示在界面上

接下来我们经过ScrollView来作一个稍微实际一点的例子，咱们常常会用手机来看新闻，固然一篇新闻是从服务器端获取过来的数据，并且可能一篇新闻里面有不少的内容，所以咱们须要使用一个能够滚动的布局来显示咱们的新闻内容，而TextView自己是能够实现文本的滚动显示的，可是结合ScrollView和TextView能够有更好的效果。

咱们服务器端就很简单，让咱们的应用程序访问服务器端的一个Html的文件，咱们知道Html的文件里面会有许多的Html标签，那么咱们若是想在Android上也可以显示标签的样式，就不能单单的只是将获取到的文本内容展现出来而已，这里就须要用的Android提供的一个 Html 的类，用它来处理咱们从服务器端得到的Html的字符串内容：

咱们的布局文件仍是使用的刚才那一个：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="false">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:orientation="vertical"/>

</ScrollView>

由于要访问网络，因此这里须要新建一个HttpUtils的工具类，来得到服务器端的文本内容：

public class HttpUtils
{
    /**
     * 访问服务器端的内容
     * @param path  访问的url地址
     * @param encode    编码方式
     * @return  返回String类型的值
     */
    public static String getDataFromServer(String path, String encode)
    {
        String result = "";

        HttpClient httpClient = new DefaultHttpClient();
        try
        {
            HttpPost httpPost = new HttpPost(path);
            HttpResponse httpResponse = httpClient.execute(httpPost);
            if (httpResponse != null && httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK)
            {
                result = EntityUtils.toString(httpResponse.getEntity(), "utf-8");
            }
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }
        finally
        {
            httpClient.getConnectionManager().shutdown();
        }

        return result;
    }
}

咱们仍是用以前那个Activity：

public class ScrollViewActivity extends Activity
{
    private LinearLayout layout;
    private ProgressDialog dialog;
    private TextView textView;
    private final String PATH = "http://172.25.152.34:8080/httptest/news.html";
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_scrollview);

        dialog = new ProgressDialog(this);
        dialog.setTitle("提示信息");
        dialog.setMessage("loading......");
        dialog.setCancelable(false);
        dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);

        layout = (LinearLayout) findViewById(R.id.layout);
        textView = new TextView(this);

        layout.addView(textView);

        new MyTask().execute(PATH);
    }

    public class MyTask extends AsyncTask<String, Void, String>
    {
        @Override
        protected void onPreExecute()
        {
            dialog.show();
        }

        @Override
        protected String doInBackground(String... params)
        {
            String result = HttpUtils.getDataFromServer(params[0], "utf-8");
            return result;
        }

        @Override
        protected void onPostExecute(String s)
        {
            //  Html类的fromHtml方法能够处理一个Html的字符串文本，这样就能够根据Html的标签在手机上展现其样式
            Spanned spanned = Html.fromHtml(s);
            textView.setText(spanned);
            //  给TextView设置一个方法，传一个LinkMovementMethod对象进去，这样当文本中若是有href连接时，系统会自动打开浏览器跳转到该href上
            textView.setMovementMethod(new LinkMovementMethod());
            dialog.dismiss();
        }
    }
}

由于要访问网络数据，因此咱们须要开启一个AsyncTask的一部任务，咱们来看看onPostExecute方法，在获取到服务器端的Html文本内容后，咱们经过Android提供的Html.fromHtml方法能够处理咱们的Html文本，将Html的标签转化为咱们须要的样式显示，可是这里要注意一点，这里并不会处理全部的Html的表情，例如<img>咱们来看看Android官方API对这个方法的描述：

public static Spanned fromHtml (String source)

Returns displayable styled text from the provided HTML string. Any <img> tags in the HTML will display as a generic replacement image which your program can then go through and replace with real images.

This uses TagSoup to handle real HTML, including all of the brokenness found in the wild.

若是文本当中有<img>标签，那么这个方法就会用一个默认的图片来代替咱们的<img>标签中的图片，咱们能够本身写一个Html.ImageGetter来加载咱们本身想要的图片。

同时，由于文本内容中可能有href连接，所以咱们能够经过 textView.setMovementMethod(new LinkMovementMethod()); 来绑定一个LinkMovementMethod，这样在点击连接的时候，就会调用浏览器跳转到该连接上。

相信经过前面的讲解，你们对ScrollView有了进一步的认识，这里并无讲太多的HorizontalScrollView的知识，由于这个实际上是和ScrollView基本上是同样的，只不过一个是垂直方向的滚动，而HorizontalScrollView是水平方向的滚动，一样HorizontalScrollView也是一个FrameLayout，所以咱们一般给其定义一个水平方向布局的LinearLayout子元素，这样咱们在里面添加的View子控件就能够在水平方向上滚动显示了。

 

3、总结

本篇随笔主要讲解了一下ScrollView和HorizontalScrollView的知识，由于这两个布局容器比较简单，所以基本上概念性的东西讲的少，主要仍是经过代码来了解了ScrollView的使用方式，而对于HorizontalScrollView，其使用方式大同小异，你们能够经过Android官方API来了解更多有关这两个控件的知识。