Android 入门（3）－ui应用实战(1)

2018-08-30 本文已影响0人正经龙

实战（一）即时获取EditText内容

首先，创建好一个任意的安卓项目，活动自己生成就行了，然后打开自带的layout的xml文件

布局更改为LinearLayout,创建如下布局

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

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="please input something" />
    <Button
        android:id="@+id/get_edit_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="get Edit String"
        />

</LinearLayout>

效果如下

屏幕快照 2018-08-30 10.57.16.png

android:hint用于在编辑框产生初始的提示内容，可以提示用户输入信息。

我们发现我们的button上的字体全都是大写，这里可以利用android:textAllCaps:"false"来将默认大写关闭掉
我们回到创建的项目的初始JAVA文件，因为要实现按钮点击时间，这次我们采用实现接口的形式来实现点击事件。

public class HelloWorld extends AppCompatActivity implements View.OnClickListener {
    private EditText editText;     //用于获取editText的引用

    private static final String TAG = "HelloWorld";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_hello_world);
        Button button1 = (Button)findViewById(R.id.get_text_button);
        editText = (EditText)findViewById(R.id.edit_text);
        button1.setOnClickListener(this);
    }

在上面我们实现了View.OnClickListener接口，并自定义了一个EditText类型的editText用于获取EditText的引用

在OnCreate函数中利用findViewById获取引用

接下来我们实现鼠标点击事件，由于是实现了View.OnClickListener接口，所以我们需要重写onClick函数

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.get_text_button:
                String data = editText.getText().toString();
                Toast.makeText(HelloWorld.this,data,Toast.LENGTH_SHORT).show();
                break;
            default:
        }
    }

在onCreate函数中我们利用setOnClickListener（this）调用了点击事件，在onClick函数中我们可以通过v.getId()来获取调用此函数的View控件。
是不是又看到了熟悉的老朋友？没错，我们在之前已经获取到了editText的引用，我们就可以通过getText().toString()将它转化为我们可以使用的String 啦，然后我们使用提示框将其显示出来，是不是很简单呢？

运行试试

鼠标点击显示编辑框内容

实现了第一个ui练习内容啦～我们再接再厉！看下一个！

实战（2）鼠标点击切换图片

在开发中，我们时常会碰到要即使改变图片的情况，这对于我们Android 来说根本不是难事，接下来我们就来实际操作一下吧！

首先，我们要做的前期准备当然就是准备两张自己喜欢的图片啦！
然后把图片放到文件夹drawable-xhdpi中

加入图片

然后在布局文件中加入我们的新朋友ImageView,顺便添加一个button用于之后的图片切换！

    <ImageView
        android:id="@+id/image_view"
        android:src="@drawable/img_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/get_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="change the map"/>

当前界面如下

修改HelloWorld.java文件
添加私有成员变量用于获取imageView引用

    private ImageView imageView;

同样获取引用并添加点击事件

        imageView = (ImageView)findViewById(R.id.image_view);
        Button button2 = (Button)findViewById(R.id.get_image);
        button2.setOnClickListener(this);

添加点击事件，利用setImageResource修改图片路径，就可以实现点击切换图片啦～

点击之前

点击后

实战（三）ProgressBar进度条的使用

实现点击按钮显示进度条与隐藏进度条

还是老样子，先添加布局文件，设置id

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

添加点击事件，这里需要引入一个知识点啦！！敲黑板！

ProgessBar共有三种表现形式，分别是

visible(可见）

invisible（透明但占用原来大小）

gone（消失）

我们使用setVisible来更换当前表现形式

接下来就轻车熟路啦，添加一个Button，设置点击事件，然后添加私有变量获取引用，最后通过点击事件更改当前状态～～

添加按钮

    <Button
        android:id="@+id/change_visible"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Change"/>

添加成员变量

 private ProgressBar progressBar;

鼠标点击事件

            case R.id.change_visible:
                if(progressBar.getVisibility()==View.GONE)
                    progressBar.setVisibility(View.VISIBLE);
                else
                    progressBar.setVisibility(View.GONE);

点击前

点击修改按钮，圆形进度条消失

点击后

实现线性进度条

修改布局文件，添加两个新属性style="?android:attr/ProfressStyleHorziatal" 与 android:max

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"    //指定为水平进度条
        android:max="100"/>                     //指定最大数

修改按钮点击事件

进度条当前进度是通过ProgressBar.getProgress()来获取的
通过获取这个数值，再通过SetProgressBar就可以修改当前进度条的大小

            case R.id.change_visible:
                int myprogress = progressBar.getProgress();
                myprogress = myprogress + 10;      //每点击一次进度条加10
                progressBar.setProgress(myprogress);
                break;

运行程序

未点击

点击四次显示40%