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文件的引用：

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>

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

时间： 2024-10-17 16:56:46

Android-微信界面的相关文章

Android微信界面的设计

Android微信界面的设计 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51777792 微信6.0主界面: (1)整体采用垂直的LinearLayout线性布局 (2)最上面是ActionBar,搜索框SearchView,Overflow(含有4个单选菜单项) (3)中间使用ViewPager+Fragment组件,这样可实现左右滑动的界面. (4)最下面是水平的LinearLayout线性布局:含有4个自定义

Android——微信界面（简易版）

前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面 首先,我们新建一个weixin.xml的linnerlayout布局 我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部.那么我们就按照这个来先建一个页面 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="

Android ActionBar仿微信界面

ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的ActionProvider时候要注意引入的包一定是android.view.ActionProvider,不能是android.support.v4.view.ActionProvider 2),切换的Title可以参考之前之前一篇文章利用RadioGroup来做,这里是利用一个开源的项目PagerS

Android菜鸟成长记8 -- 布局实践（微信界面的编写）

前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面 首先,我们新建一个weixin.xml的linnerlayout布局 我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部.那么我们就按照这个来先建一个页面 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="

【转】android 欢迎界面翻页成效，仿微信第一次登陆介绍翻页界面

android 欢迎界面翻页效果,仿微信第一次登陆介绍翻页界面 本实例做的相对比较简单主要是对翻页控件的使用,有时候想要做一些功能是主要是先了解下是否有现成的控件可以使用,做起来比较简单不用费太大的劲去找别的资料,或者别的办法设计.有空多读读android API了解熟悉了做什么都比较容易.(注意:ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入“android-support-v4.jar” 如果sdk是4.0及以上的

转-Android微信支付

http://blog.fangjie.info/android微信支付/ Android微信支付 2014-08-09 一.使用微信官方的提供的demo里的appid等 1.微信接口上手指南:(从“移动应用开发”->“Android接入指南”)建议,先把官方这篇文章看完 2.微信支付接口(从“移动应用开发”->“Android开发手册” )(下载官方demohttps://res.wx.qq.com/paymchres/zh_CN/htmledition/download/wxpay/app

Fragment的微信界面源代码

完成上述的网页,并且能够左右切换 注: 一下的带代码只能够在Android的3.0以上的版本中使用. 这是java文件的源代码 /* *作者浅淡~夏天 *Time:2014/12/14 *微信界面 */ package com.android.xiong.fragmentnavigation2; import android.app.Activity; import android.app.Fragment; import android.app.FragmentManager; import 

Android studio界面相关设置

Android studio界面相关设置 原文出自 http://www.cnblogs.com/justinzhang/p/4274839.html 用惯了emacs的操作方式,每当使用一款新的编辑器的时候,第一个想到的就是这个工具有没有emacs的快捷键,Android studio也是一样的. 1. Android studio设置emacs的方式如下,点击File->Settings 选择其中的keymap,在keymap中选择emacs,这样就成功的设置好了emacs的操作模式: 2.

设计师可以写Android应用界面吗？

============问题描述============ 我是一名设计师,每次设计完app后把切好的图和效果图给开发后,开发们都要花大量时间对着效果图把界面效果写出来,弄好界面后才是开发功能. 而且开发写出来的界面和设计给的效果图经常会有差别,还需要反复修改. 我想问的是: 设计师是否可以直接把界面写好,再交给开发直接做功能就行呢?如果可以,需要设计师有编程的基础吗? 还想知道大公司里,设计与开发之间是怎么分工合作的? ============解决方案1============ 是可以的,但是需

Android 遍历界面控件

//遍历界面上的控件 fubin.pan LinearLayout sLinerLayout = (LinearLayout)findViewById(R.id.layout_scr); for (int i = 0; i < sLinerLayout.getChildCount(); i++) { View v=sLinerLayout.getChildAt(i); if ( v instanceof RadioGroup){ RadioGroup mRadioGroup = (RadioGr