前言
時(shí)間就像海綿里的水备韧,只要愿擠,總還是有的痪枫。
TextView組件
TextView直接繼承了View,它的作用就是在界面上顯示文本织堂。
代碼示例
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 設(shè)置文本框內(nèi)文字居中 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15pt"
android:text="halo_加油"
android:gravity="center"
/>
<!-- 設(shè)置字號(hào)為20pt,在文本框結(jié)尾處繪制圖片 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="HALO_加油"
android:textSize="20pt"
android:drawableEnd="@drawable/ic_launcher"
/>
<!-- 設(shè)置結(jié)尾省略奶陈,所有字母大寫 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油halo_加油"
android:ellipsize="end"
android:textAllCaps="true"
/>
<!-- 對(duì)郵箱易阳、電話增加鏈接 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="郵箱是halo_andriod@163.com,電話是010666666"
android:autoLink="email|phone"
/>
<!-- 設(shè)置文字顏色、大小吃粒,并使用陰影 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Halo_加油"
android:shadowColor="#00f"
android:shadowDx="10.0"
android:shadowDy="8.0"
android:shadowRadius="3.0"
android:textColor="#f00"
android:textSize="18pt"
/>
<!-- 密碼框 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="halo_加油"
android:password="true"
/>
</LinearLayout>
效果
Screenshot_20171018-095040.png
提示
andriod:drawableBottom屬性,在文本框內(nèi)文本的底端繪制指定圖像潦俺。
andriod:drawableTop屬性,在文本框內(nèi)文本的頂端繪制指定圖像。
andriod:drawableLeft屬性,在文本框內(nèi)文本的左邊繪制指定圖像徐勃。
andriod:drawableRight屬性,在文本框內(nèi)文本的右邊繪制指定圖像事示。
andriod:drawableEnd屬性,在文本框內(nèi)文本的結(jié)尾處繪制指定圖像。
andriod:drawableStart屬性,在文本框內(nèi)文本的開始處繪制指定圖像僻肖。
andriod:ellipsize屬性,設(shè)置當(dāng)顯示文本超過(guò)了TextView的長(zhǎng)度時(shí),如何處理文本內(nèi)容肖爵。(none,start,middle,end,marquee)。
andriod:lines屬性,設(shè)置該文本框默認(rèn)占幾行臀脏。
andriod:linksClickable屬性,控制該文本框的URL遏匆、E-mail等鏈接是否可點(diǎn)擊。
andriod:maxLines屬性,設(shè)置該文本框最多占幾行谁榜。
andriod:singleLine屬性,設(shè)置該文本框是否為單行模式幅聘。
andriod:textAllCaps屬性,設(shè)置是否將文本框的所有字母顯示為大寫字母。
andriod:autoLink屬性,是否將符合指定格式的文本轉(zhuǎn)換為可單擊的超鏈接形式窃植。
andriod:shadowColor屬性,設(shè)置文本框內(nèi)文本的陰影顏色帝蒿。
自定義TextView組件
在有的時(shí)候,系統(tǒng)自帶TextView滿足不了你的要求巷怜,比如說(shuō)在默認(rèn)情況下葛超,TextView是不帶邊框的暴氏,如果想為TextView添加邊框,我們可以考慮為TextView設(shè)置一個(gè)背景Drawable绣张,該Drawable只是一個(gè)邊框答渔,這樣就實(shí)現(xiàn)了帶邊框的TextView。
代碼示例
drawable\bg_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 設(shè)置背景色為透明色 -->
<solid android:color="#0000"/>
<!-- 設(shè)置紅色邊框 -->
<stroke android:width="4px" android:color="#f00"/>
</shape>
drawable\bg_border2.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 指定圓角矩形的4個(gè)圓角的半徑 -->
<corners
android:topLeftRadius="20px"
android:topRightRadius="20px"
android:bottomLeftRadius="20px"
android:bottomRightRadius="20px"
/>
<!-- 指定邊框線條的寬度和顏色 -->
<stroke android:width="4px" android:color="#f0f"/>
<!-- 指定使用漸變背景色侥涵,使用sweep類型的漸變沼撕。顏色從紅色->綠色->藍(lán)色 -->
<gradient
android:startColor="#f00"
android:centerColor="#0f0"
android:endColor="#00f"
android:type="sweep"
/>
</shape>
layout\textview.xml
<?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" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="帶邊框的文本1"
android:textSize="22pt"
android:background="@drawable/bg_border"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="圓角邊框、漸變背景的文本"
android:textSize="22pt"
android:background="@drawable/bg_border2"
/>
</LinearLayout>
效果
Screenshot_20171018-102316.png
Screenshot_20171018-102316.png
EditText組件
EditText與TextView非常相似芜飘,它甚至與TextView共用了絕大部分XML屬性和方法务豺。EditText與TextView的最大區(qū)別在于:EditText可以接受用戶輸入。
代碼示例
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="用戶名:"
android:textSize="16sp"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="請(qǐng)?zhí)顚懙顷戀~號(hào)"
android:selectAllOnFocus="true"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="密碼:"
android:textSize="16sp"
/>
<!-- andriod:inputType="numberPassword"表明只能接受數(shù)字密碼 -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="numberPassword"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="年齡:"
android:textSize="16sp"
/>
<!-- inputType="number"表明是數(shù)值輸入框 -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="生日:"
android:textSize="16sp"
/>
<!-- inputType="date"表明是日期輸入框 -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="date"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="電話號(hào)碼:"
android:textSize="16sp"
/>
<!-- inputType="phone"表明是輸入電話號(hào)碼的輸入框 -->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="請(qǐng)?zhí)顚懩碾娫捥?hào)碼"
android:selectAllOnFocus="true"
android:inputType="phone"
/>
</TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="注冊(cè)"
/>
</TableLayout>
效果
Screenshot_20171018-110532.png
提示
android:hint屬性,設(shè)置當(dāng)該文本框內(nèi)容為空時(shí)嗦明,文本框內(nèi)默認(rèn)顯示的提示文本笼沥。
android:inputType屬性,指定文本框的類型。類似于HTML中<input.../>元素的type屬性娶牌。
Button組件
Button繼承了TextView,它主要是在UI界面上生成一個(gè)按鈕,該按鈕可以供用戶單擊,當(dāng)用戶單擊按鈕時(shí),按鈕會(huì)觸發(fā)一個(gè)onClick事件奔浅。
示例代碼
\layout\button.xml
<?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" >
<!-- 文字帶陰影的按鈕 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="文字帶陰影的按鈕"
android:textSize="12pt"
android:shadowColor="#aa5"
android:shadowRadius="1"
android:shadowDx="5"
android:shadowDy="5"
/>
<!-- 普通文字按按鈕 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按鈕"
android:textSize="10pt"
android:background="@drawable/red"
/>
<!-- 帶文字的圖片按鈕 -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11px"
android:text="帶文字的圖片按鈕"
android:background="@drawable/button_selector"
/>
</LinearLayout>
\drawable\button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 指定按鈕按下時(shí)的圖片 -->
<item android:state_pressed="true"
android:drawable="@drawable/red"
/>
<!-- 指定按鈕松開時(shí)的圖片 -->
<item android:state_pressed="false"
android:drawable="@drawable/blue"
/>
</selector>
效果
Screenshot_20171018-123121.png
提示
這里只是簡(jiǎn)單的介紹了Button組件的生成方式,Button是一個(gè)很強(qiáng)大的組件,使用Button生成的按鈕不僅可以是普通的文字按鈕,也可以定制成任意形狀。另外,Button的點(diǎn)擊事件將在后面的章節(jié)介紹诗良。
RadioButton組件和CheckBox組件
單選鈕(RadioButton)和復(fù)選框(CheckBox)繼承了Button類,因此可以直接使用Button支持的各種屬性和方法汹桦。
代碼示例
\layout\radio_check.xml
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="性別:"
/>
<!-- 定義一組單選按鈕 -->
<RadioGroup
android:id="@+id/rg"
android:orientation="horizontal"
android:layout_gravity="center_horizontal"
>
<!-- 定義兩個(gè)單選按鈕 -->
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/male"
android:text="男"
android:checked="true"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/female"
android:text="女"
/>
</RadioGroup>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="喜歡的顏色:"/>
<!-- 定義一個(gè)垂直的現(xiàn)線性布局 -->
<LinearLayout
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- 定義三個(gè)復(fù)選框 -->
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="紅色"
android:checked="true"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="藍(lán)色"
/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="綠色"
/>
</LinearLayout>
</TableRow>
<TextView
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableLayout>
MainActivity.java
public class MainActivity extends Activity {
RadioGroup rg;
TextView show;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radio_check);
//獲取rg、show兩個(gè)組件
rg = (RadioGroup) findViewById(R.id.rg);
show = (TextView) findViewById(R.id.show);
//為RadioGroup組件的OnCheckedChanged事件綁定事件監(jiān)聽器
rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
String tip = checkedId == R.id.male?"您的性別是男人":"您的性別是女人";
show.setText(tip);
}
});
}
}
效果
Screenshot_20171018-131021.png
提示
andriod:checked屬性累榜,用于指定RadioButton营勤、CheckBox初始時(shí)是否被選中。
RadioButton與CheckBox的不同之處在于,一組RadioButton只能選中其中一個(gè),因此RadioButton通常要與RadioGroup一起使用壹罚。
ToggleButton組件和Switch組件
狀態(tài)開關(guān)按鈕(ToggleButton)和開關(guān)(Switch)由Button派生出來(lái),因此它們的本質(zhì)也是按鈕,只不過(guò)它們通常用于切換程序中的某種狀態(tài)葛作。
代碼示例
/layout/togglebutton_switch.xml
<?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" >
<!-- 定義一個(gè)ToggleButton按鈕 -->
<ToggleButton
android:id="@+id/toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="橫向排列"
android:textOn="縱向排列"
android:checked="true"
/>
<!-- 定義一個(gè)Switch按鈕 -->
<Switch
android:id="@+id/switcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="橫向排列"
android:textOn="縱向排列"
android:checked="true"
/>
<!-- 定義一個(gè)可以動(dòng)態(tài)改變方向的線性布局 -->
<LinearLayout
android:id="@+id/test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"
/>
</LinearLayout>
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
ToggleButton toggle;
Switch switcher;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.togglebutton_switch);
toggle = (ToggleButton) findViewById(R.id.toggle);
switcher = (Switch) findViewById(R.id.switcher);
final LinearLayout test = (LinearLayout) findViewById(R.id.test);
OnCheckedChangeListener listener = new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
if(isChecked)
{
//設(shè)置LinearLayout垂直布局
test.setOrientation(1);
toggle.setChecked(true);
switcher.setChecked(true);
}
else
{
//設(shè)置LinearLayout水平布局
test.setOrientation(0);
toggle.setChecked(false);
switcher.setChecked(false);
}
}
};
toggle.setOnCheckedChangeListener(listener);
switcher.setOnCheckedChangeListener(listener);
}
}
效果
Screenshot_20171018-133244.png
Screenshot_20171018-133246.png
提示
andriod:textOff屬性,設(shè)置當(dāng)前按鈕的狀態(tài)關(guān)閉時(shí)顯示的文本。
andriod:textOn屬性,設(shè)置當(dāng)前按鈕的狀態(tài)關(guān)打開時(shí)顯示的文本猖凛。
AnalogClock組件和TextClock組件
時(shí)鐘UI組件是兩個(gè)非常簡(jiǎn)單的組件,直接上代碼赂蠢。
代碼示例
<?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"
android:gravity="center_horizontal" >
<!-- 定義模擬時(shí)鐘 -->
<AnalogClock
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<!-- 定義數(shù)字時(shí)鐘-->
<DigitalClock
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="10pt"
android:textColor="#f0f"
/>
</LinearLayout>
效果
Screenshot_20171018-135214.png
提示
目前TextClock已經(jīng)取代了早期的DigitalClock組件,需要API17以上才能使用。TextClock組件能以24小時(shí)制或12小時(shí)制來(lái)顯示時(shí)間,而且可以由程序員來(lái)指定時(shí)間格式辨泳。
Chronometer組件
計(jì)時(shí)器(Chronometer)組件繼承自TextView,它顯示的是從某個(gè)起始時(shí)間開始,一共過(guò)去了多長(zhǎng)時(shí)間虱岂。
Chronometer的用法也很簡(jiǎn)單,它只提供了一個(gè)andriod:format屬性,用于指定計(jì)時(shí)器的計(jì)時(shí)格式。除此之外,還支持如下常用方法菠红。
- setBase(long base):設(shè)置計(jì)時(shí)器的起始時(shí)間第岖。
- setFormat(String format):設(shè)置顯示時(shí)間的格式。
- start():開始計(jì)時(shí)试溯。
- stop():停止計(jì)時(shí)蔑滓。
- setOnChronometerTickListener(Chronometer.OnChronometerTickListener listener):為計(jì)時(shí)器綁定事件監(jiān)聽器,當(dāng)計(jì)時(shí)器改變時(shí)觸發(fā)該監(jiān)聽器。
代碼示例
public class MainActivity extends Activity {
Chronometer ch;
Button start;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chronometer);
ch = (Chronometer) findViewById(R.id.test);
start = (Button) findViewById(R.id.start);
start.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v) {
//設(shè)置開始計(jì)時(shí)時(shí)間
ch.setBase(SystemClock.elapsedRealtime());
//啟動(dòng)計(jì)時(shí)器
ch.start();
start.setEnabled(false);
}
});
//為Chronometer綁定監(jiān)聽事件
ch.setOnChronometerTickListener(new OnChronometerTickListener() {
@Override
public void onChronometerTick(Chronometer ch) {
//如果從現(xiàn)在開始計(jì)時(shí)到現(xiàn)在超過(guò)了20s
if(SystemClock.elapsedRealtime() - ch.getBase() > 20 * 1000)
{
ch.stop();
start.setEnabled(true);
}
}
});
}
}
效果
Screenshot_20171018-143258.png