第三个项目——新闻阅读器

实验目的

• 掌握Android Studio集成开发环境的基本用法；

• 了解Android工程基本结构；

• 了解Activity的创建及布局资源的基本使用；

• 了解Activity生命周期及其不同状态；

实验要求

• 了解Android Studio中工程的创建方法；

• 了解如何向Android工程添加Activity；

• 了解AndroidManifest.xml文件的基本结构及配置；

• 了解样式Style基本用法；

实验内容

步骤一，新建工程

打开Android Studio新建一个名为Code03的工程，选择Empty Activity模板。

步骤二，修改activity_main.xml布局

1.1 将activity_main.xml根元素由ConstraintLayout改为RelativeLayout。

1.2 在原有TextView控件标签上方，添加2个新的TextView控件标签，用于显示新闻的标题及副标题，代码如下所示。

...
    <TextView
        android:id="@+id/article_title"
        android:text="Article Title"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:textSize="24sp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/article_subheading"
        android:text="Article Subheading"
        android:textSize="16sp"
        android:textStyle="bold"
        android:textColor="@color/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_title"
        android:padding="10dp"/>

      <TextView
        android:id="@+id/article_text"
        android:text="Hello World!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/article_subheading"
        />
...

1.3 将布局中的三个TextView的android:text属性的值抽取为字符串资源。将鼠标放在该属性值上，使用【Alt+Enter】快捷键，在弹出的快捷菜单中选择Extract string resource，将该属性值抽取为字符串资源。抽取出的字符串资源在res/values/strings.xml文件中可查看到，代码如下所示。

<resources>
    <string name="app_name">Code03</string>
    <string name="article_title">Article Title</string>
    <string name="article_subtitle">Article Subtitle</string>
    <string name="article_text">Article Text</string>
</resources>

1.4 将布局中三个TextView的其他属性抽取为style。style抽取完成后res/values/styles.xml文件，代码如下所示。

...
    <style name="ArticleTitle">
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">24sp</item>
        <item name="android:padding">@dimen/padding_regular</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="ArticleSubtitle">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/colorPrimary</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_below">@id/article_title</item>
        <item name="android:padding">@dimen/padding_regular</item>
    </style>

    <style name="ArticleText">
        <item name="android:lineSpacingExtra">5sp</item>
        <item name="android:padding">@dimen/padding_regular</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
...

此时activity_main.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_title"
        android:text="@string/article_title"
        style="@style/ArticleTitle" />
    <TextView
        android:id="@+id/article_subtitle"
        android:text="@string/article_subtitle"
        android:layout_below="@id/article_title"
        style="@style/ArticleSubtitle" />
    <TextView
        android:id="@+id/article_text"
        android:text="@string/article_text"
        android:layout_below="@id/article_subtitle"
        style="@style/ArticleText" />
</RelativeLayout>

1.5 为了显示新闻内容，在res/values/strings.xml文件中对ArticleTitle、ArticleSubtitle、ArticleText三个字符串资源进行替换，在本项目中，ArticleText字符串资源是从网上摘取的新闻内容，你可以使用自己的内容进行代替，只要其内容足够长，使得App运行时，屏幕无法容纳该内容即可，替换后的strings.xml文件代码如下所示。

<resources>
    <string name="app_name">Code03</string>
    <string name="article_title">Everything is made of something</string>
    <string name="article_subtitle">By Ajay Dasgupta</string>
    <string name="article_text">
        How do you make tea? Simple, put a teaspoon of tea into a boiling 
        cup of water. Strain the water, pour some milk and sugar to taste
        and the tea is ready! Interestingly, everything that we prepare has
        a recipe and is made up of simpler ingredients.
        \n\nFor example, what is sugar made of? It is made of sugar
        molecules, which in turn, are made up of atoms. The atom is the 
        building block of all substances.
        \n\nThe concept of the atom was first introduced by the Greek 
        philosophers Democritus and Leucippus around 450-420 B.C. 
        The word \'atom\' comes from a Greek word that means \'indivisible\'.
         Infact, until recently, the atom was considered to be indivisible.
        \n\n<b><i>How small is an atom?</i></b>
        \n\nAtoms are very tiny, with diameters like one 
        ten-thousand-millionth of a metre. So, approximately 50,000,000 
        atoms of solid matter like iron,  lined up in a row, would measure 
        one centimetre (0.4 inch).
         \n\nHowever, Carl Sagan in his book Cosmos says that if you
         cut an apple-pie into equal halves and further divide each half
         into smaller and smaller pieces, in about 90 cuts you will reach
         a single atom. But, there is no knife that can cut so fine. 
         And the apple-pie would become invisible to the human eye in 
         about 20 cuts.
        \n\n<b><i>How do atoms create other substances?</i></b>
        \n\nTwo or more atoms join together to form a molecule. 
        The molecule is the smallest part of a substance known as a
        compound. For example, when two atoms of oxygen combine
        with one atom of carbon, it forms carbon dioxide gas.
        \n\nThese compounds group together to form bigger
        complex substances.
        \n\n<b><i>What are atoms made of?</i></b>
        \n\nIs there a recipe for the atom? Yes! As with every other
        thing, even the atom is composed of smaller particles.
        These particles are called neutrons,  protons and electrons. 
        They are necessary ingredients to make an atom.
        \n\nScientists have also found substances which make up
        electrons and protons. So we have a recipe for electrons and
        protons as well.
        \n\nEverything around us is actually made out of something
        else, in an unending chain of ingredients and recipes.
    </string>
</resources>

步骤三，编译、部署APK

编译、部署APK，在AVD虚拟机中的运行效果如图1. 通过AVD虚拟机运行Code03所示。可以看到显示的新闻正文超出了屏幕的范围，但你无法通过上下滑动查看其完整内容。

图1. 通过AVD虚拟机运行Code03

步骤四，修改activity_main.xml布局

4.1 对于使用TextView控件显示的文本，如果超出了屏幕范围无法显示完整。为解决这个问题，我们需要使用ScrollView容器控件。ScrollView可提供滑动操作，对该容器中的子控件（ScrollView只能包含1个子控件）提供滑动操作对查看控件的内容。

4.2 在activity_main.xml文件中加入一个ScrollView控件，使该控件包裹住id为article_subtitle及article_text两个TextView控件。由于ScrollView容器控件只能包含一个子控件，因此我们还需要LinearLayout布局控件将两个TextView控件包裹住。

4.3 LinearLayout布局控件设置的android:orientation属性为vertical。此外，删除掉两个TextView控件的android:layout_below属性。修改后的布局文件代码如下所示。

<?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_title"
        android:text="@string/article_title"
        style="@style/ArticleTitle" />

    <ScrollView
        android:layout_below="@id/article_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/article_subtitle"
                android:text="@string/article_subtitle"
                style="@style/ArticleSubtitle" />
            <TextView
                android:id="@+id/article_text"
                android:text="@string/article_text"
                style="@style/ArticleText" />
       </LinearLayout>
    </ScrollView>
</RelativeLayout>

4.4 重新编译、部署APK，在AVD虚拟机运行的效果，你可以上下滑动查看新闻的所有正文。

实验小结

通过本次实验，你应该掌握了如下知识内容：

• 使用RelativeLayout（相对布局）进行布局管理；

• 使用ScrollView进行布局管理；

• 使用TextView进行长文本显示及格式设置；