Android用户界面程序设计示例
?
[例1]按鈕和Toast彈出對話框????1
[例2] TextView文本框 （1）????3
[例3]TextView文本框 （2）????4
[例4]編輯框EditText????4
[例5]單選RadioButton????6
[例6]Toast的用法簡介????8
[例7]多選checkbox????12
[例8]菜單Menu????14
[例9]Dialog對話框????16
[例10]圖片視圖ImageView????19
[例11]圖片按鈕ImageButton????21
界面布局????24
[例12]垂直線性布局????24
[例13]水平線性布局????25
[例14]相對布局????26
絕對布局????27
[例15]表單布局????27
[例16]切換卡(TabWidget)???????? 31
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
[例1]按鈕和Toast彈出對話框
1、設計界面如圖所示：
2、布局文件：
?
????<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Button
android:id="@+id/ok"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="OK"/>
?
3、Activity界面程序：
?
public class Activity01 extends Activity {
????public void onCreate(Bundle savedInstanceState) {
????????super.onCreate(savedInstanceState);
????????setContentView(R.layout.main);
????????// 獲得Button對象
????????Button button_ok = (Button) findViewById(R.id.ok);
????????// 設置Button控件監聽器
????????button_ok.setOnClickListener(new Button.OnClickListener() {
????????????public void onClick(View v) {
????????????????// 這里處理事件
????????????????//DisplayToast("點擊了OK按鈕");
Toast.makeText(this, ("點擊了OK按鈕", Toast.LENGTH_SHORT).show();
????????????}
????????});
????}
?
????public void DisplayToast(String str) {
????????Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
????}
?
?
????/* 按鍵按下所觸發的事件 */
????public boolean onKeyDown(int keyCode, KeyEvent event) {
????????switch (keyCode) {
????????case KeyEvent.KEYCODE_DPAD_CENTER:
????????????DisplayToast("按下：中鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_UP:
????????????DisplayToast("按下：上方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_DOWN:
????????????DisplayToast("按下：下方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_LEFT:
????????????DisplayToast("按下：左方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_RIGHT:
????????????DisplayToast("按下：右方向鍵");
????????????break;
????????}
????????return super.onKeyDown(keyCode, event);
????}
?
????/* 按鍵彈起所觸發的事件 */
????public boolean onKeyUp(int keyCode, KeyEvent event) {
????????switch (keyCode) {
????????case KeyEvent.KEYCODE_DPAD_CENTER:
????????????DisplayToast("彈起：中鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_UP:
????????????DisplayToast("彈起：上方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_DOWN:
????????????DisplayToast("彈起：下方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_LEFT:
????????????DisplayToast("彈起：左方向鍵");
????????????break;
????????case KeyEvent.KEYCODE_DPAD_RIGHT:
????????????DisplayToast("彈起：右方向鍵");
????????????break;
????????}
?
????????return super.onKeyUp(keyCode, event);
????}
?
[例2]TextView（1）
1、設計界面如圖所示：
?
2、布局文件：
????<TextView
android:id="@+id/textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
?
?
3、Activity界面程序的核心語句：
?
????????textview = (TextView)this.findViewById(R.id.textview);
????????String string = "TextView示例，wangzhiguo";
????????/* 設置文本的顏色 */
????????textview.setTextColor(Color.RED);
????????/* 設置字體大小 */
????????textview.setTextSize(20);
????????/* 設置文字背景 */
????????textview.setBackgroundColor(Color.BLUE);
????????/* 設置TextView顯示的文字 */
????textview.setText(string);
?
[例3]TextView（2）
?
2、布局文件：
????<TextView
android:id="@+id/textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:background="#FFFFFF"
android:textColor="#000000"
android:textSize="20px"
/>
?
其他一些屬性
android:textColor="#ff0000"
android:textSize="24sp"
android:textStyle="bold"
?
3、Activity界面程序的核心語句：
setContentView(R.layout.main);//設置內容顯示的xml布局文件 ??
TextView?textView=(TextView)findViewById(R.id.text_view);//取得TextView組件 ??
textView.setTextColor(Color.RED);//設置成紅色 ??
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP,?24f);//設置成24sp ??
textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));//加粗 ??
?
android:autoLink="web"??
android:autoLink="phone"
android:autoLink="all"
實現跑馬燈效果
?? ?
?
[例4]編輯框EditText
1、設計界面如圖所示：
?
2、布局文件：
????<string name="hello">文本框中內容是</string>
<string name="message">請輸入賬號</string>
<string name="app_name">EditText_wangzhiguo</string>
?
????<TextView
????android:id="@+id/TextView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
???? <EditText
???? android:id="@+id/EditText01"
???? android:layout_width="fill_parent"
???? android:layout_height="wrap_content"
???? android:textSize="18sp"
???? android:layout_x="29px"
???? android:hint="@string/message"
???? android:layout_y="33px"
???? />
?
?
3、Activity界面程序的核心語句：
?
super.onCreate(savedInstanceState);
????????setContentView(R.layout.main);
????????m_TextView = (TextView) findViewById(R.id.TextView01);
????????m_EditText = (EditText) findViewById(R.id.EditText01);
????????m_TextView.setTextSize(20);
????????/**
???????? * 設置當m_EditText中為空時提示的內容 在XML中同樣可以實現：android:hint="請輸入賬號"
???????? */
????????// m_EditText.setHint("請輸入賬號");
?
????????/* 設置EditText事件監聽 */
????????m_EditText.setOnKeyListener(new EditText.OnKeyListener() {
????????????@Override
????????????public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
????????????????// 得到文字，將其顯示到TextView中???? m_TextView.setText(Activity01.this.getString(R.string.hello) +
m_EditText.getText().toString());
???? return false;
????}
});
?
補充：關于EditText的一些細節操作
android:hint="請輸入用戶名..." 提示屬性
?android:textColorHint="#238745" 更改提示顏色
android:enabled="false" 不可編輯
android:lines="10" 通過設定行高，實現文本域功能
android:maxLength="40"??最大內容長度
android:password="true" 要求輸入密碼
android:phoneNumber="true" 只能輸入電話號碼
droid:numeric="signed"
android:inputType="date" 指定輸入類型
android:imeOptions="actionSearch" Enter鍵圖標設置
課堂練習
作業提示??
//監聽EditText文本的回車鍵 ??
?editText.setOnEditorActionListener(new?OnEditorActionListener()?{
????????????@Override??
?public?boolean?onEditorAction(TextView?v,?int?actionId,?KeyEvent?event)?{ ??
??????Toast.makeText(HelloEditText.this,?String.valueOf(actionId),?Toast.LENGTH_SHORT).show(); ??
????? ?return?false; ??
?????} ??
??}); ??
??//獲取EditText文本 ?
public?void?onClick(View?v)?{ ??
?????????????Toast.makeText(HelloEditText.this,?editText.getText().toString(),?Toast.LENGTH_SHORT).show(); ??
Button?all=(Button)findViewById(R.id.btn_all); ??
???all.setOnClickListener(new?OnClickListener()?{ ??
????????????@Override??
??????????public?void?onClick(View?v)?{ ??
????????????editText.selectAll(); ??
?????????} ??
????}); ??
//讓EditText全選 ??
?Button?all=(Button)findViewById(R.id.btn_all); ??
????all.setOnClickListener(new?OnClickListener()?{ ??
????????@Override??
??????public?void?onClick(View?v)?{ ??
?????????????editText.selectAll(); ??
???????} ??
????}); ??
//從第2個字符開始選擇EditText文本
public?void?onClick(View?v)?{ ??
????????Editable?editable=editText.getText(); ??
??????? Selection.setSelection(editable,?1,editable.length()); ??
??????} ??
public?void?onClick(View?v)?{ ??
??int?start=editText.getSelectionStart(); ??
??int?end=editText.getSelectionEnd(); ??
??CharSequence?selectText=editText.getText().subSequence(start,?end); ??
?? ?oast.makeText(HelloEditText.this,?selectText,?Toast.LENGTH_SHORT).show(); ??
? ????} ??
/** ?
?????*?交換兩個變量的值 ?
?????*?@param?start?變量初值 ?
?????*?@param?end?變量終值 ?
?????*/??
????protected?void?switchIndex(int?start,?int?end)?{ ??
????????int?temp=start; ??
????????start=end; ??
????????end=temp; ??
????} ??
?
?
[例5]單選RadioButton
1、設計界面如圖所示：
?
?
2、布局文件：
<resources>
<string name="hello">Android底層是基于什么操作系統？</string>
<string name="app_name">單選RadioButton_wangzhiguo</string>
<string name="RadioButton1">Windows</string>
<string name="RadioButton2">Linux</string>
<string name="RadioButton3">Moc os</string>
<string name="RadioButton4">Java</string>
</resources>
?
????<TextView
????android:id="@+id/TextView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<RadioGroup
android:id="@+id/RadioGroup01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_x="3px"
android:layout_y="54px"
>
<RadioButton
android:id="@+id/RadioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/RadioButton1"
/>
<RadioButton
android:id="@+id/RadioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/RadioButton2"
/>
<RadioButton
android:id="@+id/RadioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/RadioButton3"
/>
<RadioButton
android:id="@+id/RadioButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/RadioButton4"
/>
</RadioGroup>
?
?
?
3、Activity界面程序的核心語句：
????/**
???????? * 獲得TextView對象 獲得RadioGroup對象 獲得4個RadioButton對象
???????? */
????????m_TextView = (TextView) findViewById(R.id.TextView01);
????????m_RadioGroup = (RadioGroup) findViewById(R.id.RadioGroup01);
????????m_Radio1 = (RadioButton) findViewById(R.id.RadioButton1);
????????m_Radio2 = (RadioButton) findViewById(R.id.RadioButton2);
????????m_Radio3 = (RadioButton) findViewById(R.id.RadioButton3);
????????m_Radio4 = (RadioButton) findViewById(R.id.RadioButton4);
?
????????/* 設置事件監聽 */
????????m_RadioGroup
????????????????.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
????????@Override
????public void onCheckedChanged(RadioGroup group, int checkedId) {
????????????// TODO Auto-generated method stub
????????if (checkedId == m_Radio2.getId()) {
????????????DisplayToast("正確答案：" + m_Radio2.getText()
????????????????????????+ "，恭喜你，回答正確！");
????????????} else {
???????????????????? DisplayToast("請注意，回答錯誤！");
????????????????????}
????????????}
????????});
????}
????/* 顯示Toast */
????public void DisplayToast(String str) {
????????Toast toast = Toast.makeText(this, str, Toast.LENGTH_LONG);
????????// 設置toast顯示的位置
????????toast.setGravity(Gravity.TOP, 0, 220);
????????// 顯示該Toast
????????toast.show();
}
?
[例6]Toast的用法簡介
[例6_1] 彈出式提示框的默認樣式
2、核心語句：
Toast.makeText(getApplicationContext(), "默認Toast樣式",
?????Toast.LENGTH_SHORT).show();
?
?[例6_2] 自定義提示框顯示位置
2、核心語句：
toast = Toast.makeText(getApplicationContext(),
?????"自定義位置Toast", Toast.LENGTH_LONG);
???toast.setGravity(Gravity.CENTER, 0, 0);
???toast.show();
? ?
[例6_3]帶圖片提示框效果
?
?2、核心語句：
toast = Toast.makeText(getApplicationContext(),
?????"帶圖片的Toast", Toast.LENGTH_LONG);
???toast.setGravity(Gravity.CENTER, 0, 0);
???LinearLayout toastView = (LinearLayout) toast.getView();
???ImageView imageCodeProject = new ImageView(getApplicationContext());
???imageCodeProject.setImageResource(R.drawable.icon);
???toastView.addView(imageCodeProject, 0);
???toast.show();
?[例6_4]帶圖片的自定義提示框效果
1、設計界面如圖所示：
?
2、核心語句：
LayoutInflater inflater = getLayoutInflater();
???View layout = inflater.inflate(R.layout.custom,
?????(ViewGroup) findViewById(R.id.llToast));
???ImageView image = (ImageView) layout
?????.findViewById(R.id.tvImageToast);
???image.setImageResource(R.drawable.icon);
???TextView title = (TextView) layout.findViewById(R.id.tvTitleToast);
???title.setText("Attention");
???TextView text = (TextView) layout.findViewById(R.id.tvTextToast);
???text.setText("完全自定義Toast");
???toast = new Toast(getApplicationContext());
???toast.setGravity(Gravity.RIGHT | Gravity.TOP, 12, 40);
???toast.setDuration(Toast.LENGTH_LONG);
???toast.setView(layout);
???toast.show();
[例6_5] 其他線程
1、設計界面如圖所示：
new Thread(new Runnable() {
??? ?public void run() {
???? ?showToast();
??? ?}
???}).start();
[例7]多選checkbox
1、設計界面如圖所示：
?
2、布局文件：
<string name="hello">調查：你喜歡Android的原因？</string>
<string name="app_name">CheckBox_wangzhiguo</string>
<string name="CheckBox1">無界限的應用程序</string>
<string name="CheckBox2">應用程序是在平等的條件下創建的</string>
<string name="CheckBox3">應用程序可以輕松地嵌入網絡</string>
<string name="CheckBox4">應用程序可以并行運行</string>
?
<TextView
????android:id="@+id/TextView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<CheckBox
android:id="@+id/CheckBox1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/CheckBox1"
>
</CheckBox>
<CheckBox
android:id="@+id/CheckBox4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/CheckBox4"
>
</CheckBox>
<Button
android:id="@+id/button1"
?
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="提交"
>
</Button>
?
?
?
3、核心語句：
m_CheckBox1.setOnCheckedChangeListener(new CheckBox.OnCheckedChangeListener() {
????????????????????@Override
????????????public void onCheckedChanged(CompoundButton buttonView,
????????????????boolean isChecked) {
????????????????if (m_CheckBox1.isChecked()) {
????????????????????DisplayToast("你選擇了：" + m_CheckBox1.getText());
????????????????????}
????????????????}
????????});
?
????????m_Button1.setOnClickListener(new Button.OnClickListener() {
????????????public void onClick(View v) {
????????????????int num = 0;
????????????????if (m_CheckBox1.isChecked()) {
????????????????????num++;
????????????????}
????????????????if (m_CheckBox2.isChecked()) {
????????????????????num++;
????????????????}
????????????????if (m_CheckBox3.isChecked()) {
????????????????????num++;
????????????????}
????????????????if (m_CheckBox4.isChecked()) {
????????????????????num++;
????????????????}
????????????????DisplayToast("謝謝參與！你一共選擇了" + num + "項！");
????????????}
????????});
?
[例8] 菜單Menu
1、設計界面如圖所示：
?
?
2、布局文件：
<string name="hello">主界面,點擊關于會跳到另一個界面!（Activity01）</string>
<string name="hello2">關于\nAndroid Menu使用范例！（Activity02）</string>
<string name="app_name">Menu_wangzhiguo</string>
????<string name="ok">切換Activity</string>
????<string name="back">返回</string>
?
創建menu文件夾，其中放入menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/about"
android:title="關于" />
<item android:id="@+id/exit"
android:title="退出" />
</menu>
?
創建兩個main.xml，兩個activity，并且在AndroidManifest.xml中加入
<activity android:name=".Activity02" ></activity>
?
3、Activity界面程序的核心語句：
啟用菜單
/* 創建menu */
????public boolean onCreateOptionsMenu(Menu menu) {
????????MenuInflater inflater = getMenuInflater();
????????// 設置menu界面為res/menu/menu.xml
????????inflater.inflate(R.menu.menu, menu);
????????return true;
????}
?
????/* 處理菜單事件 */
????public boolean onOptionsItemSelected(MenuItem item) {
????????// 得到當前選中的MenuItem的ID,
????????int item_id = item.getItemId();
????????switch (item_id) {
????????case R.id.about:
????????????/* 新建一個Intent對象 */
????????????Intent intent = new Intent();
????????????/* 指定intent要啟動的類 */
????????????intent.setClass(Activity01.this, Activity02.class);
????????????/* 啟動一個新的Activity */
????????????startActivity(intent);
????????????/* 關閉當前的Activity */
????????????Activity01.this.finish();
????????????break;
????????case R.id.exit:
????????????Activity01.this.finish();
????????????break;
????????}
????????return true;
????}
啟用菜單的另外一種方式
????public boolean onCreateOptionsMenu(Menu menu) {
????????// 為menu添加內容
????????menu.add(0, 0, 0, R.string.ok);
????????menu.add(0, 1, 1, R.string.back);
????????return true;
????}
?
?
?
?
[例9] Dialog對話框
1、設計界面如圖所示：
?
?
2、核心語句：
????Dialog dialog = new AlertDialog.Builder(this).
????????????setTitle("exit").setMessage("你確定退出程序嗎").setNegativeButton("取消", new DialogInterface.OnClickListener(){
????????????????????@Override
????????????????????public void onClick(DialogInterface dialog, int which)
//????????????????????????Acitivity01.this.finish();
????????????????????????Acitivity01.this.loginDialog().show();
????????????????????????
????????????????????}}
????????????).setPositiveButton("ok", new DialogInterface.OnClickListener(){
????????????????????@Override
????????????????????public void onClick(DialogInterface dialog, int which) {
????????????????????????pDialog = ProgressDialog.show(Acitivity01.this, "請稍等", "您正在登陸", true);
????????????????????????new Thread(){
????????????????????????????public void run() {
????????????????????????????????try {
????????????????????????????????????Thread.sleep(3000);
????????????????????????????????} catch (InterruptedException e) {
????????????????????????????????????// TODO Auto-generated catch block
????????????????????????????????????e.printStackTrace();
????????????????????????????????}
????????????????????????????????pDialog.dismiss();
????????????????????????????};
????????????????????????}.start();
????????????????????????Acitivity01.this.finish();
????????????????????}}).create();
????????dialog.show();
?
public Dialog loginDialog(){
????LayoutInflater factory = LayoutInflater.from(Acitivity01.this);
????View dialogView = factory.inflate(R.layout.dialog, null);
????Dialog dialog = null;
????AlertDialog.Builder builder = new AlertDialog.Builder(Acitivity01.this);
????builder.setTitle("this is a login view");
????builder.setView(dialogView);
????builder.setPositiveButton("ok", null);
????builder.setNegativeButton("cancel", null);
????dialog = builder.create();
????return dialog;
}
?
[例10] 圖片視圖ImageView
1、設計界面如圖所示：
?
2、布局文件：
<ImageView
????android:id="@+id/ImageView01"
????android:layout_width="wrap_content"
????android:layout_height="wrap_content"
????>
</ImageView>
<TextView
????android:id="@+id/TextView01"
????android:layout_below="@id/ImageView01"
????android:layout_width="wrap_content"
????android:layout_height="wrap_content"
>
?
3、核心語句：
// 獲得ImageView的對象
????????imageview = (ImageView) this.findViewById(R.id.ImageView01);
????????textview = (TextView) this.findViewById(R.id.TextView01);
?
????????// 設置imageview的圖片資源。同樣可以再xml布局中像下面這樣寫
????????// android:src="@drawable/logo"
????????imageview.setImageResource(R.drawable.logo);
?
????????// 設置imageview的Alpha值，Alpha值表示透明度，如：全透明，半透明
????????imageview.setAlpha(image_alpha);
?
????????// 開啟一個線程來讓Alpha值遞減
????????new Thread(new Runnable() {
????????????public void run() {
????????????????while (isrung) {
????????????????????try {
?
????????????????????????Thread.sleep(200);
????????????????????????// 更新Alpha值
????????????????????????updateAlpha();
????????????????????} catch (InterruptedException e) {
????????????????????????e.printStackTrace();
????????????????????}
????????????????}
?
????????????}
????????}).start();
?
????????// 接受消息之后更新imageview視圖
????????mHandler = new Handler() {
????????????@Override
????????????public void handleMessage(Message msg) {
????????????????super.handleMessage(msg);
????????????????imageview.setAlpha(image_alpha);
????????????????textview.setText("現在alpha值是：" + Integer.toString(image_alpha));
????????????????// 更新
????????????????imageview.invalidate();
????????????}
????????};
????}
?
????public void updateAlpha() {
????????if (image_alpha - 7 >= 0) {
????????????image_alpha -= 7;
????????} else {
????????????image_alpha = 0;
????????????isrung = false;
????????}
????????// 發送需要更新imageview視圖的消息
????????mHandler.sendMessage(mHandler.obtainMessage());
????}
?
列表視圖ListView
1 參考幫助文檔的一種寫法
public class MainActivity extends ListActivity {
String[] strs = {"aa1","bb2","cc3"};
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ArrayAdapter<String> aa = new ArrayAdapter<String>(this, R.layout.simple_list_item_1, strs);
setListAdapter(aa);
ListView lv = this.getListView();
lv.setOnItemClickListener(new OnItemClickListener() {
?
????????????public void onItemClick(AdapterView<?> parent, View view,
????????????????????int position, long id) {
????????????????Toast.makeText(MainActivity.this, strs[position], Toast.LENGTH_LONG).show();
????????????????
????????????}
????????});
}
}
監聽還可以這樣加
protected void onListItemClick(ListView l, View v, int position, long id) {
????// TODO Auto-generated method stub
????super.onListItemClick(l, v, position, id);
????Toast.makeText(this, strs[position], Toast.LENGTH_LONG).show();
}
第二種ListView的寫法
<ListView
android:id="@+id/ListView01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
?
public class TestListView2 extends Activity {
????ListView lv;
????String[] strs = { "Java", "JavaME", "JavaEE", "Android" };
????@Override
????protected void onCreate(Bundle savedInstanceState) {
????????super.onCreate(savedInstanceState);
????????setContentView(R.layout.test_listview);
????????
????????lv = (ListView)findViewById(R.id.ListView01);
????????
????????ArrayAdapter<String> aa = new
????????ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,strs);
????????lv.setAdapter(aa);
????????
????????lv.setOnItemClickListener(new OnItemClickListener() {
????????????public void onItemClick(AdapterView<?> parent, View view,
????????????????????int position, long id) {
????????????????Toast.makeText(TestListView2.this, strs[position], Toast.LENGTH_LONG).show();
????????????}
????????});
????}
}
第三種ListView的寫法
<ImageView android:id="@+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
?
<TextView
android:text=""
android:id="@+id/text_TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
public class TestListView3 extends ListActivity {
????@Override
????protected void onCreate(Bundle savedInstanceState) {
????????super.onCreate(savedInstanceState);
????????setListAdapter(new MyAdapter());
????}
????class MyAdapter extends BaseAdapter {
????????String[] strs = { "Java", "JavaME", "JavaEE", "Android" };
????????LayoutInflater li = LayoutInflater.from(getApplicationContext());
????????public int getCount() {
????????????return strs.length;
????????}
????????public Object getItem(int position) {
????????????return null;
????????}
????????public long getItemId(int position) {
????????????return 0;
????????}
????????public View getView(int position, View convertView, ViewGroup parent) {
????????????View v = li.inflate(R.layout.listview_item, null);
????????????ImageView iv = (ImageView)v.findViewById(R.id.ImageView01);
????????????TextView tv = (TextView)v.findViewById(R.id.text_TextView01);
????????????tv.setText(strs[position]);
????????????iv.setImageResource(R.drawable.icon);
????????????return v;
????????}
????}
}
[例11] 圖片按鈕ImageButton
1、設計界面如圖所示：
?
2、布局文件：
m_TextView = (TextView) findViewById(R.id.TextView01);
????????// 分別取得4個ImageButton對象
????????m_ImageButton1 = (ImageButton) findViewById(R.id.ImageButton01);
????????m_ImageButton2 = (ImageButton) findViewById(R.id.ImageButton02);
????????m_ImageButton3 = (ImageButton) findViewById(R.id.ImageButton03);
????????m_ImageButton4 = (ImageButton) findViewById(R.id.ImageButton04);
?
????????// 分別設置所使用的圖標
????????// m_ImageButton1是在xml布局中設置的，這里就暫時不設置了
????????m_ImageButton2.setImageDrawable(getResources().getDrawable(
????????????????R.drawable.button2));
????????m_ImageButton3.setImageDrawable(getResources().getDrawable(
????????????????R.drawable.button3));
????????m_ImageButton4.setImageDrawable(getResources().getDrawable(
????????????????android.R.drawable.sym_call_incoming));
?
????????// 以下分別為每個按鈕設置事件監聽setOnClickListener
????m_ImageButton1.setOnClickListener(new Button.OnClickListener() {
????????public void onClick(View v) {
????????????// 對話框
????????Dialog dialog = new AlertDialog.Builder(Activity01.this)
????????????????????????.setTitle("提示").setMessage("我是ImageButton1")
????????????????????????.setPositiveButton("確定",
????????????????????????new DialogInterface.OnClickListener() {
????????????????????????????public void onClick(DialogInterface dialog,
????????????????????????????????????????int whichButton) {
????????????????????????????????????}
????????????????????????????}).create();// 創建按鈕
????????????????dialog.show();
????????????}
????});
m_ImageButton2.setOnClickListener(new Button.OnClickListener() {
????public void onClick(View v) {
????????Dialog dialog = new AlertDialog.Builder(Activity01.this)
????????????.setTitle("提示").setMessage(
????????????"我是ImageButton2，我要使用ImageButton3的圖標")
????????????.setPositiveButton("確定",
????????????????new DialogInterface.OnClickListener() {
????????????????????public void onClick(DialogInterface dialog,
????????????????????int whichButton) {m_ImageButton2
???? .setImageDrawable(getResources()
???????????????????? .getDrawable(R.drawable.button3));
????????????????????}
????????????}).create();// 創建按鈕
????????dialog.show();
????}
});
m_ImageButton3.setOnClickListener(new Button.OnClickListener() {
????public void onClick(View v) {
????Dialog dialog = new AlertDialog.Builder(Activity01.this)
????????.setTitle("提示")
????????.setMessage("我是ImageButton3，我要使用系統打電話圖標")
????????.setPositiveButton("確定",
????????????new DialogInterface.OnClickListener() {
????????????????public void onClick(DialogInterface dialog,
????????????????int whichButton) {
m_ImageButton3.setImageDrawable(getResources()
????????????????????????.getDrawable(???????????????????????? android.R.drawable.sym_action_call));
????????????????????????????}
????????????????}).create();// 創建按鈕
????????????dialog.show();
????????}
????});
m_ImageButton4.setOnClickListener(new Button.OnClickListener() {
????public void onClick(View v) {
????????Dialog dialog = new AlertDialog.Builder(Activity01.this)
????????????.setTitle("提示").setMessage("我是使用的系統圖標！")
????????????.setPositiveButton("確定",
????????????????new DialogInterface.OnClickListener() {
????????????????????public void onClick(DialogInterface dialog,
????????????????????????????int whichButton) {
????????????????????????????}
????????????????????}).create();// 創建按鈕
????????????dialog.show();
????????}
});
?
?
界面布局
[例12] 垂直線性布局
?
2、布局文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
????<TextView
???? android:text="第一行"
???? android:gravity="top"
???? android:textSize="15pt"
???? android:background="#aa0000"
???? android:layout_width="fill_parent"
???? android:layout_height="wrap_content"
???? android:layout_weight="3"/> //重量級，越大則在界面中所占比例也越多（即四行所占比例會把界面全部占滿，重量級越多的占得比例越多）
????
????<TextView
???? android:text="第二行"
???? android:textSize="15pt"
???? android:gravity="right"
???? android:background="#00aa00"
???? android:layout_width="fill_parent"
???? android:layout_height="wrap_content"
???? android:layout_weight="2"/>
????
????<TextView
???? android:text="第三行"
???? android:textSize="15pt"
???? android:gravity="center_vertical"
???? android:background="#0000aa"
???? android:layout_width="fill_parent"
???? android:layout_height="wrap_content"
???? android:layout_weight="1"/>
????<TextView
???? android:text="第四行"
???? android:textSize="15pt"
???? android:gravity="center_vertical"
???? android:background="#aaaa00"
???? android:layout_width="fill_parent"
???? android:layout_height="wrap_content"
???? android:layout_weight="0"/>
</LinearLayout>
[例13] 水平線性布局
1、設計界面如圖所示：
?
2、布局文件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
????<TextView
???? android:text="第一列"
???? android:gravity="center_horizontal"
???? android:background="#aa0000"
???? android:layout_width="wrap_content"
???? android:layout_height="fill_parent"
???? android:layout_weight="1"/>
????
????<TextView
???? android:text="第二列"
???? android:gravity="center_horizontal"
???? android:background="#00aa00"
???? android:layout_width="wrap_content"
???? android:layout_height="fill_parent"
???? android:layout_weight="1"/>
????
????<TextView
???? android:text="第三列"
???? android:gravity="center_horizontal"
???? android:background="#0000aa"
???? android:layout_width="wrap_content"
???? android:layout_height="fill_parent"
???? android:layout_weight="1"/>
????
????<TextView
???? android:text="第四列"
???? android:gravity="center_horizontal"
???? android:background="#aaaa00"
???? android:layout_width="wrap_content"
???? android:layout_height="fill_parent"
???? android:layout_weight="1"/>
</LinearLayout>
[例14] 相對布局
1、設計界面如圖所示：
?
2、布局文件：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="請輸入:"/>
<EditText
android:id="@+id/entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_below="@id/label"/>// layout_below表示該標簽放在TextView標簽下面
?
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true" //靠右
android:layout_marginLeft="10dip" //距左邊標簽間隔10個單位
android:text="確定" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok" //在id=ok標簽的左邊
android:layout_alignTop="@id/ok" //頂部和id=ok的標簽對齊
android:text="取消" />
</RelativeLayout>
?
?
絕對布局
[例15] 表單布局
1、設計界面如圖所示：
?
2、布局文件：
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
//第一列可以延伸、擴展。這樣第一列和第二列不會緊挨著排列
?
<TableRow>
<TextView
android:layout_column="1" //指明該列為第一列，默認為第0列
android:text="打開..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right" //該視圖靠右邊界面
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="保存..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="另存為..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>
?
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="*"
android:padding="3dip" />
<TextView
android:text="導入..."
android:padding="3dip" />
</TableRow>
<TableRow>
<TextView
android:text="*"
android:padding="3dip" />
<TextView
android:text="導出..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
</TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
?
<TableRow>
<TextView
android:layout_column="1"
android:text="退出"
android:padding="3dip" />
</TableRow>
</TableLayout>
?
?
?
?
?
1、設計界面如圖所示：
?
2、布局文件：
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1,2"
android:shrinkColumns="1,2"
>
<TextView
android:text="Table Test"
android:gravity="center"/>
<TableRow>
<TextView
????android:layout_column="1"
android:text="姓名"
android:gravity="left"/>
<TextView
android:text="基本信息"
android:gravity="center"/>
</TableRow>
<TableRow>
<TextView
android:text=" 1 "
android:gravity="center"/>
<TextView
android:text="hoyah"
android:gravity="left"/>
<TextView
android:text="Wuhan University"
android:gravity="right"/>
</TableRow>
<TableRow>
<TextView
android:text=" 2 "
android:gravity="center"/>
<TextView
android:text="Google"
android:gravity="left"/>
<TextView
android:text="hello Google"
android:gravity="right"/>
</TableRow>
<TableRow>
<TextView
android:text="3"
android:gravity="center"/>
<TextView
android:text="Android"
android:gravity="left"/>
<TextView
android:text="Android OS"
android:gravity="right"/>
</TableRow>
</TableLayout>
?
?
布局講解:
? ? android:collapse="1
隱藏該TableLayout里的TableRow的列1，即第2列（從0開始計算），若有多列要隱藏，用"，"隔開。
? ? android:stretchColumns="0,1,2"
設置列0、1、2為可伸展列。
? ? android:shrinkColumns="1,2"
設置列1、2為可收縮列。
? ? android:background="@drawable/picture_name"
本例中沒有涉及此屬性，它是要設置當前view 的背景圖片，圖片文件應該放在res文件夾下。
[例16] 切換卡(TabWidget)
1、設計界面如圖所示：
?
2、布局文件：
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="@+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<TextView
android:id="@+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a third tab" />
????</FrameLayout>
</LinearLayout>
</TabHost>
?
3、核心語句：
public class Activity01 extends TabActivity {
????// 聲明TabHost對象
????TabHost mTabHost;
?
????/** Called when the activity is first created. */
????@Override
????public void onCreate(Bundle savedInstanceState) {
????????super.onCreate(savedInstanceState);
????????setContentView(R.layout.main);
?
????????// 取得TabHost對象
????????mTabHost = getTabHost();
?
????????/* 為TabHost添加標簽 */
????????// 新建一個newTabSpec(newTabSpec)
????????// 設置其標簽和圖標(setIndicator)
????????// 設置內容(setContent)
????mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1",????getResources().getDrawable(R.drawable.img1)).setContent(
???????????????? R.id.textview1));
????mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2", getResources().getDrawable(R.drawable.img2)).setContent(
???????????????? R.id.textview2));
mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3",????getResources().getDrawable(R.drawable.img3)).setContent(
???????????? ???? R.id.textview3));
?
????????// 設置TabHost的背景顏色
????????mTabHost.setBackgroundColor(Color.argb(150, 22, 70, 150));
????????// 設置TabHost的背景圖片資源
????????// mTabHost.setBackgroundResource(R.drawable.bg0);
?
????????// 設置當前顯示哪一個標簽
????mTabHost.setCurrentTab(0);
????????// 標簽切換事件處理，setOnTabChangedListener
????mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
????// TODO Auto-generated method stub
????????????@Override
????public void onTabChanged(String tabId) {
????????Dialog dialog = new AlertDialog.Builder(Activity01.this)
????????????????.setTitle("提示").setMessage("當前選中：" + tabId + "標簽")
????????????????.setPositiveButton("確定",
???????????????? new DialogInterface.OnClickListener() {
????????????????????public void onClick(DialogInterface dialog,
????????????????????????int whichButton) {
????????????????????????????????dialog.cancel();
????????????????????????????}
????????????????????}).create();// 創建按鈕
????????????dialog.show();
???? ????}
???? });
}
}
轉載于:https://www.cnblogs.com/zhoujn/p/4405830.html
總結
以上是生活随笔為你收集整理的Android用户界面程序设计示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机桌面设计总结及体会,计算机基础学习
- 下一篇： 天地图 android sdk,我想使用