总结:见名知意
TextView:
Button:
EditView:
ImageView:
ProgressBar:
ProgressDialog和AlertDialog有些类似,都可以再界面弹出对话框,都能够屏蔽其他控件的交互能力,用法也类似。
我们还发现ProgressDialog和AlertDialog不用在activity_layout.xml布局文件中写入,直接在MainActivity代码中通过按钮点击事件调用就行。
详细步骤:
首先新建项目UIWidgetTest项目。假如活动及其对应布局已经创建完毕。
- TestView
主要用来在界面显示一段文本信息。类似于显示“Hello world!”。
修改activity_main.xml中的代码,如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.uiwidgettest.MainActivity"> <TextViewandroid:id="@+id/text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="This is TextView"android:gravity="center"android:textSize="24sp"android:textColor="#00ff00"/>
</LinearLayout>
我们仅仅增加一个TextView控件,还有制定了它的属性。wrap_content表示由控件内容决定控件大小。android:gravity表示来指定文字的对齐方式。
- Button
我们先不管外面LinearLayout,修改activity_main.xml文件,来增加一个Button。代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="This is TextView"android:gravity="center"android:textSize="24sp"android:textColor="#00ff00"/><Buttonandroid:id="@+id/button"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button" android:textAllCaps="false"/>//注意这里Button不完全都是大写,但是运行之后会自动转换为大写,我们要改变这种默认。</LinearLayout>
我们可以运行一下。
发现有问题,后面的Button并没有显示出来,这是因为外面的LinearLayout通过android:orientation指定了排列方式,默认情况为horizontal,我们需要指定为为vertical。及如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="This is TextView"android:gravity="center"android:textSize="24sp"android:textColor="#00ff00"/> <Buttonandroid:id="@+id/button"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button" /></LinearLayout>
接下来,我们在MainActivity中为Button的点击事件注册一个监听器,代码如下:
package com.example.uiwidgettest;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button = (Button)findViewById(R.id.button);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//逻辑语句}});}
}
- EditText
程序和用户进行交互,允许用户在控件里输入和编辑内容,并可以在程序中对这些内容进行处理。
同样修改activity_main.xml文件,来增加一个EditText控件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/text_view"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="This is TextView"android:gravity="center"android:textSize="24sp"android:textColor="#00ff00"/><Buttonandroid:id="@+id/button_1"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button1"android:textAllCaps="false"/><EditTextandroid:id="@+id/edit_text"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="Type something here"android:maxLines="2"/></LinearLayout>
然后我们可以在输入框内显示一些提示性文字,一旦用户输入了任何内容,提示性文字又会消失。其实我们只要给EditText指定一个android:hint 属性就行了。
然后呢,运行之后,我们发现可以在EditView内容输入无限多内容,界面会不好看,我们又可以通过android:maxLines属性来解决这个问题。定义好这个属性我们发现当输入的文本超过两行,文本会自动向上翻。
紧接着,我们可以结合EditText与Button完成一些功能,比如通过点击按钮来获取EditText里面输入的内容。
修改MainActivity里面的内容,代码如下:
package com.example.uiwidgettest;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button = (Button)findViewById(R.id.button);editText = (EditText)findViewById(R.id.edit_text);button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button:String inputText = editText.getText().toString();Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();break;default:break;}}});}
}
首先通过findViewById()获取EditText的实例,然后在按钮的点击事件里调用EditText的getText()方法来获取输入的内容。再调用toString()方法转化为字符串。最后还是使用Toast显示出来。
- ImageView
这是一个用来显示图片的控件,我们知道图片通常放在”drawable”开头的目录下,我们发现有很多drawable开头的目录,我们选一个drawable-xhdpi的目录,将选好的图片img_1.png和img_2.png放入这个目录中。
修改main_activity,也就是来说添加一个ImageView控件添加代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">........ <ImageViewandroid:id="@+id/image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/img_1" /></LinearLayout>
我们发现有个android:src属性,我想大概是图片的来源吧,但是我们明明把图片放在了drawable-xhdpi目录下,为什么却写的是drawable目录呢?
另外,我们可以通过代码动态地更改ImageView中的图片,修改MainActivity的代码,如下:
package com.example.uiwidgettest;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义 private ImageView imageView;//@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button_1 = (Button)findViewById(R.id.button_1);Button button_2 = (Button)findViewById(R.id.button_2);editText = (EditText)findViewById(R.id.edit_text);imageView = (ImageView)findViewById(R.id.image_view);button_1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_1:String inputText = editText.getText().toString();Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();break;default:break;}}});button_2.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_2:imageView.setImageResource(R.drawable.img_2);break;default:break;}}});}
}
我们可以再添加一个Button2,来监听ImageView,点击Button2时,我们可以从Img_1调转到Img_2。
这里需要注意,添加Button2,我们需要再写一个监听器。在按钮的监听事件中,我们通过调用ImageView的setImageResourece()方法将显示的图片改成Img_2。
- ProgessBar
这个用于在界面上显示一个进度条,表示我们正在加载一些数据,我们可以修改activity_main中的代码,添加一个ProgessBar,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">.......<Buttonandroid:id="@+id/button_2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button2"android:textAllCaps="false"/>........ <ProgressBarandroid:id="@+id/progress_bar"android:layout_width="match_parent"android:layout_height="wrap_content" />
</LinearLayout>
运行完程序之后,我们发现一直有个圆形进度条正在选装,那么如何让进度条在加载完数据后消失呢,我们就学习一个新的属性:
Android控件的可见属性。
可以通过android:visibility进行指定,可选值有3种:visible,invisible和gone。visible是表示控件可见的,这个是默认值。invisible表示控件不可见,但它仍然占据着原来的位置和大小,就是透明状态。gone则表示控件不仅不可见,而且不占用任何屏幕空间。
我们通过代码来设置控件的可见性,使用的是setVisibility()方法,可以传入View.VISIBLE、View.INVISIBLE和View.GONE这3种值,接下来我们尝试实现,点击按钮让进度条消失,这里我们再添加一个Button3(在activity_main里面添加即可)。
修改MainActivity种的代码,如下
package com.example.uiwidgettest;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义private ImageView imageView;private ProgressBar progressBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button_1 = (Button)findViewById(R.id.button_1);Button button_2 = (Button)findViewById(R.id.button_2);Button button_3 = (Button)findViewById(R.id.button_3);editText = (EditText)findViewById(R.id.edit_text);imageView = (ImageView)findViewById(R.id.image_view);progressBar = (ProgressBar)findViewById(R.id.progress_bar);button_1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_1:String inputText = editText.getText().toString();Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();break;default:break;}}});button_2.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_2:imageView.setImageResource(R.drawable.img_2);break;default:break;}}});button_3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_3:if(progressBar.getVisibility() == view.GONE){progressBar.setVisibility(View.VISIBLE);}else{progressBar.setVisibility(View.GONE);}break;default:break;}}});}
}
我们通过getVisibility()来判断ProgressBar是否可见,如何可见,就隐形,不可见,就显示出来。这样我们通过不断点击Button3让进度条在显示和隐藏来回切换。
另外,我们可以给ProgressBar指定不同样式,可以是圆形进度条,通过style属性可以将它指定成水平进度条,修改activity_main.xml的代码,如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent">..........<Buttonandroid:id="@+id/button_3"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button3"android:textAllCaps="false"/><ProgressBarandroid:id="@+id/progress_bar"android:layout_width="match_parent"android:layout_height="wrap_content"style="?android:attr/progressBarStyleHorizontal"android:max = "100"/></LinearLayout>
在指定为水平进度条后,我们还可以通过android:max属性给进度条设置一个最大值,然后在代码中动态的更改进度条的进度。修改MainActivity中的代码,如下:
package com.example.uiwidgettest;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义private ImageView imageView;private ProgressBar progressBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button_1 = (Button)findViewById(R.id.button_1);Button button_2 = (Button)findViewById(R.id.button_2);Button button_3 = (Button)findViewById(R.id.button_3);editText = (EditText)findViewById(R.id.edit_text);imageView = (ImageView)findViewById(R.id.image_view);progressBar = (ProgressBar)findViewById(R.id.progress_bar);........button_3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_3:int progress = progressBar.getProgress();progress = progress + 10;progressBar.setProgress(progress);break;default:break;}}});}
}
这样呢,每点一次按钮,我们都会获取进度条的当前进度,然后在现有的进度条上加10作为更新后的进度。
ParogressBar还有其他几种样式,可以试试。
- AlertDialog
AlertDialog可以在当前界面弹出一个对话框,这个对话框是位于所有界面元素之上的,能够屏蔽其他控件的交互能力。
修改MainActivity中的代码,(我们可以再添加一个Button4)如下:
package com.example.uiwidgettest;import android.content.DialogInterface;import android.support.v7.app.AlertDialog;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义private ImageView imageView;private ProgressBar progressBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button_1 = (Button)findViewById(R.id.button_1);Button button_2 = (Button)findViewById(R.id.button_2);Button button_3 = (Button)findViewById(R.id.button_3);Button button_4 = (Button)findViewById(R.id.button_4);..................button_4.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_4:AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);dialog.setTitle("This is Dialog");dialog.setMessage("Something important.");dialog.setCancelable(false);dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialogInterface, int i) {}});dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialogInterface, int i) {}});dialog.show();break;default:break;}}});}
}
首先通过AlertDialog.Builder创建一个AlertDialog的实例,然后可以为这个对话框设置标题,内容,可否用Back键关闭对话框等属性,接下来调用setPostiviteButton()方法为对话框设置确认按钮的点击事件,调用setNegativeButton()方法为对话框设置取消按钮的点击事件。最后将对话框显示出来。
- ProgressDialog
ProgressDialog和AlertDialog有些类似,都可以再界面弹出对话框,都能够屏蔽其他控件的交互能力,用法也类似。不同的是,ProgressDialog会在对话框中显示一个进度条,一般用于表示当前操作比较费时,需要等待。修改MainActivity中代码,如下:
package com.example.uiwidgettest;import android.app.ProgressDialog;import android.content.DialogInterface;import android.support.v7.app.AlertDialog;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.EditText;import android.widget.ImageView;import android.widget.ProgressBar;import android.widget.Toast;public class MainActivity extends AppCompatActivity {private EditText editText;//在这里单独定义private ImageView imageView;private ProgressBar progressBar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button_1 = (Button)findViewById(R.id.button_1);Button button_2 = (Button)findViewById(R.id.button_2);Button button_3 = (Button)findViewById(R.id.button_3);Button button_4 = (Button)findViewById(R.id.button_4);Button button_5 = (Button)findViewById(R.id.button_5);editText = (EditText)findViewById(R.id.edit_text);imageView = (ImageView)findViewById(R.id.image_view);progressBar = (ProgressBar)findViewById(R.id.progress_bar);........button_5.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {switch (view.getId()){case R.id.button_5:ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);progressDialog.setTitle("This is ProgressDialog!");progressDialog.setMessage("Loading");progressDialog.setCancelable(true);progressDialog.show();break;default:break;}}});}
}
如果在setCancelable()中传入了false,表示ProgressDialog是不能通过Back键取消掉的。程序会陷入死机状态,ProgressDialog会一直存在。