学习了一下安卓开发的技术,然后尝试着做一个简单的展示页面,就是关于微信这个页面,如下面几张图
这个页面制作的难度也不大,但是只是有一些小细节需要注意一下而已。
我是用RelativeLayout相对布局来做的,虽然从微信5.0反编译的版本来看,他们使用LinearLayout布局做的,我个人觉得区别不大。
问题1:底部内容与ListView的内容重叠
哗啦啦的,一下子就把这个布局的xml页面写好了,在真机上运行也没什么问题,但是突然发现在我的虚拟机上运行有差错,虚拟机上的版权声明居然与ListView的文字重叠了!!
版权声明与ListView控件内容重合!经过思考和问人,发现是版权声明这部分的文字是与父视图的底部保持一致的(代码:android:layout_alignParentBottom="true"),也就是说整个界面的底部在哪里,这个版权声明就在底部的上面,马上调整了一下,将相对布局的父视图设置为ListView(代码:android:layout_below="@+id/text_about_weixin"),这样版权声明就永远只在ListView这个控件的下面了。
(值得注意的是,在布局中每个控件之间应该有一定的联系,如果缺少联系就会造成现在这种结果,因为版权声明这部分文字与其他控件没联系,是独立依赖于父视图的。同时布局最好按照从左到右,从上到下布局,这样比较符合布局习惯)
再次在真机上运行,没问题,但是虚拟机上又出问题了!这次是ListView中有好几行字,直接排到了底部,这样版权声明在屏幕下面,拉不上来了,很奇怪,这是为什么呢?
版权声明不见啦!!!再次折腾了好几个小时,终于发现原来是屏幕大小惹得祸!
在安卓设计中,每个控件都能设置高度,一般都是将其设置为所需控件的高度,而在这里,ListView中有6行文字,它们的行高加起来,直接占据了屏幕中的大部分空间。
因此解决方法有两个:
方法1、更换显示屏,之前在虚拟机上运行的显示屏是960*640的大小,比例不恰当,因此整个页面就缺少了一截。当我将虚拟机显示屏更换为1280*720像素的时候,问题马上就解决了。
方法2:就像微信一样将整个页面嵌套进ScorllView视图中,这样整个页面就能够向下滑动,当有一部分页面看不到的时候,向下滑动就能看到剩余的内容了。值得要注意的是ScorllView视图中只能容纳一个控件,因此将页面中的按键、图片、文字全部塞进一个视图中,如RelativeLayout、LinearLayout视图中就可以了。
问题2:使用ScorllView后ListView只显示一行
ListView只显示一行但是用第二种方法,我发现又出了一个问题,就是ListView在屏幕中只显示一行,但是ListView却可以滑动,这是个奇怪的问题。查看微信的源代码,他们是将ListView整个控件的高度设置为300dp,刚好将ListView中的六行文字包括在里面解决的。不知道原因,就照搬吧。
用ScrollView的上面一截 用ScrollView的下面一截终于一切都解决了!!欢呼~~~
下面是关于ListView的简单使用
另外,使用ListView除了在要在Layout视图的xml文件中添加控件之外,还要在Activity中添加代码,在这个简单项目中就是,在MainActivity.java中添加代码。
首先添加并初始化成员变量,创建一个String类型的数组,这是要放在ListView中的内容。
private String[] data= {"去评分","功能介绍","系统通知","帮助与反馈","举报与投诉","检查新版本",};
然后在onCreate中添加一个String泛型的适配器ArrayAdapter<String>,它定义了这个适配器在本次活动中使用,并且将初始化的字符串放在这个适配器里面,在这里就是变量data,代码如下:
ArrayAdapter adapter = new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1, data)
然后创建一个ListView变量绑定ListView的Id,意思是这个变量的所有行为都与这个ListView有关
ListView listView = (ListView) findViewById(R.id.text_about_weixin);
最后就是将适配器里面的内容塞进去listView这个空间里面~~
listView.setAdapter(adapter);
稍微复杂的ListView使用
首先在Layout视图的xml文件中添加ListView控件。
第二,在创建一个xml的视图文件,这个视图文件要做的事是要将图片、文本变成一个模块,塞进ListView的控件之中,将图片和文本变成你想要的的排版方式,
第三,创建一个Adapter适配器的class,继承自BaseAdapter,然后接入Adapter的方法,并构造适配器的函数。然后在getView方法中绑定在第二步中图片、文本的id,并且将你所需要呈现出来的文字、图片设置出来就可以了。
第四,在onCreate中添加一个String泛型的适配器ArrayAdapter,它定义了这个适配器在本次活动中使用,并且将初始化的字符串放在这个适配器里面,在这里就是变量data。代码如下:
mListView= (ListView) findViewById(R.id.listview_about_weixin);
AboutWeiXinAdapter aboutWeiXinAdapter =newAboutWeiXinAdapter(MainActivity.this);
mListView.setAdapter(aboutWeiXinAdapter);
这里贡献出第二步的代码:
第二步代码大致就是如此
最后附上完成的草图
关于微信草图
网友评论