附:整个项目的截图。
第一步:先要编写页面布局文件。(定义三个线性布局,之后用属性include嵌入头部,中间部,底部不同的布局文件,这样做的好处是可以类似实现MVC模式)
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical"> 6 7 <LinearLayout 8 android:layout_width="match_parent" 9 android:layout_height="50dp"> 10 11 <include layout="@layout/head"/> 12 13 </LinearLayout> 14 15 <LinearLayout 16 android:layout_width="match_parent" 17 android:layout_height="wrap_content" 18 android:layout_weight="1" > 19 20 <include layout="@layout/listview" /> 21 22 </LinearLayout> 23 24 <LinearLayout 25 android:layout_width="match_parent" 26 android: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="@drawable/fdj" android:layout_gravity="center" android:layout_marginRight="8dp" /> <!--十字架图片 --> <ImageView android:layout_width="40dp" android:layout_height="33dp" android:src="@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="@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>
这样的话就可以实现微信的页面的布局。