简介
笔记记载的内容有:常用的几大界面和布局,并仿写一个简单的聊天界面。
布局介绍
LinearLayout
该布局内元素都是线性排列,如果在android:orientation="vertical"
,则所有元素都是纵向排列的。默认值是horizontial,即横向排列。横向排列时,内部元素的layout_width就不能设置为match_parent,因为该值会使得元素占满一行;由于元素的横向长度不确定,所以此时元素的对齐方式layout_gravity只能为垂直对齐。
对于android:layout_gravity
和android:layout
,前者用于指定控件在布局中的对齐方式,后者为控件内的文字等在控件中的对齐方式。
LinearLayout里也有一个重要属性android:layout_weight
,可以解决手机屏幕的适配问题,LinearLayout会将布局里的所有元素的anroid:layout_weight
的值相加,然后根据每个元素所占比例和布局的orientation排列进行水平或者垂直切分,如果不设置anroid:layout_weight
值的控件和使用该属性的控件混合使用,使用wrap_content,则使用wrap_content会单独计算,其余的等比切分。
RelativeLayout
相对布局内的控件排列比较随意,相对定位顾名思义会有一个参照定位点,例如android:layout_alignParentTop
,android:layout_alignParentLeft
等分别表示相对父布局的顶部,相对父布局的右边,或者android:layout_above=@id/button
,android:layout_toRightOf=@id/button
分别表示在id为button的的上方,在id为button的右边。
FrameLayout
帧布局,这种布局默认摆放在布局的左上角。
PercentLayout
百分比布局是新增的布局,需要在app的build.gradle文件的dependencies闭包下添加compile 'com.android.support.percent:28.0.0'
,此时在布局文件里就可以使用如下方式来使用了:
1 | <android.support.percent.PercentFrameLayout |
自定义控件
环境:
Android Studio 3.4
Windows 10
调试机:一加 6 Android 9
app/build.gradle如下:
1 | apply plugin: 'com.android.application' |
模仿ios做一个具有返回和编辑按钮的标题栏,首先新建一个标题栏的布局文件,并在res下新建一个drawable-xhdpi目录,然后将需要的title_bg.png,back_bg.png,edit_bg.png复制进去,布局如下:
1 |
|
dp一般用来表示空间大小和间距。然后新建一个类去实现标题栏的一些点击功能:
1 | public class TitleLayout extends LinearLayout { |
最后需要在主活动里引入自定义布局:
1 |
|
这样就实现了返回键销毁当前Activity,编辑键能够打印文字。
列表
ListView
首先把需要展示的水果图复制到drawable-xhdpi目录里,并创建listview的布局文件activity_list_view.xml:
1 |
|
新建一个实体类分别表示水果名和图片id:
1 | public class Fruit { |
添加一个适配器用于进行水果名和图片的展示:
1 | public class FruitAdapter extends ArrayAdapter<Fruit> { |
界面展示代码如下:
1 | public class ListViewActivity extends AppCompatActivity { |
效果如图:
RecyclerView
RecyclerView是一个效率更高,并且功能更加强大的滚动控件,需要在app/build.gradle的dependencies闭包里添加支持:
1 | implementation 'com.android.support:recyclerview-v7:27.1.1' |
注意:在API 26以后,build.gradle依赖里的compile改成了implementation,testCompile改成了testImplementation。同时,如果想要使用lombok的时候,android闭包下的defaultConfig里还需要加入
1
2 > javaCompileOptions { annotationProcessorOptions { includeCompileClasspath = true } }
>
首先创建一个简单的纵向布局activity_cycler_view.xml:
1 |
|
并创建与之对应的活动:
1 | public class CyclerViewActitivy extends AppCompatActivity { |
创建RecyclerView中每一行数据中,文字和图片的布局为水平:
1 |
|
并且创建对应的数据适配器:
1 | public class FruitCyclerAdapter extends RecyclerView.Adapter<FruitCyclerAdapter.ViewHolder> { |
运行软件效果如图:
点击图片和文字能够输出不同的文字,ListView实现方式则是直接注册的OnItemClickListener,无法对每一个item里的每一个元素做出响应,虽然也可以实现,但是比较复杂。相比之下RecylerView对于每一个item的操作都是注册到view上的。
RecyclerView还可以实现横向滚动的列表,此时每一个item里面的元素就是垂直摆放了,调整list_item.xml的代码:
1 |
|
使用center_vertical将图片和文字都水平居中,并且使用layout_marginTop让文字和图片之间保持10dp的间距。然后修改CyclerViewActivity里的代码,调整LinearLayoutManager里的orientation属性为水平:
1 | LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); |
效果如下:
还可以实现瀑布滚动效果,首先调整list_item.xml:
1 |
|
每一项布局设定为match_parent用于自动适配,layout_margin保证每个水果之间有一定间距,文本用于居左对齐,因为待会要进行名称改造,名称比较长时就能看到瀑布的效果了。
修改活动类里的代码:
1 | RecyclerView recyclerView = findViewById(R.id.cycler_view); |
初始化数据时生成随机长度水果名称:
1 | private void initFruitList(){ |
效果如下:
界面最佳实践
环境:
Android Studio 3.4
Windows 10
调试机:一加 6 Android 9
创建一个项目,其中app/build.gradle如下:
1 | apply plugin: 'com.android.application' |
在android studio里,可以对某个png右击,然后点击creat 9-patch file,即可以对图片进行定制,例如聊天气泡是可以随着文字的增多而进行拉伸的,如图:
其中四周的黑色边即代表需要拉伸的部分,然后将该图片放到res/drawable-xhdpi目录里。
创建聊天界面布局:
1 |
|
每一条聊天消息的布局:
1 |
|
其中title-layout就是上节中有回退和编辑按钮的标题栏,新建一个基类活动用于隐藏系统自带标题栏,以后其他类都可以继承这个基类。
1 | public class BaseActivity extends AppCompatActivity { |
消息实体类:
1 | public class Msg { |
创建工具类判断是否是空字符串:
1 | public class StringUtils { |
创建一个主活动:
1 | public class MainActivity extends BaseActivity { |
效果如图: