android布局实践——模仿微信主界面

这是目前微信6.0版本的主界面

先来分析一波：

　　1.（top.xml）界面头部有一个微信（6）消息提醒一个搜索图标一个更多的的图标+，中间还有一段空白，我们可以弄两个textView（其中一个权重给会自动占其余空白部分），和两个图片按钮

　　2.(bottom.xml)界面底部可以看到是由4个相同的部分组成，这里我们可以先弄个单选群（ <RadioGroup>）给4个包起来，然后再分为4个单选按钮控件（radioButton）

　　3.(wx.xml)然后我们再建一个wx.xml把前面两个包含进来，有上面图片可看出界面分三部分，所以我们zai'wx.xml新建三个LinearLayout分别显示头部，中部和底部

　　4.底部4个控件当我们点击其中一个会变成绿色，其余为白色，这里我们可以在drawable中添加选择器分别设置（tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml）。

代码如下:

　　1.top.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="50dp"
 5     android:orientation="horizontal"
 6     android:background="#21292c">
 7
 8     <TextView
 9         android:id="@+id/textView1"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:text="微信"
13         android:textColor="#ffffff"
14         android:textSize="20sp"
15         android:layout_gravity="center"
16         android:padding="10dp"/>
17
18     <TextView
19         android:layout_width="wrap_content"
20         android:layout_height="wrap_content"
21         android:layout_weight="1" />
22
23     <LinearLayout
24         android:layout_width="wrap_content"
25         android:layout_height="match_parent"
26         android:gravity="center">
27
28         <ImageView
29             android:id="@+id/imageView2"
30             android:layout_width="40dp"
31             android:layout_height="30dp"
32             android:src="@drawable/actionbar_search_icon"
33             android:layout_marginRight="10dp"/>
34
35         <ImageView
36             android:id="@+id/imageView1"
37             android:layout_width="40dp"
38             android:layout_height="30dp"
39             android:src="@drawable/actionbar_add_icon" />
40
41     </LinearLayout>
42
43 </LinearLayout>

2.bottom.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="horizontal" >
 6
 7     <RadioGroup
 8         android:id="@+id/radioGroup1"
 9         android:layout_width="match_parent"
10         android:layout_height="50dp"
11         padding
12         android:orientation="horizontal"
13         android:background="@drawable/back"
14         android:gravity="center">
15
16         <RadioButton
17             android:id="@+id/radio0"
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:checked="true"
21             android:text="@string/wx"
22                style="@style/radioStyle"
23                android:drawableTop="@drawable/tab_wx"/>    注：在后面有介绍到
24
25         <RadioButton
26             android:id="@+id/radio1"
27             style="@style/radioStyle"
28             android:layout_width="wrap_content"
29             android:layout_height="wrap_content"
30             android:drawableTop="@drawable/tab_lxr"
31             android:text="@string/lxr" />
32
33         <RadioButton
34             android:id="@+id/radio2"
35             android:layout_width="wrap_content"
36             android:layout_height="wrap_content"
37             android:text="@string/fx"
38                style="@style/radioStyle"
39                android:drawableTop="@drawable/tab_fx"/>
40
41          <RadioButton
42             android:id="@+id/radio3"
43             android:layout_width="wrap_content"
44             android:layout_height="wrap_content"
45             android:text="@string/wo"
46                style="@style/radioStyle"
47                android:drawableTop="@drawable/tab_wo"/>
48     </RadioGroup>
49
50 </LinearLayout>

3.wx.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6     <!-- head -->
 7     <LinearLayout
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content" >
10         <include layout="@layout/top"/>
11     </LinearLayout>
12
13     <!-- 中间 -->
14     <LinearLayout
15         android:layout_width="match_parent"
16         android:layout_height="wrap_content"
17         android:layout_weight="1">
18     </LinearLayout>
19
20     <!-- 底部 -->
21     <LinearLayout
22         android:layout_width="match_parent"
23         android:layout_height="wrap_content" >
24         <include layout="@layout/bottom"/>
25     </LinearLayout>
26
27 </LinearLayout>

4.tab_wx.xml,tab_lxr.xml,tab_fx.xml,tab_wo.xml 和text_color.xml

　　前面4个文件都差不多所以只展示一个（分别为底部那四个图片）

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3      <item android:state_checked="true"
4         android:drawable="@drawable/wo1"></item>
5     <item
6         android:drawable="@drawable/wo"></item>
7
8 </selector>

text_color.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3     <item android:state_checked="true"
4         android:color="#07bb07"></item>
5     <item
6         android:color="#999999"></item>
7
8 </selector>

这个text 如何用的呢？

　　找到values文件下的styles.xml加入下面代码

1  <style name="radioStyle">
2         <item name="android:button">@null</item>
3         <item name="android:layout_weight">1</item>
4         <item name="android:TextSize">15sp</item>
5         <item name="android:gravity">center</item>
6         <item name="android:textColor">@drawable/text_color</item>
7     </style>

整体效果图为

转载于:https://www.cnblogs.com/mark0812/p/6097751.html

android布局实践——模仿微信主界面相关推荐

Android之简单模仿微信聊天界面
Android之模仿微信聊天界面运行效果图: 代码如下: MainActivity.java package com.example.chatdemo;import android.app.Acti ...
Android jquery mobile 仿微信主界面
效果图: 地址:http://pan.baidu.com/s/1eSupF6E 总结:只要熟悉Jquery,很快就能上手,界面效果和原生的还是有些区别,做简单的页面还是可以的. page_ ...
Android ActionBar应用实战，高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
android 仿微信demo————微信主界面实现
android 仿微信demo----微信启动界面实现 android 仿微信demo----注册功能实现(移动端) android 仿微信demo----注册功能实现(服务端) android 仿微 ...
慕课网高仿微信主界面完整代码
微信主界面完整代码 Fragment+ViewPager实现目录前言一.项目结构二.使用步骤前言使用了ViewPager和Fragment的用法.支持滑屏显示界面和点击下标切换界面 . 一 ...
android微信风格,Android开发实现模仿微信小窗口功能【Dialog对话框风格窗口】
本文实例讲述了Android开发实现模仿微信小窗口功能.分享给大家供大家参考,具体如下: 运用方法: 将显示窗口的风格设置为对话框风格即可具体效果: 具体实现: 首先我们先定义布局文件: andr ...
android+主界面所有应用程序图标添加统一背景主题,Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题...
当前位置:我的异常网» Android » Android 4.0替Launcher主界面所有应用程序图标添加 Android 4.0替Launcher主界面所有应用程序图标添加统一背景主题 www. ...
android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
android仿微信进度条,Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是 ...

android布局实践——模仿微信主界面

android布局实践——模仿微信主界面相关推荐

最新文章

热门文章