美文网首页
关于微信页面的制作

关于微信页面的制作

作者: 宝塔山上的猫 | 来源:发表于2016-01-22 17:43 被阅读621次

    学习了一下安卓开发的技术,然后尝试着做一个简单的展示页面,就是关于微信这个页面,如下面几张图

    这个页面制作的难度也不大,但是只是有一些小细节需要注意一下而已。

    我是用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);

    这里贡献出第二步的代码:

    第二步代码

    大致就是如此

    最后附上完成的草图

    关于微信草图

    相关文章

      网友评论

          本文标题:关于微信页面的制作

          本文链接:https://www.haomeiwen.com/subject/qofrkttx.html