【Android基础 1.3】Text and scrolling views

本次codelab

前几次的 codelab 都比较简单，都是基于 Layout Editor 的，控件拖来拖去，没啥好讲的。那么这次的主要内容的是 TextView 和 ScrollView。

ScrollView 提供了一个可以滚动的视图，它是 FrameLayout 的子类。ScrollView 只能有一个子 View，当然这个子 View 它本身可以是 ViewGroup（比如 LinearLayout）可以包含很多UI控件。

复杂的视图结构可能造成性能的降低。在 ScrollView 中 放一个垂直布局的 LinearLayout 是个不错的选择。在一个ScrollView 中所有的 UI 控件都会被加载到内存中，即使它们没有显示出来，这使得 ScrollView 可以流畅的滚动视图。但是，这也造成了 ScrollView 可能会使用很多内存，这会影响 app 的性能。如果想要显示很长的列表，并且是可编辑，可删除的，那么你可以考虑 RecyclerView。

接下来的内容：

• 使用 XML 添加多个 TextView
• 显示 HTML 格式的文本
• 在文本中插入网页连接

显示 HTML 格式的文本

• TextView 会解析支持的 HTML 标签（<br></br>，<i></i>），其他的标签都会被忽略，这两个只是对文本的加粗和斜体，功能比较少。

• \n表示换行

• 加粗和斜体可以一起使用：<b><i>...words...</i></b>

• 如果要使用 ‘ 和 “ 符号，必须进行转义，其他非 ASCII 字符也需要转义。

插入链接

在 TextView 中添加android:autoLink="web"，这样便可以自动识别文本中的链接，并且进行高亮处理，点击可以调转到浏览器。

Solution Code

完成 Task 1 和 Task 2 后的 XML：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:id="@+id/article_heading"
            android:layout_width="match_parent"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white"
            android:padding="@dimen/text_padding"
            android:text="@string/article_title"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
            android:textStyle="bold"
            android:layout_height="wrap_content"/>

    <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/article_heading">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

            <TextView
                    android:id="@+id/article_subheading"
                    android:layout_width="wrap_parent"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/text_padding"
                    android:text="@string/article_subtitle"
                    android:textAppearance=
                            "@android:style/TextAppearance.DeviceDefault"/>

            <TextView
                    android:id="@+id/article"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:lineSpacingExtra="5sp"
                    android:padding="@dimen/text_padding"
                    android:autoLink="web"
                    android:text="@string/article_text"/>
        </LinearLayout>

    </ScrollView>

</RelativeLayout>

Homework

Question 1

How many views can you use within a ScrollView? Choose one:

• One view or one view group

Question 2

Which XML attribute do you use in a LinearLayout to show views side by side? Choose one:

• android:orientation="horizontal"

Question 3

Which XML attribute do you use to define the width of the LinearLayout inside the scrolling view? Choose one:

• android:layout_width="match_parent"

Solution

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

    <TextView
            android:id="@+id/article_heading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white"
            android:padding="@dimen/text_padding"
            android:layout_margin="16dp"
            android:text="@string/article_title"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
            android:textStyle="bold"/>

    <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/article_heading">

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

            <TextView
                    android:id="@+id/article_subheading"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/text_padding"
                    android:text="@string/article_subtitle"
                    android:textAppearance=
                            "@android:style/TextAppearance.DeviceDefault"/>

            <TextView
                    android:id="@+id/article"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:lineSpacingExtra="5sp"
                    android:padding="@dimen/text_padding"
                    android:autoLink="web"
                    android:text="@string/article_text"/>
        </LinearLayout>

    </ScrollView>

</RelativeLayout>