Android应用的界面编程.ppt

Android 手机开发,第2章 Android 应用的界面编程,第2章 Android 应用的界面编程,Android程序界面与View组件 Android 控制程序界面的三种方式 布局管理器 常见组件的使用方法 部分高级组件介绍,布局管理,ViewGroup、xxxLayout、Button、TextView、ImageView等都是UI组件; xxxLayout又可以作为容器使用。,Activity,Activity是一个应用组件，包含了一个可以和用户交互的显示界面。 一个应用程序可包含多个Activity, 其中有一个main activity，当运行程序时首先启动它。 Activity是一个类，继承自Activity类 每一个Activity都要在AndroidManifest.xml文件当中注册,2.1 Android 控制程序界面的三种方式,使用XML布局文件控制UI界面 google 推荐 findViewById() 在Java代码中开发UI界面 setContentView() 混合使用XML布局文件和Java代码 复杂界面中常用,XML布局文件是Android系统中定义视图的常用方法 文件必须保存在res/layout目录中 XML布局文件的扩展名必须是xml XML的文件名必须符合Java的变量命名规则 每一个布局文件的根节点可以是任意的组件 布局文件的根节点必须包含android命名空间 组件标签需要使用“+id/stringvalue”指定ID ID值的必须符合Java的变量命名规范,使用XML布局视图,xmlns:android=“,为这个Activity设计一个界面布局(activity_main.xml),使用XML布局文件控制UI界面,创建一个Activity通常有这样几个步骤： 需要创建一个Activity类的子类 必须实现onCreate()方法,使用XML布局文件控制UI界面,public class MainActivity extends Activity private TextView tv; Override protected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tv =(TextView)findViewById(R.id.textview1); ,视图（View）是可视化的界面元素 也可以通过代码创建,视图概述,在Java代码中开发UI界面,/创建线性布局对象 LinearLayout mLinearLayout = new LinearLayout(this); setContentView(mLinearLayout); mLinearLayout. setLayoutParams(new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT); mLinearLayout. setOrientation(LinearLayout.VERTICAL); /创建文本控件对象 TextView tv = new TextView(this); tv.setText(“textview1”); LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT); /将文本控件添加到线性布局容器中 mLinearLayout.addView(mTextView, mLayoutParams);,通过代码与XML布局结合进行混合布局 有时候存在一个容器中的子内容可变的情况 可以将类似模板的容器和各种可变子内容分别定义在XML中 通过代码进行主布局和子布局的动态整合 一个混合布局的过程示例 1、子布局的XML示例child.xml,代码与XML混合布局,通过代码与XML布局结合进行混合布局 一个混合布局的过程示例 2、主布局的XML示例main.xml,代码与XML混合布局,通过代码与XML布局结合进行混合布局 一个混合布局的过程示例 3、通过代码整合主布局和子布局,/在Activity中显示主布局 setContentView(R.layout.main); /动态加载子布局 View mBarView = View.inflate(this, R.layout.child, null); /找到box容器 LinearLayout mLinearLayout = (LinearLayout)findViewById(R.id.box); /将子布局加入box容器 mLinearLayout.addView(mBarView);,代码与XML混合布局,2.2 XML 布局管理,2.2.1 LinearLayout,将组件按照水平或垂直方向排列 orientation setOritation(int) gravity setGravity(int) layout_width LayoutParams layout_height layout_weight,用于设定组件大小相关的属性 每一个视图都需要定义android:layout_width和android:layout_height，其值可以有如下几种情况 可以指定确切的大小 wrap_content：表示有视图的内容决定大小 fill_parent（Level8之后改名为match_parent）表示与父容器一样大,定位与大小,设置组件填充父容器时存在两种方式 内填充的部分存在于组件空间内，相当于页边距的效果 padding用于设置四边的内边距 paddingLeft、paddingRight、paddingTop、paddingBottom 外填充的部分存在与组件空间外，类似于边界的间隔 layout_margin用于设置四边的外部间距 layout_marginLeft、layout_marginRight、layout_marginTop、layout_marginBottom,内填充与外填充,所谓重量属性指的是控件的比重layout_weight 当layout_width或layout_height设置为wrap_content时 控件的大小有内容决定 layout_weight表示控件在满足内容显示之外需要占据的空间比重 当l layout_width或layout_height设置为fill_parent时 控件本身原则上需要充满父容器 如果容器中存在多个控件，则比重大的占据空间反而小,重量属性,px（像素）不同设备的显示效果相同 in（英寸）长度单位 mm（毫米）长度单位 pt（磅）1/72英寸 dp（与密度无关的像素） 一种基于屏幕密度的抽象单位 在每英寸160个点的显示器上，1dp=1px dip（与dp相同） sp（与刻度无关的像素） 与dp类似，但是可以根据用户字体大小缩放 建议用sp用作字体大小的单位,度量单位与字体,2.2.2 TableLayout,派生自LinearLayout 向每一行中添加组件 每一行上可放置数量不同的组件 android:collapse android:shrink android:stretch,2.2.2 Layout的嵌套,2.2.3 FrameLayout,根据对齐方式把组件一个一个叠在一起,2.2.4 AbsoluteLayout,通过X，Y坐标来控制组件位置 layout_x layout_y px :像素 dp(dip): 设备独立像素 pt :磅 AbsoluteLayout is deprecated.,2.2.5 RelativeLayout,容器内子组件由相对于兄弟组件、父容器的位置来确定 android:layout_above 将该控件的底端置于给定控件的上端 android:layout_below 将该控件的上端置于给定控件的下端 android:layout_toLeftOf 将该控件的右端置于给定控件的左端 android:layout_toRightOf 将该控件的左端置于给定控件的右端,2.2.5 RelativeLayout,android:layout_alignLeft 设置该控件的左端与给定控件的左端对齐 android:layout_alignRight 设置该控件的左端与给定控件的右端对齐 android:layout_alignTop 设置该控件的上端与给定控件的上端对齐 android:layout_alignBottom 设置该控件的底端与给定控件的底端对齐 android:layout_alignBaseline 将该控件的基线设置为给定控件的基线,2.2.5 RelativeLayout（true）,android:layout_alignParentLeft 该控件与父控件的左端对齐 android:layout_alignParentRight 该控件与父控件的右端对齐 android:layout_alignParentTop 该控件与父控件的顶端对齐 android:layout_alignParentBottom 该控件与父控件的底端对齐,2.2.5 RelativeLayout(true),android:layout_centerHorizontal 该控件在父控件中水平居中 android:layout_centerInParent 该控件在父控件中水平垂直居中 android:layout_centerVertical 该控件在父控件中垂直居中,2.3.1 TextView & EditText,TextView 及其派生类 autoLink, cusorVisible drawableBottom, drawableTop, drawableLeft, drawableRight, drawablePadding editable, ellipsize, gravity, height, width minHeight, minWidth, maxHeight, maxWidth hint, selectAllOnFoucus lines, minLines, maxLines, singleLine,2.3.1 TextView & EditText,password, phoneNumber scrollhorizontally shadowColor, shadowDx, shadowDy, shadowRadius, text, textColor, textColorHilight, textSize, textScalX, textStyle, typeface 带图片和边框的TextView 用户友好的输入界面,2.3.2 Button & ImageButton,普通按钮： text background 图片按钮（不能显示文字） src 显示不同图片的按钮 带文字的图片按钮 Draw9patch,2.3.4 RadioButton & CheckBox,RadioButton: 放置在RadioGroup中使用 android:checked 绑定监听器 ToggleButton,2.3.6 AnalogClock & DigitalClock,可以使用TextView的属性 Chronometer setBase(long) setFormat(String) start() stop() setOnchronometerTickListener(),2.3.7 ImageView,src maxWidth, maxHeight adjustViewBounds scaleType matrix, fitXY, fitStart, fitCenter, fitEnd, Center, centerCrop, centerInside Bitmap, BitmapDrawable,2.4.1 AutoCompleteTextView(1),派生自EditText completionHint completionThreshold dropDownHeight dropDownHorizontalOffset dropDownWidth dropDownBackground,2.4.1 AutoCompleteTextView(2),Adapter: Adapter是将数据绑定到UI界面上的桥接类。Adapter负责创建显示每个项目的子View和提供对下层数据的访问。 ArrayAdapter 是一个绑定View到一组对象的通用类。 public ArrayAdapter (Context context, int textViewResourceId, T objects),2.4.2 SPinner,prompt entries 自定义列表项，需要定义一个Adapter BaseApdater: 实现了ListView和SpinnerView接口 需要复写getCount()和getView方法,2.4.3 DatePicker & TimePicker,datePicker.init(year, month, day, new OnDateChangedListener() 最后一个参数可以为null timePicker. setOnTimeChangedListener(),2.4.4 ProgressBar(1),max (默认为100) progress style= android:style/Wgressbar.horizontal setProgress(int) incrementProgressBy(int ) 显示在标题上的进度条 requestWindowFeature(Window.FEATURE_PROGRESS),2.4.4 ProgressBar(2),Handler: 用于发送和处理消息，或者关联着一个线程的消息队列的Runnable 对象。 每个Handler实例都关联一个线程和那个线程的消息对列 sendMessage(), handleMessage(),2.4.4 ProgressBar(3),setVisibility() View. VISIBLE View. INVISIBLE View.GONE,2.4.5 SeekBar,thumb :自定义滑块图片 max: 最大值 progress：进度值 OnSeekChangeListener,2.4.6 RatingBar,isIndicator numStars rating stepSize progress,2.4.7 TabHost,TabHost是一个容器，在里面放置组件 newTabSpec(String) addTab(TabHost) 步骤： 在界面布局中定义选项卡的内容 Activity继承自TabActivity 调用getTabHost（）方法获取TabHost对象 创建并添加选项卡,2.4.7 TabHost,Tab标签页是界面设计时经常使用的界面控件，可以实现多个分页之间的快速切换，每个分页可以显示不同的内容 下图是Android系统内置的Tab标签页，点击“呼出/接听键”后出现，用于电话呼出和查看拨号记录、联系人,2.4.7 TabHost,Tab标签页的使用 首先要设计所有的分页的界面布局 在分页设计完成后，使用代码建立Tab标签页（ TabActivity ），并给每个分页添加标识和标题 每个分页建立一个XML文件，用以编辑和保存分页的界面布局，使用的方法与设计普通用户界面没有什么区别,2.4.7 TabHost,建立一个“TabDemo”程序，包含三个XML文件，分别为tab1.xml、tab2.xml和tab3.xml，这3个文件分别使用线性布局、相对布局和绝对布局示例中的main.xml的代码，并将布局的ID分别定义为layout01、layout02和layout03,2.4.7 TabHost,tab1.xml文件代码 tab2.xml文件代码 tab3.xml文件代码,2.4.7 TabHost,在TabDemo.java文件中键入下面的代码，创建Tab标签页，并建立子页与界面布局直接的关联关系,2.4.7 TabHost,第1行代码的声明TabDemo类继承与TabActivity，与以往继承Activity不同，TabActivity支持内嵌多个Activity或View 第5行代码通过getTabHost()函数获得了Tab标签页的容器，用以承载Tab标签和分页的界面布局 第6行代码通过LayoutInflater将tab1.xml文件中的布局转换为Tab标签页可以使用的View对象 第9行代码使用addTab()函数添加了第1个分页，tabHost.newTabSpec(“TAB1“)表明在第12行代码中建立的tabHost上，添加一个标识为TAB1的Tab分页 第10行代码使用setIndicator()函数设定分页显示的标题，使用setContent()函数设定分页所关联的界面布局,2.4.7 TabHost,在实现Tab标签页时，除了可以将多个Tab分页放置在同一个Activity中，还可以将不同Tab分页加载到不同的Activity上 两种方式在界面显示上是没有区别的 建议使用后一种方式处理Tab分页和Activity之间的关系，每个Tab分页对应一个Activity，有利于用户对界面控件的管理和控制,2.4.7 TabHost,TabDemo2示例说明如何将不同的Activity显示在不同的Tab分页上。 TabDemo2示例与TabDemo示例的用户界面是完全相同的,2.4.7 TabHost,TabDemo1与 TabDemo2对比 与TabDemo1示例相比，TabDemo2示例的布局目录中（/res/layout）中多了一个main.xml文件， 代码目录中增加了Tab1Activity.java、Tab2Activity.java和Tab3Activity.java三个文件。,2.4.8 ScrollView,只能包含一个组件 并为该组件添加垂直滚动条 HorizontalScrollView ：水平滚动条,2.4.9 ListView & ListActivity(1),(1)使用ListView+entries创建列表视图 (2)使用ListView+ArrayAdapter创建列表视图 (3)使用ListActivity创建列表视图(setListAdapter) choiceMode divider, dividerHeight entries footerDividersEnabled headerDividersEnabled,2.4.9 ListView & ListActivity(2),new ArrayAdapter(this, android.R.layout.simple_list_item_1, arr) textViewResourceId: Simple_list_item_1 simple_list_item_2 simple_list_item_checked simple_list_item_multiple_choice simple_list_item_single_choice,2.4.9 ListView & ListActivity(3),SimpleAdapter public SimpleAdapter (Context context, List data, int resource, String from, int to) 可展开的列表组件（自学）,2.4.11 GridView & ImageSwitcher,与ListView共同继承自AbsListView columnWidth, numColumns horizontalSpacing, verticalSpacing stretchMode ImageSwitcher 比ImageView多动画切换效果 setFactory(ViewFactory),2.4.12 Gallery,水平列表选择框 animationDuration spacing unselectedAlpha,2.5.1 AlertDialog,创建AlertDialog.Builder(创建器) 利用Builder为对话框设置图标、标题、内容 调用Builder的create方法创建对话框 调用Builder的show 提示对话框 列表对话框 单选、多选对话框 自定义对话框,2.5.2 AlertDialog,列表对话框 setItems setSingleChoiceItems setMultiChoiceItems setAdapter 自定义对话框( 登陆对话框) getLayoutInflator().Inflate(ID,null); setView( ),2.5.3 对话框风格的窗口,android:theme=android.style/Theme.Dialog,2.5.4 PopupWindow,(1) 调用PopupWindow的构造器创建对象 (2) 显示PopupWindow： showAsDropDown(View) showAtLocation( ),2.5.5 DatePickerDialog & TimePickerDialog,DatePickerDialog(Context context, DatePickerDialog.OnDateSetListener callBack, int year, int monthOfYear, int dayOfMonth) TimePickerDialog (Context context, TimePickerDialog.OnTimeSetListener callBack, int hourOfDay, int minute, boolean is24HourView),2.5.6 P