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來了解更多有關這兩個控件的知識。