美文网首页Android 开发
Android 入门(3)-ui应用实战(1)

Android 入门(3)-ui应用实战(1)

作者: 正经龙 | 来源:发表于2018-08-30 12:18 被阅读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);
        }
    
    1. 在上面我们实现了View.OnClickListener接口,并自定义了一个EditText类型的editText用于获取EditText的引用
    2. 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:
            }
        }
    
    1. onCreate函数中我们利用setOnClickListener(this)调用了点击事件,在onClick函数中我们可以通过v.getId()来获取调用此函数的View控件。
    2. 是不是又看到了熟悉的老朋友?没错,我们在之前已经获取到了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共有三种表现形式,分别是

    1. visible(可见)
    2. invisible(透明但占用原来大小)
    3. 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%

    相关文章

      网友评论

        本文标题:Android 入门(3)-ui应用实战(1)

        本文链接:https://www.haomeiwen.com/subject/palrwftx.html