Android-微信界面 _Android

春衣少年当酒歌，起舞四顾以笑和。这篇文章主要讲述Android-微信界面相关的知识，希望能为你提供帮助。
附：整个项目的截图。

文章图片

文章图片

第一步：先要编写页面布局文件。(定义三个线性布局，之后用属性include嵌入头部，中间部，底部不同的布局文件，这样做的好处是可以类似实现MVC模式)

1 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2xmlns:tools="http://schemas.android.com/tools" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6 7< LinearLayout 8android:layout_width="match_parent" 9android:layout_height="50dp"> 10 11< include layout="@layout/head"/> 12 13< /LinearLayout> 14 15< LinearLayout 16android:layout_width="match_parent" 17android:layout_height="wrap_content" 18android:layout_weight="1" > 19 20< include layout="@layout/listview" /> 21 22< /LinearLayout> 23 24< LinearLayout 25android:layout_width="match_parent" 26android:layout_height="wrap_content"> 27 28< include layout="@layout/bottom"/> 29 30< /LinearLayout> 31 32 < /LinearLayout>

第二步：分别编写头部，中间部，底部的布局文件。
头部：

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > < LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="#21292c" android:orientation="horizontal" > < !--微信--> < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/weixiin" android:textSize="18sp" android:textColor="#ffffff" android:padding="15dp" android:layout_gravity="center" /> < !--给一个空白的textview来填充中间的部分。--> < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" /> < !--放大镜图片--> < ImageView android:layout_width="40dp" android:layout_height="27dp" android:src="https://www.songbingjia.com/android/@drawable/fdj" android:layout_gravity="center" android:layout_marginRight="8dp" /> < !--十字架图片--> < ImageView android:layout_width="40dp" android:layout_height="33dp" android:src="https://www.songbingjia.com/android/@drawable/barbuttonicon_add" android:layout_gravity="center" android:layout_marginRight="10dp" /> < /LinearLayout> < /LinearLayout>

资源文件的引用：
value资源文件中的style.xml文件的引用：

文章图片

value资源文件中的string.xml资源文件：

< ?xml version="1.0" encoding="utf-8"?> < resources> < string name="app_name"> 微信< /string> < string name="hello_world"> Hello world!< /string> < string name="action_settings"> Settings< /string> < string name="weixiin"> 微信< /string> < string name="weixin"> 微信< /string> < string name="tongxunlu"> 通讯录< /string> < string name="faxian"> 发现< /string> < string name="wo"> 我< /string> < /resources>

value资源文件中的color.xml资源文件：

< ?xml version="1.0" encoding="utf-8"?> < resources> < color name="grey"> #999999< /color> < color name="green"> #07bb07< /color> < /resources>

图片资源文件中的tab_color.xml文件的编写：

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" > < !--Android中的Selector主要是用来改变ListView和Button控件的默认背景。--> < item android:state_checked="true" android:color="@color/green" > < /item> < item android:state_checked="false" android:color="@color/grey" > < /item> < /selector>

图片资源文件中的tab_weixin.xml文件的编写：

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" > < !--Android中的Selector主要是用来改变ListView和Button控件的默认背景。--> < item android:state_checked="true" android:drawable="@drawable/tabbar_mainframehl" > < /item> < item android:state_checked="false" android:drawable="@drawable/tabbar_mainframe" > < /item> < /selector>

图片资源文件中的tab_faxian.xml文件的编写：

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" > < !--Android中的Selector主要是用来改变ListView和Button控件的默认背景。--> < item android:state_checked="true" android:drawable="@drawable/tabbar_discoverhl" > < /item> < item android:state_checked="false" android:drawable="@drawable/tabbar_discover" > < /item> < /selector>

图片资源文件中的tab_tongxunlu.xml文件的编写：

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" > < !--Android中的Selector主要是用来改变ListView和Button控件的默认背景。--> < item android:state_checked="true" android:drawable="@drawable/tabbar_contacts_hl" > < /item> < item android:state_checked="false" android:drawable="@drawable/tabbar_contacts"> < /item> < /selector>

图片资源文件中的tab_wo.xml文件的编写：

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android" > < !--Android中的Selector主要是用来改变ListView和Button控件的默认背景。--> < item android:state_checked="true" android:drawable="@drawable/tabbar_mehl"> < /item> < item android:state_checked="false" android:drawable="@drawable/tabbar_me" > < /item> < /selector>

底部xml文件的编写：
bottom.xml

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > < RadioGroup android:id="@+id/radioGroup1" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@drawable/group_buton_nomal"> //android:drawableTop引用图片资源文件中的xml文件资源< RadioButton android:id="@+id/radio0" style="@style/radiostyle" android:checked="true" android:text="@string/weixin" android:drawableTop="@drawable/tab_weixin" /> < RadioButton android:id="@+id/radio1"style="@style/radioStyle" android:text="@string/tongxunlu" android:drawableTop="@drawable/tab_tongxunlu" /> < RadioButton android:id="@+id/radio2" style="@style/radioStyle" android:text="@string/faxian" android:drawableTop="@drawable/tab_faxian" /> < RadioButton android:id="@+id/radio3" style="@style/radioStyle"android:text="@string/wo" android:drawableTop="@drawable/tab_wo" /> < /RadioGroup> < /LinearLayout>

中间部的编写：
listview.xml：

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > < !-- 在android开发中ListView是比较常用的组件，它以列表的形式展示具体内容，并且能够根据数据的长度自适应显示。 --> < ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:divider="#dddddd" android:dividerHeight="1dp"> < /ListView> < /LinearLayout>

在中间部中存放一些列表的数据文件：
MainActivity.java:

package com.huanglinbin.weixintext; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; import android.widget.RadioGroup; import android.widget.SimpleAdapter; public class MainActivity extends Activity { //私有化Listview的控件。 private ListView listView; //私有化ListView的适配器。 private SimpleAdapter simpleAdapter; //私有化list集合。 private List< Map< String,Object> > list = new ArrayList< Map< String,Object> > (); //私有化radiogub的控件。 private RadioGroup radioGroup; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //先要找到那两个控件。 listView = (ListView) findViewById(R.id.listView1); radioGroup = (RadioGroup) findViewById(R.id.radioGroup1); //把数据源赋值到集合里面。 list = getDate(); simpleAdapter = new SimpleAdapter( this,//上下问对象。 list, //数据源（也就是从数据库里面取出来的数据存放到这来，之后就循环输出出来） R.layout.item,//页面输出的模板。 new String[]{"pic","text1","text2","text3"}, //这个相当于实体类中的属性，把这些属性存放到数组里面。 new int[]{R.id.pic,R.id.text1,R.id.text2,R.id.text3} //这个相对于句柄，通过句柄来找到模板中的数据源。 ); //把这个适配器加入到listview的控件中去。 listView.setAdapter(simpleAdapter); }//定义数据源。 private List< Map< String,Object> > getDate(){ //定义一个循环，把数据循环输出出来。 for(int i=0; i< 5; i++){ //定义一个map集合，把集合加入到map的集合里面。 Map< String,Object> map = new HashMap< String, Object> (); map.put("pic",R.drawable.xms); map.put("text1", "小魔神"); map.put("text2", "Android一班老师"); map.put("text3", "昨天"); //把map集合加到list集合里面去。 list.add(map); }return list; }}

这里要定义一个页面输出是的数据模板（相当于把实体类存放到不同的textview中之后保存到listview中去输出到页面中）：
item.xml:

< ?xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > < ImageView android:id="@+id/pic" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginTop="5dp" android:src="https://www.songbingjia.com/android/@drawable/xms" android:layout_marginBottom="5dp"/> < TextView android:id="@+id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_toRightOf="@+id/pic"android:textSize="16sp" android:textColor="#333" android:layout_marginTop="10dp"/> < TextView android:id="@+id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/text1" android:layout_below="@+id/text1"android:textColor="#666" android:textSize="14sp"/> < TextView android:id="@+id/text3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/text2" android:layout_alignParentRight="true"android:textColor="#666" android:textSize="12sp" android:layout_marginRight="5dp"/> < /RelativeLayout>

这样的话就可以实现微信的页面的布局。
【Android-微信界面】