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

  前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面

  首先,我们新建一个weixin.xml的linnerlayout布局

  我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部。那么我们就按照这个来先建一个页面

 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     </LinearLayout>
11
12     <!-- 中间 -->
13     <LinearLayout
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16     </LinearLayout>
17
18     <!-- 底部 -->
19     <LinearLayout
20         android:layout_width="match_parent"
21         android:layout_height="wrap_content" >
22     </LinearLayout>
23
24 </LinearLayout>

效果如下:

  这是完成后的显示

  

那么要怎么实现到这个效果,

1.先创建一个标题栏的layout文件

 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="@string/weixin"
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_marginTop="20dp"
21         android:layout_height="30dp"
22         android:layout_weight="1"
23         android:gravity="bottom" />
24
25     <LinearLayout
26         android:layout_width="wrap_content"
27         android:layout_height="match_parent"
28         android:gravity="bottom">
29
30         <ImageView
31             android:id="@+id/imageView2"
32             android:layout_width="40dp"
33             android:layout_height="30dp"
34             android:src="@drawable/fdj"
35             android:layout_marginRight="10dp"/>
36
37         <ImageView
38             android:id="@+id/imageView1"
39             android:layout_width="40dp"
40             android:layout_height="30dp"
41             android:src="@drawable/barbuttonicon_add" />
42
43     </LinearLayout>
44
45 </LinearLayout>

然后我们在创建一个底部的文件的

 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="60dp"
11         android:orientation="horizontal"
12         android:background="@drawable/group_buton_nomal"
13         android:gravity="center">
14
15         <RadioButton
16             android:id="@+id/radio0"
17             android:layout_width="wrap_content"
18             android:layout_height="wrap_content"
19             android:checked="true"
20             android:text="@string/weixin"
21                style="@style/radioStyle"
22                android:drawableTop="@drawable/tab_weixin"/>
23
24         <RadioButton
25             android:id="@+id/radio1"
26             android:layout_width="wrap_content"
27             android:layout_height="wrap_content"
28             android:text="@string/addressList"
29                style="@style/radioStyle"
30                android:drawableTop="@drawable/tab_address"/>
31
32         <RadioButton
33             android:id="@+id/radio2"
34             android:layout_width="wrap_content"
35             android:layout_height="wrap_content"
36             android:text="@string/find"
37                style="@style/radioStyle"
38                android:drawableTop="@drawable/tab_find"/>
39
40          <RadioButton
41             android:id="@+id/radio3"
42             android:layout_width="wrap_content"
43             android:layout_height="wrap_content"
44             android:text="@string/set"
45                style="@style/radioStyle"
46                android:drawableTop="@drawable/tab_set"/>
47     </RadioGroup>
48
49 </LinearLayout>

底部文件采用的是单选按钮组,这里我就不过多解释了,跟HTML的单选按钮类似

上面的用到的style是自己设计的一个按钮样式,放在style.xml的文件里,具体代码如下

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

为了让让底部的显示效果更加的接近我们日常使用的微信,我们对按钮做了一个判断,就是使用selector(不懂的请看下一章)

代码如下:

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/tabbar_contacts_hl"></item>
5     <item
6         android:drawable="@drawable/tabbar_contacts"></item>
7
8 </selector>

就是通过焦点是否在该按钮上,在的化显示有颜色的图片,不在的化显示没颜色的。对其他桑按钮同样的操作,代码一样,只是把图片换一下就OK了。

还有文字也进行了相同的操作

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/tabbar_contacts_hl"></item>
5     <item
6         android:drawable="@drawable/tabbar_contacts"></item>
7
8 </selector>

好了,一切准备,就绪,我们只需要将一切和起来就可以了。我们可以在weixin.xml通过include的标签把这些包含进来

<?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" >
    <!-- head -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <include layout="@layout/head"/>
    </LinearLayout>

    <!-- 中间 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </LinearLayout>

    <!-- 底部 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <include layout="@layout/bottom"/>
    </LinearLayout>

</LinearLayout>

这样一个简单的微信界面就准备h好了

但是你运行的时候是不是觉得不对劲,跟我们的实际用的微信不一样,那是因为多了一个系统默认的标题栏,我们把他去掉就可以了。

在AndroidManifest.xml的作一下的修改即可

那样一个见到你微信布局就完成了.

时间: 11-23

Android菜鸟成长记8 -- 布局实践(微信界面的编写)的相关文章

Android菜鸟成长记11 -- sqlite数据库的设计和升降级

Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大.SQLite具备下列特点: 1.轻量级 使用 SQLite 只需要带一个动态库,就可以享受它的全部功能,而且那个动态库的尺寸想当小. 2.独立性 SQLite 数据库的核心引擎不需要依赖第三方软件,也不需要所谓的"安装". 3.隔离性 SQLite 数据库中所有的信息(比如表.视图.触发器等)都包含在一个文件夹内,方便管理和维护. 4.跨平台 SQLite 目前

Android菜鸟成长记1 -- JSON的解析

JSON的定义  一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. android提供的json解析类 android的json解析部分都在包org.json下,主要有以下几个类: JSONObject:可以看作是一个json对象,这是系统中有关JSON定义的基本单元,其包含一对儿(Key/

Android菜鸟成长记9 -- selector的用法

在项目开发的时候,由于系统给出的控件不够美观,因此开发时领导常常要我更改下界面,用美工给的图片取代系统图片.开始时,我只是给按钮等设置一下背景图片,这样做虽然美观了,但界面看起来却比较死板,比如用户点击了按钮后,按钮没一点反应.于是我就再给控件添加上onTouch监听事件,按下后改变背景颜色,松手后再恢复原来颜色.但后来发现了selector这个利器,真是喜出望外,不用再添加onTouch监听事件了,用起来也方便灵活.不得不说,多和其他开发人员交流技术经验等还是很有必要的,特别是像我这样独自负责

Android菜鸟成长记12 -- ORMLite的简单使用

在我们的开发中,为了提高开发效率,我们一般都会使用到框架,ormilte则是我们必不可少的数据库框架. 对于ORMLite我也是今天才刚刚接触,我们先从一个简单的项目来了解它吧. ORMLite jar 要想使用ormlite,我们要先下载其jar包. 下载方法: 我们可以到官网去下载:http://ormlite.com/releases/ 下载的时候,我们要下载一个core的jar和android的jar,本人用的是ormlite-android-5.0.jar和ormlite-core-5

Android菜鸟成长记5-ADB和sqllite

Android开发环境中,ADB是我们进行Android开发经常要用的调试工具,它的使用当然是我们Android开发者必须要掌握的. ADB概述 Android Debug Bridge,Android调试桥接器,简称adb,是用于管理模拟器或真机状态的万能工具,采用了客户端-服务器模型,包括三个部分: 1.客户端部分,运行在开发用的电脑上,可以在命令行中运行adb命令来调用该客户端,像ADB插件和DDMS这样的Android工具也可以调用adb客户端. 2.服务端部分,是运行在开发用电脑上的后

Android菜鸟成长记15 -- BitMap

BitMap简介 Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件.本文从应用的角度,着重介绍怎么用Bitmap来实现这些功能. BitMap的常用属性 1. BitMap类 public void recycle()--回收位图占用的内存空间,把位图标记为Dead  public final boolean isRecycled() --判断位图内存是否已释放  public final int g

菜鸟成长记1,软件工程大一经历

菜鸟成长记1 -----大一总结及反思 大一即将结束,突然间想总结一下我的大一生活,最重要的还是好好反思一下. 回首整个大一感觉自己学了好多的东西,但最终的感觉还是一无所成,大一上学期学习c语言,一直处于一个总是一个没有入门的感觉,虽然简单的c经长期磨练已经差不多搞懂,不过稍微复杂点的抑或着说稍微麻烦点的都没有真正学会,仅仅是学过c而已,在学c的同时一直想练ACM可能真的是天赋不够也可能是自己不是这块料,在几经折磨下,做了uva上不超过30道题的情况下放弃了,除想练ACM这中间还接触了java和

android菜鸟学习笔记6----android布局(一)

Android应用的UI组件都是继承自View类,View类表示的就是一个空白的矩形区域.常用的组件如TextView.Button.EditText等都直接或间接继承自View. 此外,View还有一个重要的子类ViewGroup,该类可以用来包含多个View组件,本身也可以当做一个View组件被其他的ViewGroup所包含,由此,可以构建出非常复杂的UI界面. 常用的布局管理器如FrameLayout.LinearLayout.RelativeLayout等都直接继承自ViewGroup.

[菜鸟成长记]iOS开发自学笔记01-向helloworld致敬

我有一个梦想就是成为一个iOS开发.........菜鸟,老规矩,一切从helloworld开始. iOS8伴随着iphone6/6plus而来,Xcode6伴随着iOS8而来,苹果更新换代的速度依然很快,从硬件到软件,每次更新就意味着开发者们又要面临着一次次的恶补,当然,像我这样励志成为iOS开发菜鸟的人来说,目前还没有到面临这些问题的烦恼,我只需要专心做好我的hello world小程序,就像我从前无数次地在其他平台一样. 首先打开Xcode后从模板中选择single view applic