欢迎回来,本期继续学习一些Android的基本组件。在前几期教程中出现了TextView、ImageView这些组件,那么本期将对它们做介绍。

本期学习内容:TextView、Button、ImageView、EditText以及用代码控制组件。

代码控制组件部分将在第一个组件TextView中讲解,后续不再介绍。

1.TextView

首先来学习TextView文本框。还是老规矩,先看属性有哪些。这边只会介绍一些常用属性,更多属性可以日后发掘。

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textColor="#3a9fff"
        android:textSize="20sp"
        android:gravity="center"
        android:lines="2"
        android:shadowColor="#000"
        android:shadowDx="1"
        android:shadowDy="1"
        android:background="#000"/>

从上述代码可以发现,它有许多常用属性,下面来逐个介绍。

text 文本框的内容

textColor 文本颜色

textSize 文本大小 建议使用sp作为单位 但px也行

gravity 还记得它有什么用嘛?内容的对齐方式

lines 行数 你可以为它指定行数,此时若高度为wrap_content,将会自动留出指定行数的空间。

shadowColor 文本阴影颜色

shadowDx/y 文本阴影x/y轴偏移 (注意:此参数无需单位)

background 背景颜色

那么这就是TextView的一些基本属性啦,下面来看看怎么用代码来获取一个组件呢?

还记得上一节学习的ID吗(#4 Android入门教程 – RelativeLayout – LovelyCat的小站),若要获取一个组件,最基本的方式是通过ID来获取,下面来试一试吧。

我将上述TextView的ID值设置为了@+id/mytextview,回到MainActivity.java。(注:mytextview是可以自己定义的,但不建议使用重复命名)

这边再补充说明一下,要获取组件只能在组件所在布局文件对应的地方获取。那什么意思呢?来看MainActivity.java的代码。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        System.out.println("Hello World");
    }

可以看到一行setContentView(R.layout.activity_main); 这一行是给我们的MainActivity设置布局,也就是让它能显示出来。当然这个布局还可以换成你想要的。这时候你在MainActivity里用ID寻找组件,就会在你一开始指定的布局中寻找,若在布局找不到对应组件,会抛出Exception。

每一个组件的名称就是一个类名,所以…

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        System.out.println("Hello World");

        TextView textView = findViewById(R.id.mytextview);
    }

只需要像这样,就可以获取一个组件类。findViewById是View自带的方法,这边主类继承了AppCompatActivity,也就可以直接使用它。

获取到了之后,我们可以使用textView.set*****();来用代码设置它的属性,做到动态更新。同时也可以利用getText()获取其内容。那么TextView就到这里,顺带讲了如何获取组件。

2.Button

说完TextView,接着来看看Button是怎么用的。

 <Button
        android:id="@+id/mybutton"
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="140dp"
        android:layout_height="40dp"
        android:background="#3a9fff"
        android:text="LovelyCat"
        android:textColor="#fff"
        android:textSize="18sp"/>

它和TextView一样,都拥有字体颜色、字体大小、文本内容等属性。最重要的是它的点击事件,回到主类中,上面的在TextView中学习了如何获取一个组件,自己也来尝试一下吧。

最常用的有点击事件、长按事件、触摸事件三种。下面是它们的设置方式:

         button.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                // To do
                return false;
            }
        });
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // To do
            }
        });
        button.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                // To do
                return false;
            }
        });

都使用了View下的接口,在接口中可以写你想要的代码。这边就不再演示了,自己尝试写一写然后编译运行吧。

3.ImageView

顾名思义,就是一个图片框嘛。它的常用属性有两个,一个是 src 一个是scaleType。

  • src 图片路径
  • background 背景颜色
  • foreground 前景颜色
  • scaleType 有许多固定值,分别作用效果如下
  • matrix:用矩阵的方式绘制,从ImageView的左上角开始绘制原图,不缩放图片, 超过ImageView部分作裁剪处理;
  • center:保持原图的大小,显示在ImageView的中心。当原图的尺寸大于ImageView的尺寸,超过部分裁剪处理;
  • centerCrop:保持横纵比缩放图片,直到完全覆盖ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理;
  • centerInside:保持横纵比缩放图片,直到完全覆盖ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理;
  • fitXY:把原图宽高进行不保持原比例放缩,直到填充满ImageView为止;
  • fitStart:把原图按比例放缩使之等于ImageView的宽高,缩放完成后将图片放在ImageView的左上角;
  • fitCenter:把原图按比例放缩使之等于ImageView的宽高使之居中显示,缩放后放于中间;
  • fitEnd:把原图按比例放缩到ImageView的宽高,缩放完成后将图片放在ImageView的右下角。

同样这些属性也可以使用代码进行修改:ImageView.setScaleType(ImageView.ScaleType.***);

这是一个简单的例子:

<ImageView
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"/>

4.EditText

现在进入本节学习的最后一个组件EditText。顾名思义,就是一个可编辑的文本框嘛。

 <EditText
        android:layout_marginTop="20dp"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:hint="请输入密码"
        android:textSize="15sp" />

以上是它最基本的用法,他和TextView一样,拥有Text的属性。hint是提示内容,在这个编辑框还没有内容之前显示。那么编辑框还有最大长度限制、行数、输入方式等属性。这边在网上找到两张表格图,可以自己参考一下。

给它添加android:drawableStart / android:drawableStartLeft,可以做到这种效果:

当然它的下划线的样式也是可以改的,使用android:drawableBottom即可。要改变它的样式方法有很多,也可以通过创建shape.xml赋值到它的background也能达到同样的效果,这边就不展开讲shape了。


到这里四个常用组件的学习就结束啦,下面放一小段代码,作为演示,你也可以尝试自己制作一个。

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <EditText
            android:layout_marginTop="20dp"
            android:layout_gravity="center"
            android:layout_width="200dp"
            android:layout_height="40dp"
            android:hint="请输入账号"
            android:textSize="15sp"
            android:drawableStart="@drawable/ic_action_name" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <EditText
                android:layout_centerInParent="true"
                android:id="@+id/edittext2"
                android:layout_width="200dp"
                android:layout_height="40dp"
                android:hint="请输入密码"
                android:textSize="15sp"
                android:drawableStart="@drawable/ic_action_name" />
            <Button
                android:layout_toEndOf="@id/edittext2"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:text="×"
                android:textSize="24sp"
                android:background="#3a9fff"
                android:textColor="#fff"/>
        </RelativeLayout>
        <Button
            android:layout_gravity="center"
            android:layout_width="120dp"
            android:layout_height="30dp"
            android:text="登录"
            android:textColor="#fff"
            android:background="#3a9fff" />
    </LinearLayout>

上述布局综合了以前所学的知识,要做到这种布局的方法不只有一种,重在自己的理解与想法吧。

那么本期教程就到此介绍啦,下期再见。


0 条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注