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）

  1. 设计界面
    （略）

?

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"

实现跑马灯效果

  1. <TextView? ??
  2. ????android:id="@+id/text_view"??
  3. ????android:autoLink="all"??
  4. ????android:layout_width="fill_parent"? ??
  5. ????android:layout_height="wrap_content"??
  6. ????android:text="@string/hello"??
  7. ????android:ellipsize="marquee"? ??
  8. ????android:focusable="true"? ??
  9. ????android:marqueeRepeatLimit="marquee_forever"? ??
  10. ????android:focusableInTouchMode="true"? ??
  11. android:singleLine="true"
  12. ????android:scrollHorizontally="true"/>??
  13. </LinearLayout>??

??
?

?

[例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键图标设置

  1. actionUnspecified? 未指定，对应常量EditorInfo.IME_ACTION_UNSPECIFIED.效果：
  2. actionNone 没有动作,对应常量EditorInfo.IME_ACTION_NONE 效果：
  3. actionGo 去往，对应常量EditorInfo.IME_ACTION_GO 效果：
  4. actionSearch 搜索，对应常量EditorInfo.IME_ACTION_SEARCH 效果：
  5. actionSend 发送，对应常量EditorInfo.IME_ACTION_SEND 效果：
  6. actionNext 下一个，对应常量EditorInfo.IME_ACTION_NEXT 效果：
  7. actionDone 完成，对应常量EditorInfo.IME_ACTION_DONE 效果：

课堂练习

作业提示??

//监听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(); ??

? ????} ??

/** ?

?????*?交换两个变量的值 ?

?????*[email protected]?start?变量初值 ?

?????*[email protected]?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] 弹出式提示框的默认样式

  1. 设计界面如图所示：

2、核心语句：

Toast.makeText(getApplicationContext(), "默认Toast样式",
?????Toast.LENGTH_SHORT).show();

?

?[例6_2] 自定义提示框显示位置

  1. 设计界面如图所示：

2、核心语句：

toast = Toast.makeText(getApplicationContext(),
?????"自定义位置Toast", Toast.LENGTH_LONG);
???toast.setGravity(Gravity.CENTER, 0, 0);
???toast.show();

?
?

[例6_3]带图片提示框效果

  1. 设计界面如图所示：

?

?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、设计界面如图所示：

  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] 垂直线性布局

  1. 设计界面如图所示：

?

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();

???? ????}

???? });

}

}

时间： 2024-08-04 06:40:36

Android用户界面程序设计示例的相关文章

Android用户界面设计：基本按钮

Android用户界面设计:基本按钮 本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件的步骤.首先,你会学到如何向你的布局文件中添加按钮控件.然后你会学习如何用两种方法处理用户对按钮的点击.最后,我们讨论Android中按钮控件一些其它的可用特性. 第1步:创建Android应用程序 我们从创建Android程序开始.你平常一样完成你的Android应用.一旦你已经创建项目并可以运行,决定你希望向什么样的屏幕添加Button控件.可能你就简单地创

android app 程序设计思路小结

android app 程序设计思路小结 一.model设计与实现 建立业务POJO,比如user public class User{ private int userId; private String userName; public User(int userId, String userName){ this.userId = userId; this.userName = userName; } public void setUserId(int userId){ this.user

Android零基础入门第16节：Android用户界面开发概述

相信通过前面15期的学习,Android的开发环境已经基本掌握了,如果仍有问题,欢迎到Android零基础入门技术讨论微信群交流,从本期开始正式来一步一步踏入Android开发之路. Android应用开发的一项内容就是用户界面的开发.Android提供了非常丰富的用户界面组件,借助于这些用户界面组件,开发者可以非常方便地进行用户界面开发,而且可以开发出非常优秀的用户界面. 一.界面UI元素介绍 Android应用是运行于手机系统上的程序,这种程序给用户的第一印象就是用户界面.接下来从以下几个方

java 加入一个线程、创建有响应的用户界面 。 示例代码

javajava 加入一个线程.创建有响应的用户界面 . 示例代码 来自thinking in java 4 21章  部分代码  目录21.2.11 thinking in java 4免费下载:http://download.csdn.net/detail/liangrui1988/7580155 package org.rui.thread.concurrent; /** * 加入一个线程 * 一个线程可以在其他线程之上调用join()方法,其效果是等待一段时间直到第二个线程结束才继续执行

Android OpenGL入门示例:绘制三角形和正方形 (附完整源码)

Android上对OpenGl的支持是无缝的,所以才有众多3D效果如此逼真的游戏,在Camera的一些流程中也有用到GLSurfaceView的情况.本文记录OpenGL在Android上的入门级示例,绘制一个三角形和正方形.尽管功能简单,可是我捣腾了好几个晚上,大量网上文章上的代码都有点问题,不是绘制不出来就是挂了. 第一个文件:MainActivity.java package com.example.learnopengl1; import android.opengl.GLSurface

Android AIDL 使用示例

介绍: AIDL 即  Android Interface Definition Language 使用: 1.新建.aidl文件 1 //AIDL 文件所在的包 2 package com.houny.demo_aidl.aidl; 3 4 //接口名必须和AIDL文件名一致 5 interface ISay{ 6 boolean Say(); 7 boolean SayInt(int i); 8 boolean SayString(String str); 9 } 2.新建Service,并

Android vcard使用示例，生成vcf文件

 Android vcard使用示例,生成vcf文件 我们备份手机联系人时,导出到SD卡时,会在SD卡中生成一个vcf文件,用于保存联系人姓名,手机号码. vCard 规范容许公开交换个人数据交换 (Personal Data Interchange PDI)信息,在传统纸质商业名片可找到这些信息.规范定义电子名片(或叫vCard)的格式. 而在Android上使用vcard就要借助第三方包: 将它复制进工程,然后Add jar即可,实现代码很简单,如下: if (Environment.get

android NFC 程序设计

NFC简介 NFC是Near Field Communication缩写,即近距离无线通讯技术.由飞利浦公司和索尼公司共同开发的NFC是一种非 接触式识别和互联技术,可以在移动设备.消费类电子产品. PC 和智能控件工具间进行近距离无线通信. 13.56MHz频率运行于20厘米距离内.其传输速度有106 Kbit/秒.212 Kbit/秒或者424 Kbit/秒三种.目前近场通信已通 过成为ISO/IEC IS 18092国际标准.ECMA-340标准与ETSI TS 102 190标准.NFC

SkylineGlobe Android 开发 面积计算示例代码

SkylineGlobe Android 开发 面积计算示例代码: 如果之前熟悉SkylineGlobe桌面端的二次开发,看这些代码应该不难理解. package com.skyline.terraexplorer.tools; import android.os.Handler; import android.os.Looper; import com.skyline.teapi.*; import com.skyline.teapi.ISGWorld.OnAnalysisProgressLi