微信主界面

    

    我们布局应该从局来看,如上图,我们可以分为三个大的LinearLayout,再从LinearLayout嵌套其它布局,从而做出界面

  文件

      

    主界面代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- 头部 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include layout="@layout/top"/><!--引用其它布局-->
</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/buttonr"/><!--引用其它布局-->
</LinearLayout>
</LinearLayout>

    为了代码的维护和简洁,我们可以引用其它的布局,如上图, <include layout="@layout/buttonr"/>引用已经完成的布局

  顶部

    我们添加一个LinearLayout布局的文件

      

        

  顶部界面

        

    这个布局我们可以用一个大的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="50dp"
android:background="#21292c"//背景色
android:orientation="horizontal" > <TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="22sp"//字体大小
android:textColor="#FFFFFF"//字体颜色
android:padding="10dp"
android:text="@string/app_name" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center" > <ImageView
android:id="@+id/imageView2"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginRight="10dp"
//图片
android:src="@drawable/fdj" /> <ImageView
android:id="@+id/imageView1"
android:layout_width="30dp"
android:layout_height="30dp"
//图片
android:src="@drawable/barbuttonicon_add" />
</LinearLayout> </LinearLayout>

  底部界面:如上所示添加LinearLayout布局文件,会涉及到一个控件的运用RadioGroup控件

    

    

  RadioButton和RadioGroup的关系:

    1、RadioButton表示单个圆形单选框,而RadioGroup是可以容纳多个RadioButton的容器

    2、每个RadioGroup中的RadioButton同时只能有一个被选中

    3、不同的RadioGroup中的RadioButton互不相干,即如果组A中有一个选中了,组B中依然可以有一个被选中

    4、大部分场合下,一个RadioGroup中至少有2个RadioButton

    5、大部分场合下,一个RadioGroup中的RadioButton默认会有一个被选中,并建议您将它放在RadioGroup中的起始位置

  主要代码  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"//水平
android:layout_alignParentTop="true"
>
<RadioGroup android:orientation="horizontal"//水平
android:layout_width="match_parent" android:layout_height="wrap_content">
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"//权重
android:layout_height="wrap_content"
android:drawableTop="@drawable/four"//引用外部文件
android:checked="true"
android:text="@string/xiao"
style="@style/text"
android:button="@null"//去掉前面的圆点
android:gravity="center"//居中
/>
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"//权重
android:layout_height="wrap_content"
android:drawableTop="@drawable/tuo"//引用外部文件
android:text="@string/tong"
style="@style/text"
android:button="@null"//去掉前面的圆点
android:gravity="center"//居中
/>
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"//权重
android:layout_height="wrap_content"
android:drawableTop="@drawable/three"//引用外部文件
android:text="@string/ss"
style="@style/text"
android:button="@null"//去掉前面的圆点
android:gravity="center"//居中
/>
<RadioButton
android:layout_width="0dp"
android:layout_weight="1"//权重
android:layout_height="wrap_content"
android:drawableTop="@drawable/one"//引用外部文件
android:text="@string/wo"
style="@style/text"
android:button="@null"//去掉前面的圆点
android:gravity="center"//居中
/>
</RadioGroup>
</LinearLayout>
</RelativeLayout>

    添加外部文件

      

      

  外部文件内容:添加四个这样的文件,分别对应四张图片,如果选中的的话,图片会变动

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"//选中是tabbar_mehl这个图片
android:drawable="@drawable/tabbar_mehl"></item>
<item
//没有选中是tabbar_me图片
android:drawable="@drawable/tabbar_me"></item>
</selector>

  添加字体变色的文件,如上添加

  颜色文件代码 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:color="@color/green"></item>
<item
android:color="@color/grey"></item> </selector>

  添加外部样式

  

   字体颜色

      

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="grey">#999999</color>
<color name="green">#07bb07</color>
</resources>

 

  <style name="text">
<item name="android:textColor">@drawable/text</item>
</style>

  底部就做好了

  在主界面布局分别引用这些分布局,界面就做好了。我们应该多多实践,多看下关于属性的书和资料.

 

最新文章

  1. 不同类型的指针+1之后增加的大小不同(a,&amp;a的地址是一样的,但意思不一样)
  2. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
  3. C# Questions
  4. 直接请求URL调用 axis webservices
  5. windows下安装laravel简单步骤以及碰到的问题
  6. .Net下简单地实现MD5加密
  7. Autolayout 第三方开源库
  8. 基于Vue全家桶制作的的高仿美团APP
  9. logback读取src/test/resource下的配置文件
  10. Leetcode_删除排序数组中的重复项
  11. 查看Android应用包名、Activity的几个方法
  12. Google Maps V3 之 路线服务
  13. loj#3 -Copycat
  14. git log 查看提交记录,参数:
  15. Mac mysql sql_model引起的问题
  16. The Unique MST POJ - 1679 最小生成树判重
  17. SSH项目搭建(四)——Maven的pom.xml配置
  18. a=a++问题引发的思考
  19. &lt;c:if&gt;&lt;/c:if&gt;用法-转载
  20. 一次经典的tcp三次握手

热门文章

  1. Android Studio Reference local .aar files
  2. RabbitMQ/JAVA 客户端测试(补:利用线程)
  3. Windows 2012 装 Remote Desktop Organizer 无法连接到其他远程服务器
  4. 复健小CM
  5. RedHat5配置网卡
  6. Debugging Process Startup
  7. url 传参写法
  8. XML实体注入漏洞
  9. TP代码
  10. bk. 2014.12.1