Android-微信界面

附:整个项目的截图。

Android-微信界面     Android-微信界面

 

 

第一步:先要编写页面布局文件。(定义三个线性布局,之后用属性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文件的引用:

Android-微信界面

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>

 

这样的话就可以实现微信的页面的布局。  

 

Android-微信界面

上一篇:分分钟制作微信朋友圈页面


下一篇:Android——微信界面(简易版)