Android基础程序设计第三章-Android-UI基础知识.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/8/24,#,第三章,Android UI,基础知识,3.1,编写程序界面,3.5 ListView,控件详解,3.3,四种基本布局,3.6,强大的滚动控件,RecylerView,控件,3.2,常用控件,3.4,约束布局,3.7,小结,3.1,编写程序界面,Android,中有多种编写程序界面的方式可供选择，比如,Android Stuido,和,Eclipse,中都提供了相对应的可视化编辑器，允许使用拖拽控件的方式来编写布局，并可以在视图上直接修改控件的属性。,通常,Android,开发者不使用上述方式去编写界面，因为可视化编辑工具并不能帮助开发者去真正了解界面底层的实现原理；而且通过这种方式制作出的界面通常不具有良好的屏幕适配性，当需要编写较为复杂的界面时，可视化编辑工具就很难胜任。因此建议所有的界面都通过最基本的方式去实现，也就是编写,XML,代码，熟悉并掌握了,XML,代码编写界面之后，不仅可以实现复杂的界面，还可以分析和修改当前现有界面。,3.2,常用控件,控件作为界面组成的主要元素。,Android,系统提供了大量的,UI,控件，这些界面可以与用户直接进行交互，例如,TextView,（文本框）、,EditText,（编辑框）、,Button,（按钮）等，合理地使用这些控件就可以非常轻松地编写出美观的界面。本节将学习,Android,中常用控件的使用方法。,3.2,常用控件,3.2.1 TextView,控件,TextView,作为,Android,中最简单最常用的一个控件，用来在界面显示文本信息，,TextView,控件属性较多，开发者可以通过设置属性值来修改文本的字体大小、颜色、样式等。,设置控件宽度,设置控件高度,设置文字大小,设置文本信息,设置控件居中,设置文本颜色,3.2,常用控件,3.2.2 EditText,控件,EditText,控件是程序用于和用户进行交互的一个重要控件，用户经常会向程序中输入数据，此时就需使用文本编辑控件,EditText,，它允许用户在控件里输入和编辑内容，并且可以在程序中对这些内容进行处理。,设置最大行数,设置提示信息,设置文本颜色、大小、样式,继承自,TextView,的属性,3.2,常用控件,3.2.3 Button,控件,Button,是程序和用户进行交互时必不可少的控件，它的作用是用于响应用户的一系列点击事件。,设置按钮名称,设置唯一标识,设置点击事件,3.2,常用控件,点击事件实现方式,独立类方式,-,指定,Button,的,onClick,属性方式,-,在,Activity,中实现这个,click,方法,android:onClick=click,public void click(View view)btn1.setText(,按钮,1,已经被点击！,);,3.2,常用控件,点击事件实现方式,匿名内部类方式,-,在,Activity,中添加匿名内部类,btn2.setOnClickListener(new View.OnClickListener()Override public void onClick(View v)btn2.setText(,按钮,2,已经被点击！,););,3.2,常用控件,点击事件实现方式,接口方式,-,在当前,Activity,中实现,OnClickListener,接口,-,实现接口方法,-,绑定到,Button,按钮上,public class MainActivity extends AppCompatActivity implements View.OnClickListener,Override public void onClick(View v),btn1.setOnClickListener(this);,3.2,常用控件,3.2.4 ImageView,控件,ImageView,控件用于在界面上展示图片，可以让程序界面变得更加丰富多彩。,设置背景图片,3.2,常用控件,3.2.5 RadioButton,控件,RadioButton,是单选按钮，必须与,RadioGroup,配合使用，提供两个或者多个互斥的选项及。,而,RadioGroup,是单选组合框，可以容纳多个,RadioButton,，实现单选状态。,3.2,常用控件,3.2.5 RadioButton,控件,设置,RadioButton,按钮的排列方向,3.2,常用控件,3.2.5 RadioButton,控件,为,RadioGruop,设置监听事件的方法是,setOnCheckedChangeListener(),，要与,Button,中的,setOnClickListener(),区分开。,rdg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()Override public void onCheckedChanged(RadioGroup group,int checkedId)if(checkedId=R.id.rdb)tv_content.setText(,您选择的性别是：男性,);else tv_content.setText(,您选择的性别是：女性,););,3.2,常用控件,3.2.6 Toast,控件,Toast,也称为消息对话框，它是,Android,系统提供的一种非常友好的轻量级信息提醒机制，在程序中可以使用它将一些短小的信息通知给用户，,Toast,对话框显示在应用程序界面的最上层，显示一段时间后自动消失，不会打断当前操作。由于,Toast,只起到提示作用，因此多用于触发事件的监听中。,创建消息对话框,上下文对象,提示信息,显示时间长短,显示消息,3.2,常用控件,3.2.7 AlertDialog,控件,AlertDialog,可以在当前的界面弹出一个对话框，并且这个对话框是位于应用程序界面的最上层,，具有确定和取消按钮,创建实例并绑定当前窗口,设置图标,设置对话框标题及提示信息,设置确定按钮,设置取消按钮,创建对话框,显示对话框,3.2,常用控件,3.2.8 ProgressDialog,控件,ProgressDialog,会在对话框中显示一个进度条，在应用程序实现耗时操作时（如下载资源、获取网络图片，加载视频等）可以让用户耐心地等待。,创建实例并绑定当前窗口,显示进度条对话框,3.2,常用控件,3.2.9 ProgressBar,控件,ProgressBar,是在,Android UI,界面中显示一个进度条，是一个非常实用的组件，通常用于向用户显示某个耗时操作完成的百分比。,设置水平进度条,设置进度条最大值为,50,3.3,四种常用布局,3.3.1,线性布局,线性布局（,LinearLayout,）在实际开发中使用最多，也相对简单，它会将控件在线性方向上依次排列，排列方式主要有水平和垂直两种方式。,3.3,四种常用布局,通过,android:orientation,属性控制控件的排列方向，,android:orientation,属性有两个值，分别是,vertical,和,horizontal,，其中,vertical,表示线性布局垂直显示，,horizontal,表示线性布局水平显示，而且,horizontal,是线性布局默认的排列方向。,如果控件是水平排列，那么控件的,android:layout_width,属性就只能设置为,wrap_content,如果控件是垂直排列，那么控件的,android:layout_height,属性就不能设置为,match_parent,当控件水平排列时，如果控件未占满一行，会留有空白区域，这样既不美观又浪费空间。此时，可以利用,layout_weight,属性解决这个问题，该属性被称为权重，通过比例调整布局中所有控件的大小。,3.3,四种常用布局,3.3.2,相对布局,相对布局（,RelativeLayout,）在程序开发中也很常见，相较于线性布局按照线性方向排列控件，相对布局就显得随意一些，通过相对定位的方式指定控件位置，控件可以出现在布局中的任何地方，但是必须以其他控件或者父容器为参照物。,3.3,四种常用布局,3.3.2,相对布局,属性,作用,paddingTop,指定布局顶部内边距的距离,paddingBottom,指定布局底部内边距的距离,paddingLeft,指定布局左侧内边距的距离,paddingRight,指定布局右侧内边距的距离,padding,指定布局四周内边距的距离,layout_marginTop,指定当前控件上边界与某控件的距离,layout_marginBottom,指定当前控件下边界与某控件的距离,layout_marginLeft,指定当前控件左边界与某控件的距离,layout_marginRight,指定当前控件右边界与某控件的距离,layout_centerInParent,指定当前控件位于父布局的中心位置,layout_centerVertical,指定当前控件位于父布局的垂直居中位置,layout_centerHorizontal,指定当前控件位于父布局的水平居中位置,layout_above指定当前控件位于某控件的上方,layout_below,指定当前控件位于某控件的下方,layout_toLeftOf,指定当前控件位于某控件的左侧,layout_toRightOf,指定当前控件位于某控件的右侧,layout_alignTop,指定当前控件的上边界与某控件的上边界对齐,layout_alignBottom,指定当前控件的下边界与某控件的下边界对齐,layout_alignLeft,指定当前控件的左边界与某控件的左边界对齐,layout_alignRight,指定当前控件的右边界与某控件的右边界对齐,3.3,四种常用布局,3.3.3,帧布局,帧布局（,FrameLayout,）就非常简单了。它有时也被称为层布局，该布局为每个添加的控件创建一个空白区域（称为一帧），从屏幕左上角按照层次堆叠方式摆放控件，后面的控件覆盖前面的控件，先放入的控件显示在最底层。,帧布局中有两个特殊属性，一个是,android:foregroud,，,用于设置帧布局容器的前景图像，这个图像始终在所有子,控件之上；另外一个是,android:foregroundGravity,，用于,设置前景图像显示位置。,3.3,四种常用布局,3.3.4,表格布局,表格布局（,TableLayout,）通过行和列将界面分为多个单元格，以行列的形式管理子控件，并且需要配合,TableRow,使用,。,每一行为一个,TableRow,的对象，因此,TableRow,的数量决定了表格的行数,。,TableRow,中可以添加子控件，每添加一个为一列，因此表格的列数是由包含最多控件的,TableRow,决定的,。,3.3,四种常用布局,3.3.4,表格布局,3.4,约束布局,约束布局（,ConstraintLayout,）是,Android Studio 2.2,中主要的新增功能之一，它和传统编写界面的方式恰恰相反，,ConstraintLayout,非常适合使用可视化的方式来编写界面，它的用法很多都是对控件进行拖拽，但并不太适合使用,XML,的方式来进行编写。,从,Android Studio 2.3,版本开始新建的,Module,中默认的布局就是,ConstraintLayout,，本书使用的是更高版本的,Android Studio3.2,，所以在初次创建,Moudle,时需要将布局文件中的,ConstraintLayout,修改成自己所需要的布局即可。,3.5 ListView,控件详解,虽然现在手机屏幕变得越来越大，但是毕竟屏幕空间还是有限的，能够一次性在屏幕上显示的内容并不多。,日常使用微信、微博、淘宝等程序时，这些程序通常会在一个页面显示很多个条目，并且每个条目的布局风格都一样，这是通过,Android,中最常用的空间之一,ListView,实现的,。,3.5 ListView,控件详解,3.5.1 ListView,基础用法,在布局中添加,ListView,控件,3.5 ListView,控件详解,在,Activity,中使用自定义数据适配器类对,ListView,进行数据适配,private class MyBaseAdapter extends BaseAdapter Override,public int getCount(),return data.length;Override,public Object getItem(int position),return dataposition;Override,public long getItemId(int position),return position;Override,public View getView(int position,View convertView,ViewGroup parent),TextView tv=tv=new TextView(MainActivity.this);tv.setText(dataposition);tv.setTextSize(40);return tv;,3.5 ListView,控件详解,在,Activity,的,onCreate(),方法中进行数据适配,Override protected void onCreate(Bundle savedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ListView listView=findViewById(R.id.list_view);,MyBaseAdapter adapter=new MyBaseAdapter();listView.setAdapter(adapter);,3.5 ListView,控件详解,3.5.2,ListView,的定制界面,ListView,界面内容要丰富的多,可以对,Item,条目进行定制。,创建,ListView,对应的Item,布局，显示每个,Item,信息，,Item,中左侧放置一个,ImageView,用于显示图标，右侧放置一个,TextView,用于显示文本信息,3.5 ListView,控件详解,3.5.3,ListView,的,优化,有多少个条目就会执行多少次,MyBaseAdapter,类中的,getView(),方法。这样的话如果展示的数据有成千上万条，,getView(),方法也会被执行成千上万次，相应的也会创建成千上万个条目对象，这样不仅会增加内存的消耗，而且当,ListView,快速滚动时，很容易造成内存溢出而导致程序崩溃。,为了防止,数据量过大造成,内存溢出，在使用,ListView时通常会进行优化，其中一种是,复用,convertView,。,3.5 ListView,控件详解,Item 5,Item 4,Item 3,ListView,控件,Item 2,向,上,滑,动,Item 5,Item 4,Item 3,ListView,控件,Item 2,滑出屏幕的,Item 1,滑出屏幕的,Item 1,复用,Item 1,加载新内容,Item 3,Item 4,Item 5,复用的,Item 1,滑出屏幕的,Item 2,3.5 ListView,控件详解,3.5.3,ListView,的,优化,在加载,Item,布局时，会使用,findViewById(),方法找到Item,布局中的各个控件，在每一次加载新的,Item,数据时都会进行控件寻找，这样也会产生耗时操作。,为了进一步的优化,ListView,减少耗时操作，可以将要加载的子,View,放在,ViewHolder,类中，当第一次创建,convertView,时将这些控件找出，在第二次重用,convertView,时就可直接通过,convertView,中的,getTag(),方法获得这些控件。,3.5 ListView,控件详解,3.5.4,ListView,的,点击事件,ListView,也是有点击事件的,listView.,setOnItemClickListener,(new AdapterView.OnItemClickListener()Override public void onItemClick(AdapterView parent,View view,int position,long id)Toast.makeText(MainActivity.this,您点击了：,+dataposition,Toast.LENGTH_SHORT).show(););,3.6,强大的滚动控件,RecylerView,从,Android 5.0,开始，谷歌公司推出了一个增强版的,ListView,新控件,RecylerView,，它不仅拥有与,ListView,相同的效果，而且对,ListView,中的不足之处进行了优化。,3.6.1,如何添加,RecylerView,控件,打开,app/bulid.gradle,文件，在,dependencies,闭包中添加,dependencies implementation fileTree(dir:libs,include:*.jar)implementation com.android.support:appcompat-v7:28.0.0,implementation com.android.support:recyclerview-v7:28.0.0,implementation com.android.support.constraint:constraint-layout:1.1.3 testImplementation junit:junit:4.12 androidTestImplementation com.android.support.test:runner:1.0.2 androidTestImplementation com.android.support.test.espresso:espresso-core:3.0.2,3.6,强大的滚动控件,RecylerView,在,activity_main.xml,中添加,recyclerview,控件,3.6,强大的滚动控件,RecylerView,3.6.2 RecyclerView,的基础用法,在,Activity,中进行编写,/,用于指定,recyclerView,的布局方式，可以实现和,ListView,类似的效果,LinearLayoutManager linearLayoutManager=,new LinearLayoutManager(LinearLayoutManager.VERTICAL);,recyclerView.setLayoutManager(linearLayoutManager);,MyBaseAdapter adapter=new MyBaseAdapter();,/,设置数据适配器,recyclerView.setAdapter(adapter);,3.6,强大的滚动控件,RecylerView,3.6.3 RecyclerView,的,点击事件,RecyclerView,的,Item,布局中有两个控件，当用户分别点击两个控件时会产生不同的事件,holder.textView.setOnClickListener(new View.OnClickListener()Override public void onClick(View v)int position=holder.getAdapterPosition();Toast.makeText(getApplicationContext(),您点击了文字,+dataposition,Toast.LENGTH_SHORT).show(););holder.imageView.setOnClickListener(new View.OnClickListener()Override public void onClick(View v)int position=holder.getAdapterPosition();Toast.makeText(getApplicationContext(),您选择了图,+dataposition,Toast.LENGTH_SHORT).show(););,3.7,小结,本章主要介绍了,Android UI,基础，包括基本布局的用法、几种常用的对话框、,ListView,以及,RecylerView,的使用，并通过相关案例将这些知识融合在一起。,大连理工大学出版社,THANKS!,