Android系统UI设计之：Widget控件
来源：互联网 发布：二维数组回形遍历 编辑：程序博客网 时间：2024/09/21 06:34
Widget控件
EditText可编辑的文本控件 hint、inputType
ProgressBar进度条 max、progress
ImageView显示图片的控件 src、scaleType
Button按钮 enable
checkBox多选按钮 checked
radioButton单选按钮 checked
[3]容器控件
5.GridView 网格视图
7.特殊控件
Toast温馨提示 AlertDialog对话框 Menu菜单
8.自定义控件
[1]显示控件
TextView文本控件 autoLink、visibility、textSize、textColor、backgroundEditText可编辑的文本控件 hint、inputType
ProgressBar进度条 max、progress
ImageView显示图片的控件 src、scaleType
WebView显示网页的控件
[2]交互控件Button按钮 enable
checkBox多选按钮 checked
radioButton单选按钮 checked
seekBar可拖动的进度条 max、progress 监听接口 OnSeekBarChangeListener
package com.farsight.widget02;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.View.OnClickListener;import android.widget.CheckBox;import android.widget.SeekBar;import android.widget.SeekBar.OnSeekBarChangeListener;import android.widget.TextView;public class Android_10_Widget02Activity extends Activity implementsOnClickListener, OnSeekBarChangeListener {CheckBox cb01;CheckBox cb02;CheckBox cb03;TextView tv;String s01 = "";String s02 = "";String s03 = "";TextView tvProgress;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);cb01 = (CheckBox) findViewById(R.id.checkBox1);cb02 = (CheckBox) findViewById(R.id.checkBox2);cb03 = (CheckBox) findViewById(R.id.checkBox3);tv = (TextView) findViewById(R.id.tv1);check();cb01.setOnClickListener(this);cb02.setOnClickListener(this);cb03.setOnClickListener(this);SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar1);seekBar.setOnSeekBarChangeListener(this);tvProgress = (TextView) findViewById(R.id.tv2);tvProgress.setText(String.valueOf(seekBar.getProgress()));}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubcheck();}private void check() {if (cb01.isChecked()) {s01 = cb01.getText().toString();} else {s01 = "";}if (cb02.isChecked()) {s02 = cb02.getText().toString();} else {s02 = "";}if (cb03.isChecked()) {s03 = cb03.getText().toString();} else {s03 = "";}tv.setText(s01 + " " + s02 + " " + s03);}//当用户在拖动进度条时，调用该方法@Overridepublic void onProgressChanged(SeekBar seekBar, int progress,boolean fromUser) {// TODO Auto-generated method stubLog.e("Test", "move");tvProgress.setText(String.valueOf(progress));}//当用户点击进度条时，调用该方法@Overridepublic void onStartTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stubLog.e("Test", "start");}//当用户松开进度条时，调用该方法@Overridepublic void onStopTrackingTouch(SeekBar seekBar) {// TODO Auto-generated method stubLog.e("Test", "stop");}}<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="music" /> <CheckBox android:id="@+id/checkBox2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="coding" /> <CheckBox android:id="@+id/checkBox3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="read" android:checked="true" /> <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="coding" android:textAppearance="?android:attr/textAppearanceLarge" /> <RadioGroup android:id="@+id/radioGroup1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <RadioButton android:id="@+id/radio0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="woman" /> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="man" /> </RadioGroup> <SeekBar android:id="@+id/seekBar1" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="50"/> <TextView android:id="@+id/tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="当前进度：" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/btn_selector"/> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large TextLarge TextLarge Text" android:textAppearance="?android:attr/textAppearanceLarge" android:background="@drawable/chat_bubble_red"/></LinearLayout>运行效果如下：
[3]容器控件
1. LinearLayout线性布局
oritation： 布局的方向 vitical,horizental
gravity/padding 重心/内间距
layout_gravity/layout_margin 相对重心/外间距
layout_weight 权重 对剩余空间的分配
<?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" > <!-- 嵌套布局 --> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFF"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout> <EditText android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" > <requestFocus /> </EditText> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /></LinearLayout>
<?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="right" android:paddingRight="50dp" android:paddingTop="20dp"> <!-- gravity重心: 指控件内容相对于控件的位置，一共9个方位 --> <!-- 默认 left|top , 其它分别是 right|top, right|bottom, center_vertical|right ... --> <!-- padding内间距：配合重心使用，对位置进行微调。例如重心为right|top，那么只收到paddingRight 和 paddingTop的影响 --> <Button android:id="@+id/button1" android:layout_width="100dp" android:layout_height="100dp" android:gravity="right" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout>
<?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" > <!-- layout_gravity相对重心 : 指当前控件相对于父控件的位置--> <!-- 相对重心受到父控件orientation的影响 --> <!-- 如果父控件的orientation为vertical，那么相对重心只有left center_horizental right --> <!-- 如果父控件的orientation为horizontal，那么相对重心只有top center_vertical bottom --> <!-- layout_margin外间距配合相对重心使用，对位置进行微调。 --> <!-- 例如相对重心为right，那么外间距一定是marginRight --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:layout_gravity="right" android:layout_marginRight="20dp"/> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout>
<?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="horizontal" > <!-- layout_weight权重：可以对剩余空间进行分配 --> <Button android:id="@+id/button1" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Btn" android:layout_weight="1" /> <Button android:id="@+id/button2" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Button02" android:layout_weight="1"/></LinearLayout>
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" > <!-- 布局方向 orientation : 1.vertical垂直 2.horizontal水平 --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout>
2. RelativeLayout相对布局
当前控件相对于父控件的位置 layout_alignParent
当前控件相对于其它控件的位置 layout_above / layout_alignLeft
位置的微调 layout_margin
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 当前控件相对于父控件的位置 9个位置 配合layout_margin进行微调--> <!-- 默认在左上 --> <!-- 没有该属性 layout_gravity --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="Button" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button" /> <Button android:id="@+id/button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:text="Button" /> <Button android:id="@+id/button7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:text="Button" /> <Button android:id="@+id/button8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:text="Button" /> <Button android:id="@+id/button9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="10dp" android:text="Button" /></RelativeLayout>
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 当前控件相对于其它控件的位置 --> <!-- 当前控件在其它控件的上方 layout_above, 下方layout_below, 左方layout_toLeftOf, 右方layout_toRightOf--> <!-- 当前控件和其它控件边缘对齐layout_alignTop, layout_alignBottom, layout_alignRight, layout_alignLeft, layout_alignBaseLine基线对齐 --> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="57dp" android:layout_marginTop="54dp" android:text="Button01" /> <!-- maginTop 指 按钮2上方距离按钮1有20dp --> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button1" android:layout_alignLeft="@id/button1" android:layout_marginTop="20dp" android:text="Button02" /></RelativeLayout>效果如下：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/button1" android:layout_toLeftOf="@+id/button1" android:text="Button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button1" android:layout_toRightOf="@id/button1" android:text="Button" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/button1" android:layout_toLeftOf="@+id/button1" android:text="Button" /> <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button1" android:layout_toRightOf="@id/button1" android:text="Button" /></RelativeLayout>实战项目（我们约会吧登陆界面）
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/back" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="22dp" android:layout_marginTop="156dp" android:text="账号:" android:textColor="#000000" android:textSize="25dp" /> <EditText android:id="@+id/editText1" android:layout_width="216dp" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView1" android:layout_alignBottom="@+id/textView1" android:layout_toRightOf="@+id/textView1" > <requestFocus /> </EditText> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toLeftOf="@+id/editText1" android:text="密码:" android:textColor="#000000" android:textSize="25dp" /> <EditText android:id="@+id/editText2" android:layout_width="216dp" android:layout_height="wrap_content" android:layout_alignLeft="@+id/editText1" android:layout_centerVertical="true" android:inputType="textPassword" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_alignParentTop="true" android:layout_alignRight="@+id/editText1" android:src="@drawable/log" /> <CheckBox android:id="@+id/checkBox2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/editText2" android:layout_below="@+id/editText2" android:text="自动登陆" android:textColor="#000000" /> <CheckBox android:id="@+id/checkBox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView2" android:layout_below="@+id/editText2" android:text="记住密码" android:textColor="#000000" /> <Button android:id="@+id/button1" android:layout_width="275dp" android:layout_height="wrap_content" android:layout_alignLeft="@+id/checkBox1" android:layout_below="@+id/checkBox1" android:layout_centerHorizontal="true" android:text="登陆" /> <CheckedTextView android:id="@+id/checkedTextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button1" android:layout_below="@+id/button1" android:textColor="#000000" android:text="用户注册" /> <CheckedTextView android:id="@+id/checkedTextView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/checkedTextView1" android:layout_alignBottom="@+id/checkedTextView1" android:layout_centerHorizontal="true" android:textColor="#000000" android:text="匿名登陆" /> <CheckedTextView android:id="@+id/checkedTextView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignRight="@+id/checkBox2" android:layout_below="@+id/button1" android:textColor="#000000" android:text="退出系统" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/checkedTextView1" android:layout_alignParentBottom="true" android:layout_marginBottom="16dp" android:text="Copyright © 2004-2015,farsight.com,All Rights Reserved" android:textColor="#000000" /></RelativeLayout>效果如下：
3. FrameLayout帧布局
layout_gravity
（绝对布局，表格布局，已被淘汰）
4.ListView列表视图
[1]ListView 由一行一行的控件组成，每一行称为ListView的item项。
[2]Adapter
适配器Adapter概念：控制ListView中显示的内容和布局
适配器Adapter分类：1.系统提供的适配器
ArrayAdapter数组适配器 ---- 用来显示简单布局
SimpleAapter简单的适配器 ---- 用来显示复杂布局
SimpleCursorAdapter ---- 用来显示数据库中的记录
[3]ListView的item项的监听接口 OnItemClickListenner
package com.farsight.listview01;import java.util.ArrayList;import java.util.HashMap;import android.app.Activity;import android.os.Bundle;import android.widget.ListView;import android.widget.SimpleAdapter;public class Android_12_ListView01Activity extends Activity {/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);ListView listView = (ListView) findViewById(R.id.listView1);// String texts[] = { "01", "02", "03", "04", "05", "06", "07", "08",// "09", "10" };// // 数组适配器// // 适配器中需要指定两个内容：1.显示的数据 2.布局文件// ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,// android.R.layout.simple_list_item_1, texts);// 文字内容String texts[] = { "01", "02", "03", "04" };// 图片内容int imageIds[] = { R.drawable.ic_launcher, R.drawable.emoticon_02,R.drawable.emoticon_03, R.drawable.emoticon_04 };// 将文字内容和图片内容放入链表中ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();for (int i = 0; i < imageIds.length; i++) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("text", texts[i]);map.put("imageId", imageIds[i]);data.add(map);}SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.item,new String[] { "text", "imageId" }, new int[] { R.id.textView1,R.id.imageView1 });// 绑定适配器listView.setAdapter(adapter);}}<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> </LinearLayout>效果如下：
<?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" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /></LinearLayout>效果如下：
运行效果如下：
实战项目：制作出如下图所示布局：
package com.farsight.listview02;import java.util.ArrayList;import java.util.HashMap;import android.app.Activity;import android.os.Bundle;import android.widget.ListView;import android.widget.SimpleAdapter;public class Android_13_ListView02Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ListView listView = (ListView) findViewById(R.id.listView1); int imageIds[] = {R.drawable.emoticon_02, R.drawable.emoticon_03, R.drawable.emoticon_04}; double bookPrices[] = {99.99, 87.99, 99.00}; String bookNames[] = {"java", "c++", "c#"}; //ctrl + shift + o 快速导包 ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String,Object>>(); for (int i = 0; i < bookPrices.length; i++) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("imageId", imageIds[i]);map.put("name", bookNames[i]);map.put("price", bookPrices[i]);data.add(map);} SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.item, new String[]{"imageId", "price", "name"}, new int[]{R.id.imageView1, R.id.textView2, R.id.textView1}); listView.setAdapter(adapter); }}<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"> </ListView> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="购买" android:layout_gravity="right"/></LinearLayout>效果如下：
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:orientation="vertical" android:gravity="center_horizontal"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> </LinearLayout> <LinearLayout android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginRight="10dp" > <Button android:id="@+id/button1" android:layout_width="60dp" android:layout_height="wrap_content" android:text="-" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" android:textAppearance="?android:attr/textAppearanceLarge" /> <Button android:id="@+id/button2" android:layout_width="60dp" android:layout_height="wrap_content" android:text="+" /> </LinearLayout></RelativeLayout>效果如下：
[4]自定适配器的步骤
(1)定义类继承BaseAdapter
(2)在BaseAdapter的子类中，需要声明三个属性：1.item布局文件的索引
2.数据（链表或者数组）
3.布局加载器（LayoutInflater inflater = LayoutInflate.from(context)）
功能：解析item项的布局，生成item项的视图对象
View view = inflater.inflate(id, null);
(3)重写四个方法：1.getCount() 系统调用该方法，得到item项的数量，item项数量取决于链表（数组）的长度
2.getItem(int position) 系统调用该方法，得到第position项的数据对象
3.getItemId(int position) 系统调用该方法，得到item的id号
4.getView(int position, ..., ...) 系统调用该方法，得到第position项的视图对象
在控件上绑定数据
(4)如果用户修改ListView上显示的数据，那么需要使用adapter.notifyDataSetChanged方法刷新适配器，更新视图对象。
用户在调用notifyDataSetChanged方法时，系统会自动调用getView方法。
案例一：
package com.farsight.baseadapter01;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.widget.ListView;public class Android_15_BaseAdapter01Activity extends Activity {/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);ListView listView = (ListView) findViewById(R.id.listView1);MyItemData data[] = {new MyItemData("01", "btn01"), new MyItemData("02", "btn02")};//// 使用自定义适配器//// 1.自定义类继承BaseAdapter。（BaseAdapter为所有适配器的父类）MyAdapter adapter = new MyAdapter(this, R.layout.item, data);Log.e("Test", "listView = " + listView);Log.e("Test", "adapter = " + adapter);listView.setAdapter(adapter);}}package com.farsight.baseadapter01;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.Button;import android.widget.TextView;public class MyAdapter extends BaseAdapter {//1.item项的布局文件//2.每个item项显示的数据int id;MyItemData[] data;//布局加载器//功能：解析布局文件，生成视图view对象//布局加载器工具对象从上下文中取出LayoutInflater inflater;public MyAdapter(Context context, int id, MyItemData data[]) {// TODO Auto-generated constructor stubthis.id = id;this.data = data;this.inflater = LayoutInflater.from(context);}//系统自动调用该方法，需要知道listView中item项的数量@Overridepublic int getCount() {// TODO Auto-generated method stubreturn data.length;}//系统自动调用该方法，需要得到第position的item项的数据对象@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn data[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}//系统自动调用该方法，得到第position项的视图对象@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stub//解析布局文件，生成视图对象View view = inflater.inflate(id, null);TextView tv = (TextView) view.findViewById(R.id.textView1);tv.setText(data[position].getTextViewData());Button btn = (Button) view.findViewById(R.id.button1);btn.setText(data[position].getButtonData());return view;}}案例二：package com.farsight.baseadapter02;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.ListView;public class Android_16_BaseAdapter02Activity extends Activity implements OnClickListener { Book book01 = new Book(R.drawable.emoticon_02, "java", 99.99, 3); Book book02 = new Book(R.drawable.emoticon_03, "c++", 88.99, 1); Book book03 = new Book(R.drawable.emoticon_04, "c#", 99.00, 1); Book books[] = {book01, book02, book03}; String bookNames[] = new String[3]; double bookPrices[] = new double[3]; int bookNumbers[] = new int[3];/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ListView listView = (ListView) findViewById(R.id.listView1); MyAdapter adapter = new MyAdapter(this, books, R.layout.item); listView.setAdapter(adapter); findViewById(R.id.button1).setOnClickListener(this); }@Overridepublic void onClick(View v) {// TODO Auto-generated method stubfor (int i = 0; i < bookNames.length; i++) {bookNames[i] = books[i].getName();bookPrices[i] = books[i].getPrice();bookNumbers[i] = books[i].getNumber();}Intent intent = new Intent(this, PayActivity.class);intent.putExtra("name", bookNames);intent.putExtra("price", bookPrices);intent.putExtra("number", bookNumbers);startActivity(intent);}}package com.farsight.baseadapter02;public class Book {private int imageId;private String name;private double price;private int number;public Book(int imageId, String name, double price, int number) {super();this.imageId = imageId;this.name = name;this.price = price;this.number = number;}public int getImageId() {return imageId;}public void setImageId(int imageId) {this.imageId = imageId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public double getPrice() {return price;}public void setPrice(double price) {this.price = price;}public int getNumber() {return number;}public void setNumber(int number) {this.number = number;}public void subNumber(){if(this.number > 1)this.number--;}public void addNumber(){this.number++;}}package com.farsight.baseadapter02;import android.content.Context;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.Button;import android.widget.ImageView;import android.widget.TextView;public class MyAdapter extends BaseAdapter {int id;Book books[];LayoutInflater inflater;public MyAdapter(Context context, Book books[], int id) {// TODO Auto-generated constructor stubthis.inflater = LayoutInflater.from(context);this.books = books;this.id = id;}@Overridepublic int getCount() {// TODO Auto-generated method stubLog.e("Test", "count = " + books.length);return books.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn books[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(final int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stubView view = inflater.inflate(R.layout.item, null);Log.e("Test", "view " + position);ImageView imageView = (ImageView) view.findViewById(R.id.imageView1);imageView.setImageResource(books[position].getImageId());TextView tvName = (TextView) view.findViewById(R.id.textView1);tvName.setText(books[position].getName());TextView tvPrice = (TextView) view.findViewById(R.id.textView2);tvPrice.setText(String.valueOf(books[position].getPrice()));TextView tvNumber = (TextView) view.findViewById(R.id.textView3);tvNumber.setText(String.valueOf(books[position].getNumber()));Button btnSub = (Button) view.findViewById(R.id.button1);btnSub.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubBook book = books[position];book.subNumber();//刷新适配器//系统自动调用getView方法notifyDataSetChanged();}});Button btnAdd = (Button) view.findViewById(R.id.button2);btnAdd.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubbooks[position].addNumber();notifyDataSetChanged();}});return view;}}package com.farsight.baseadapter02;import java.util.ArrayList;import java.util.HashMap;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.ListView;import android.widget.SimpleAdapter;import android.widget.TextView;public class PayActivity extends Activity implements OnItemClickListener {ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();SimpleAdapter adapter;TextView tvPrice;@Overrideprotected void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);setContentView(R.layout.activity_pay);ListView listView = (ListView) findViewById(R.id.listView1);tvPrice = (TextView) findViewById(R.id.textView2);Intent intent = this.getIntent();String names[] = intent.getStringArrayExtra("name");double prices[] = intent.getDoubleArrayExtra("price");int number[] = intent.getIntArrayExtra("number");for (int i = 0; i < number.length; i++) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("name", names[i]);map.put("number", number[i]);map.put("price", prices[i]);data.add(map);}adapter = new SimpleAdapter(this, data,R.layout.pay_item, new String[] { "name", "number" },new int[] { R.id.textView1, R.id.textView2 });listView.setAdapter(adapter);tvPrice.setText("总价：" + getPrice());listView.setOnItemClickListener(this);}@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {// TODO Auto-generated method stub//删除用户点击的item项的数据对象data.remove(arg2);//刷新适配器adapter.notifyDataSetChanged();tvPrice.setText("总价:" + getPrice());}private double getPrice(){double priceAll = 0;for (int i = 0; i < data.size(); i++) {HashMap<String, Object> map = data.get(i);double price = Double.parseDouble(map.get("price").toString());int number = Integer.parseInt(map.get("number").toString());priceAll += price*number;}return priceAll;}}5.GridView 网格视图
一格为一个item项。使用适配器填充内容。
使用方式和ListView完全相同。例如适配器，监听接口等等。
属性：numColumns 列数
6.对话框和Menu，详见代码
对话框：
package com.farsight.dialog;import android.app.Activity;import android.app.AlertDialog.Builder;import android.content.DialogInterface;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.widget.EditText;import android.widget.TextView;public class Android_18_DialogActivity extends Activity implementsOnClickListener {TextView tvInfo;/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);findViewById(R.id.button1).setOnClickListener(this);findViewById(R.id.button2).setOnClickListener(this);tvInfo = (TextView) findViewById(R.id.textView1);}@Overridepublic void onClick(View v) {// TODO Auto-generated method stubif (v.getId() == R.id.button1) {// 导入AlertDialog下的BuilderBuilder builder = new Builder(this);builder.setTitle("退出");builder.setMessage("是否退出当前应用程序");builder.setPositiveButton("确定",new DialogInterface.OnClickListener() {// 当用户点击对话框按钮时，系统调用该方法@Overridepublic void onClick(DialogInterface dialog, int which) {// TODO Auto-generated method stubfinish();}});builder.setNegativeButton("取消", null);builder.create(); // 创建对话框builder.show(); // 显示对话框} else if (v.getId() == R.id.button2) {Builder builder = new Builder(this);builder.setTitle("注册");final View view = LayoutInflater.from(this).inflate(R.layout.dialog, null);// 设置对话框正文视图builder.setView(view);builder.setPositiveButton("确定",new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {// TODO Auto-generated method stubEditText etUser = (EditText) view.findViewById(R.id.editText1);EditText etPass = (EditText) view.findViewById(R.id.editText2);String user = etUser.getText().toString();String pass = etPass.getText().toString();tvInfo.setText(user + ":" + pass);}});builder.setNegativeButton("取消", null);builder.create();builder.show();}}}<?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" > <LinearLayout android:id="@+id/linearLayout2" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="账号" android:textAppearance="?android:attr/textAppearanceLarge" /> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" > <requestFocus /> </EditText> </LinearLayout> <LinearLayout android:id="@+id/linearLayout3" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="密码" android:textAppearance="?android:attr/textAppearanceLarge" /> <EditText android:id="@+id/editText2" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" /> </LinearLayout></LinearLayout>
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="退出" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="注册" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /></LinearLayout>Menu：
package com.farsight.menu;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.SubMenu;public class Android_19_MenuActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } //用户点击menu按钮时，系统自动调用该方法，创建选项菜单 @Override public boolean onCreateOptionsMenu(Menu menu) { // TODO Auto-generated method stub //添加子菜单 SubMenu subMenu01 = menu.addSubMenu(1, 1, 10, "选项一"); //向选项一添加二级菜单 subMenu01.add("01"); subMenu01.add("02"); subMenu01.add("03"); menu.addSubMenu(1, 2, 2, "选项二"); menu.addSubMenu(1, 3, 3, "退出"); return super.onCreateOptionsMenu(menu); } //用户点击菜单项时调用 @Override public boolean onOptionsItemSelected(MenuItem item) { // TODO Auto-generated method stub if(item.getItemId() == 3){ finish(); } return super.onOptionsItemSelected(item); }}7.特殊控件
Toast温馨提示 AlertDialog对话框 Menu菜单
8.自定义控件
继承View类，重写onDraw方法
package com.farsight.myview;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Style;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;public class MyView extends View implements Runnable {// 画笔对象Paint paint = new Paint();// 位图对象Bitmap bitmap;int speed = 10;int rectX = 40;int bitmapX = 0;int bitmapY = 0;int bitmapWidth;int bitmapHeight;public MyView(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stub// 载入图片资源，生成位图对象bitmap = BitmapFactory.decodeResource(context.getResources(),R.drawable.emoticon_04);//得到图片宽bitmapWidth = bitmap.getWidth();//得到图片的高bitmapHeight = bitmap.getHeight();new Thread(this).start();}// canvas画布对象@Overrideprotected void onDraw(Canvas canvas) {// TODO Auto-generated method stubsuper.onDraw(canvas);// 得到自定义控件的宽高// this.getWidth();// this.getHeight();// 设置画布颜色canvas.drawColor(Color.WHITE);// 设置画笔颜色paint.setColor(Color.BLACK);// 画线canvas.drawLine(20, 20, 140, 20, paint);// 画矩形paint.setStyle(Style.FILL);canvas.drawRect(rectX, 40, 60 + rectX, 100, paint);// 改变矩形x轴坐标// 移动矩形rectX += speed;// 修正if (rectX + 60 > this.getWidth()) {rectX = this.getWidth() - 60;}// 设置画笔的样式:空心（stroke），实心(fill)。默认实心。// 设置为空心画笔paint.setStyle(Style.STROKE);canvas.drawRect(120, 120, 200, 200, paint);// 消除锯齿paint.setAntiAlias(true);// 画圆canvas.drawCircle(150, 150, 60, paint);// 绘制位图canvas.drawBitmap(bitmap, bitmapX, bitmapY, paint);}//用户触摸到图片boolean isOnBitmap;int subX, subY;// 当用户触摸到该控件，系统自动调用该方法// 参数event为触摸事件@Overridepublic boolean onTouchEvent(MotionEvent event) {// TODO Auto-generated method stub// 得到用户触摸点坐标int x = (int) event.getX();int y = (int) event.getY();Log.e("Test", "(" + x + "," + y + ")");// 得到用户触摸动作if (event.getAction() == MotionEvent.ACTION_DOWN) {// 按下if(x >= bitmapX && x <= bitmapX+bitmapWidth&& y >= bitmapY && y <= bitmapY+bitmapHeight){isOnBitmap = true;subX = x-bitmapX;subY = y-bitmapY;}}if (event.getAction() == MotionEvent.ACTION_UP) {// 松开Log.e("Test", "action_up");isOnBitmap = false;}if (event.getAction() == MotionEvent.ACTION_MOVE) {// 滑动if(isOnBitmap){bitmapX = x-subX;bitmapY = y-subY;}}return true;}@Overridepublic void run() {// TODO Auto-generated method stubwhile (true) {// 当用户调用此方法，系统会自动调用onDraw方法this.postInvalidate();try {Thread.sleep(100);} catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}}}}容器控件:
1.布局控件
[1]线性布局LinearLayout：orientation
graviy, padding （gravity重心: 指控件内容相对于控件的位置，一共9个方位 -->
<!-- 默认 left|top , 其它分别是 right|top, right|bottom, center_vertical|right ... -->
<!-- padding内间距：配合重心使用，对位置进行微调。例如重心为right|top，那么只收到paddingRight 和 paddingTop的影响 -->）
layout_gravity, layout_margin （<!-- layout_gravity相对重心 : 指当前控件相对于父控件的位置-->
<!-- 相对重心受到父控件orientation的影响 -->
<!-- 如果父控件的orientation为vertical，那么相对重心只有left center_horizental right -->例如
<!-- 如果父控件的orientation为horizontal，那么相对重心只有top center_vertical bottom -->
<!-- layout_margin外间距配合相对重心使用，对位置进行微调。 -->
<!-- 例如相对重心为right，那么外间距一定是marginRight -->）
layout_weight 权重，对剩下的空间进行分配
[2]相对布局RelativeLayout：相对于父控件位置：layout_alignPrent... 有9个位置（layout_centerVertical="true"、layout_alignParentRight、layout_centerHorizontal、layout_centerInParent、layout_alignParentBottom、layout_alignParentLeft、layout_alignParentTop），配合layout_margin进行微调
相对于其它控件位置：方 layout_above, 下方layout_below, 左方layout_toLeftOf, 右方layout_toRightOf
边缘对齐：layout_alignTop, layout_alignBottom, layout_alignRight, layout_alignLeft, layout_alignBaseLine基线对齐，例如：layout_alignLeft="@id/button1"
[3]帧布局FrameLayout：layout_gravity（不受任何限制）, layout_margin 分层的布局
[4]布局使用的方式：三种布局灵活组合嵌套使用。
容器控件 -------(重点)
[1]ListView 列表视图
[2]适配器Adapter概念：控制ListView中显示的内容和布局
[3]适配器Adapter分类：1.系统适配器
ArrayAdapter 用来显示简单布局
SimpleAdapter 用来显示复杂布局
SimpleCursorAdapter 用来显示数据库中的记录
2.自定义适配器
继承BaseAdapte类，重写基本适配器
0 0
- Android系统UI设计之：Widget控件
- Android系统UI设计之：视图
- Android之UI控件
- Android控件，App Widget 之 RemoteViews
- Android基础之UI控件
- Android UI 控件之TextView
- Android UI控件之AlertDialog
- Android UI 控件之Toast
- Android UI控件之TextView
- Android UI系统控件进阶（一）之列表控件ListView详解
- JQuery UI 之 Accordion Widget
- android service 更新widget UI
- Android学习之 UI--ui设计
- Android UI设计 评分控件RatingBar用法
- Android UI设计——TextView控件
- Android UI设计——Button控件
- Android UI设计——EditText控件
- Android UI设计——GridView控件
- 开始使用fedora22 作记录
- poj 3259 Wormholes (bellman)
- Java中对多行内容的正则匹配
- [数位dp] hihoCoder 1033 交错和
- Git教程
- Android系统UI设计之：Widget控件
- C语言04 -- 一维数组,字符串
- MySQL修改root密码的多种方法
- Java文件操作 file类层级显示目录
- credit risk 预测建模 - try 1
- PHP学习书籍记录
- 《学习OpenCV》第四章课后题5-a
- 初识AC自动机 HDU2222
- 【linux】RocketMQ：一个纯java的开源消息中间件--开发测试环境搭建
