Android菜鸟成长记8 -- 布局实践(微信界面的编写)
前面我们简单的介绍了一下android的五大布局,那么现在我们来实践一下,写一个简单的微信界面
首先,我们新建一个weixin.xml的linnerlayout布局
我们日常使用的微信,从简单的方面来说我可一分成三个内容,头部标签栏,中间显示信息栏,还有一个底部。那么我们就按照这个来先建一个页面
<?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" >
</LinearLayout> <!-- 中间 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
</LinearLayout> <!-- 底部 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</LinearLayout> </LinearLayout>
效果如下:
这是完成后的显示
那么要怎么实现到这个效果,
1.先创建一个标题栏的layout文件
<?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="50dp"
android:orientation="horizontal"
android:background="#21292c"> <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/weixin"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_gravity="center"
android:padding="10dp"/> <TextView
android:layout_width="wrap_content"
android:layout_marginTop="20dp"
android:layout_height="30dp"
android:layout_weight=""
android:gravity="bottom" /> <LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="bottom"> <ImageView
android:id="@+id/imageView2"
android:layout_width="40dp"
android:layout_height="30dp"
android:src="@drawable/fdj"
android:layout_marginRight="10dp"/> <ImageView
android:id="@+id/imageView1"
android:layout_width="40dp"
android:layout_height="30dp"
android:src="@drawable/barbuttonicon_add" /> </LinearLayout> </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" > <RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="@drawable/group_buton_nomal"
android:gravity="center"> <RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/weixin"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_weixin"/> <RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/addressList"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_address"/> <RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/find"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_find"/> <RadioButton
android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/set"
style="@style/radioStyle"
android:drawableTop="@drawable/tab_set"/>
</RadioGroup> </LinearLayout>
底部文件采用的是单选按钮组,这里我就不过多解释了,跟HTML的单选按钮类似
上面的用到的style是自己设计的一个按钮样式,放在style.xml的文件里,具体代码如下
<style name="radioStyle">
<item name="android:button">@null</item>
<item name="android:layout_weight"></item>
<item name="android:gravity">center</item>
<item name="android:textColor">@drawable/text_color</item>
</style>
为了让让底部的显示效果更加的接近我们日常使用的微信,我们对按钮做了一个判断,就是使用selector(不懂的请看下一章)
代码如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="@drawable/tabbar_contacts_hl"></item>
<item
android:drawable="@drawable/tabbar_contacts"></item> </selector>
就是通过焦点是否在该按钮上,在的化显示有颜色的图片,不在的化显示没颜色的。对其他桑按钮同样的操作,代码一样,只是把图片换一下就OK了。
还有文字也进行了相同的操作
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="@drawable/tabbar_contacts_hl"></item>
<item
android:drawable="@drawable/tabbar_contacts"></item> </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="">
</LinearLayout> <!-- 底部 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/bottom"/>
</LinearLayout> </LinearLayout>
这样一个简单的微信界面就准备h好了
但是你运行的时候是不是觉得不对劲,跟我们的实际用的微信不一样,那是因为多了一个系统默认的标题栏,我们把他去掉就可以了。
在AndroidManifest.xml的作一下的修改即可
那样一个见到你微信布局就完成了.
Android菜鸟成长记8 -- 布局实践(微信界面的编写)的更多相关文章
- Android菜鸟成长记7 -- Android的五大布局
Android五大布局,相信android的都了解过,今天我根据自己的学习整理一下五大布局,主要介绍的是线性布局(LiearLayout),因为,其他的布局使用率不是很高. Android的五大布局 ...
- Android菜鸟成长记4-button点击事件
Button 1.button按钮的创建 一般来说,在我们新建一个Android项目的时候,会有会默认有一个activity_main.xml的文件 如果你在新建项目的时候,把Create Activ ...
- Android菜鸟成长记16 -- JSON的解析
JSON的定义 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据 ...
- Android菜鸟成长记14 -- AsnyTask
本篇随笔将讲解一下Android的多线程的知识,以及如何通过AsyncTask机制来实现线程之间的通信. 一.Android当中的多线程 在Android当中,当一个应用程序的组件启动的时候,并且没有 ...
- Android菜鸟成长记11 -- sqlite数据库的设计和升降级
Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也非常的强大.SQLite具备下列特点: 1.轻量级 使用 SQLite 只需要带一个动 ...
- Android菜鸟成长记10 -- ListVew
ListView在我们学习Android的过程中是非常重要得一个部分. listview主要有两个职责 1)将数据填充到布局. 2)处理用户的选择点击等操作. 一个ListView的创建需要3个元素 ...
- Android菜鸟成长记15 -- BitMap
BitMap简介 Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件.本文从应用的角度,着重介绍怎么用Bi ...
- Android菜鸟成长记13 -- 初识application
二.Application 简介 Application 类是用来维护应用程序全局状态.你可以提供自己的实现,并在 AndroidManifest.xml文件的 <application> ...
- Android菜鸟成长记12 -- ORMLite的简单使用
在我们的开发中,为了提高开发效率,我们一般都会使用到框架,ormilte则是我们必不可少的数据库框架. 对于ORMLite我也是今天才刚刚接触,我们先从一个简单的项目来了解它吧. ORMLite ja ...
随机推荐
- JSP EL表达式(转)
一.EL简介 1.语法结构 ${expression}2.[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字 ...
- ThinkPHP3.2.3 跨域访问
其他程序调用tp项目的action时需要进行跨域设置,在tp项目根目录下添加crossdomain.xml文件. 文件内容: <?xml version="1.0"?> ...
- win7、linux安装使用pip、mitmproxy
安装pip https://pip.pypa.io/en/latest/installing.html 步骤: 下载 https://bootstrap.pypa.io/get-pip.py pyth ...
- [杂] BOSE QC15维修小记
有一句话大概是这样说的“其他的耳机是靠嘴说的,BOSE是靠耳朵听的”,2010年就开始馋QC3,直到2012年在Vancouver的BOSE店里,在震耳欲聋的模拟噪音中带上QC15那一刻,下了决心. ...
- 黑马程序员_ Objective-c 之Foundation笔记(一)
结构体 NSRange: 用来表示范围 创建 NSRange r1 = {2, 4} NSRange r2 = {.location = 2, .length = 4} NSRange r3 = N ...
- 修改目的端trail文件的最大大小--转载
本文为原创,转载请注明出处: http://blog.csdn.net/msdnchina/article/details/38346435 修改目的端trail文件的最大大小. 本文产生的背景: 在 ...
- C/C++二维数组分配内存
//C++方式 double **Q=new double*[row]; //初始化Q矩阵 for(int i=0;i<row;++i) Q[i]=new double[POS_NUM]( ...
- R语言将字符串矩阵转化为数值型矩阵
这是原始数据的格式,当运行完下面的命令的时候,结果如下图 x=read.table("C:/Users/Administrator/Desktop/s1.txt") x=as.ma ...
- 使用PerfView诊断.Net GC的问题
PerfView 概述: PerfView是一个可以帮助你分析CPU和内存问题的工具软件.它非常轻量级也不会入侵诊断的程序,在诊断过程中对诊断的程序影响甚微. Visual Studio自带的性能分析 ...
- linux出现user account has expired解决方案
SUSE Linux 用户user1登陆不了,确认密码没错,使用root用户登陆,su - user1 提示密码不对,passwd user1提示帐户过期user account hasexpired ...