總結:見名知意
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會一直存在。