0 讲作业

我昨天漏讲了加网络权限（视频里的没问题），唉，人真是老了。你想呀，一个「小淘宝」肯定是要网络权限的呀，现在我们就把昨天图文教程缺的补上，给「小淘宝」添加网络权限。打开 「AndroidManifest.xml 」，加入「uses-permission」节点：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.github.uitest">

    <!-- 在这里声明权限 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

动图演示：

至于把「小淘宝」改成「QQ空间」，就是把网址改成 QQ 空间的网址「https://i.qq.com」即可。

TIPS：WebView 只可以打开以「http://」或「https://」开头的网址，比如「www.baidu.com」必须写成「https://www.baidu.com」。

动图演示：

1 EditText 输入框

1x1 XML 属性

Edit 是编辑的意思，Text 是文本的意思。这玩意看起来很眼熟有没有，呃....好像并没有。EditText 是 TextView 的子类，用于输入和修改文本的一个控件。定义 EditText 时，必须指定TextView_inputType属性。例如，对于纯文本输入将inputType设置为“text”，以下是典型布局代码：

<EditText
     android:id="@+id/plain_text_input"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:inputType="text"/>

• inputType 输入类型

这里有个新面孔，就是上面提到的「inputType」属性。「input」是输入的意思，「Type」是类型的意思，合起来字面意思就是输入类型。来看个例子：

输入密码时输入框是看不到文字的，只有一堆点点；再譬如某些情况下只能输入数字，这都是「inputType」的功劳。「inputType」可配置显示的键盘类型，可接受的字符类型以及编辑文本的外观。例如，如果您想请求用户输入密码，则可以将inputType设置为「textPassword」，这样输入的字符就显示为小点点。说白了，你没啥特殊要求 「inputType」的值就写「text」，要是输入普通的密码就写「textPassword」，要是输入只有数字的密码就写「numericPassword」。

Google 的 API 上要求是必须定义「inputType」，但是实际开发时不定义也不会有问题，就相当于「text」。但还是建议按照 API 文档上说的定义一下比较好。

• imeOptions 输入法编辑器选项

还有一个值得关注的属性：在浏览器地址栏输入文本时，输入法右下角是搜索：

在发微信时，输入法右下角是回车：

输入法右下角的样式就是「imeOptions」属性控制的。「ime」英文全称「Input Method Editors」，「Input Method」是输入法的意思，「Editors」是编辑器的意思，「Options」是选项的意思，「imeOptions」合起来就是「输入法编辑器选项」的意思。这个属性的值的键盘右下角的字的对应关系是：

TIPS: 使用android:imeOptions属性的时候，一定要对EditText设置 android:inputType 或者 设置 android:singleline=”true”。

我们新建一个项目叫 「EdItTextTest」 包名写 「edittext.test」，其余默认，添加三个带有不同属性的 EditText ，要注意的是用 AndroidStudio 的朋友需要先在布局里嵌套一个 ，详情见演示：

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="普通的 EditText"
        android:imeOptions="actionNone"
        android:inputType="text"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionNext"
        android:inputType="text"
        android:text="输入法是下一个的EditText" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:imeOptions="actionGo"
        android:inputType="textPassword"
        android:text="输入形式是密码的EditText"/>

</LinearLayout>

运行后就这效果：

演示视频，这次我特意把文字调大了：

【此处e.mp4】

1x2 Java 代码

只有布局那就是个空壳，这里介绍几种常见的 EditText 的用法。还是在案例中学习，我们这次设计一个程序，界面上有一个输入框「EditText」，一个文本「TextView」，最后实现在输入框「EditText」输入文字，同步显示在文本里。那么来想一想布局，就上面放一个 TextView 下面放一个 EditText：

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="50sp"
        android:text="在下方输入文字，这里将会显示相同的内容"
        android:id="@+id/textview"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edittext"
        android:imeOptions="actionGo"
        android:text="请输入文字，上方将会出现相同的文字"/>

</LinearLayout>

这里定义了一个 TextView ，文字大小为 「50sp」 ，文字为「在下方输入文字，这里将会显示相同的内容」，id为「textview」，都是我们比较熟悉的属性。接着又定义了一个 EditText ，文字为「请输入文字，上方将会出现相同的文字」，id 为「edittext」。然后想一想要实现什么样的逻辑，首先因为我们的 EditText 里有文字，还不少，用户想输入自己的还得一个个把我们写的删掉，所以我们需要在点击 EditText 时就清空里面的文字，另外由于上面的 TextView 应该是和下面的 EditText 里的文字同步的，所以 TextView 里的文字也要一并清空。然后需要在 EditText 里的文字改变时获取到里面输入的内容，然后把文字显示到 TextView 上。这时我们需要一个新的监听器「TextWatcher」，「Text」是文字的意思，「watcher」是观察者的意思，合起来就是「文字观察者」，很形象是不是？对于 EditText ，他的语法如下：

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //在文字改变之前执行
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //在文字改变时执行
            }

            @Override
            public void afterTextChanged(Editable editable) {
                //在文字改变之后执行
            }
        });

看起来有点小复杂，我们先要调用 EditText 对象的 「addTextChangedListener」方法，这里需要传入一个「TextWatcher」对象。然后我们在「TextWatcher」里重写「beforeTextChanged」，「onTextChanged」，「afterTextChanged」三个方法，然后在里面分别实现我们需要的逻辑。我们这里需要在文字改变时也改变 TextView 里的文字。系统会在文字改变时调用「onTextChanged」方法，并且传入参数，其中改变的文字就藏在第一个 「CharSequence」 对象里，我们调用「CharSequence」的「toString」方法就可以获取到改变后的文字。然后调用 TextView 的 「setText」方法，把文字显示到 TextView 上。依照这个思路，修改 MainActivity.java :

public class MainActivity extends AppCompatActivity {

    EditText editText;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        editText = (EditText) findViewById(R.id.edittext);
        textView = (TextView) findViewById(R.id.textview);
        editText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                textView.setText("");
                editText.setText("");
            }
        });
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                textView.setText(charSequence.toString());
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });
    }
}

老例子，双开发工具演示视频：

【此处两个视频】

3 总结

今天我们又学会了一个新的重要的控件——EditText ，收获满满，作业又来了，设计一个程序，做一个简易的计算器，实现两数相加，提示：两个输入框，一个按钮，一个文本。好啦，祝每个人都能实现梦想。

2020/5/24 注：
这是我 2018 年高中毕业的假期写的，当时并没有自己搭建博客，近期我给这一系列的文章都放到我自己的博客上。
当时写这个系列文章的想法就是扎实下基础，然后能帮到更多的人就更好了，但是大学开学之后就开始了新生活，没有大块的时间去编撰，系列文章也没有再更新过。但是我其实并不想放弃这个系列，那就，有缘再见吧，拜拜ヾ(•ω•`)o