TabHost如果要自定义显示的效果,有点麻烦,而默认的样式有时候又与我们程序的风格不匹配.今天我们就用RelativeLayout来
实现与TabHost相同的功能.上效果图:
点击上面的tab,tab自身样式会改变,下面内容也会改变,功能完全与TabHost相同.
介绍一下RelativeLayout,RelativeLayout是相对布局,顾名思义,就是说里面的控件位置都是相对其他控件的位置而确定的.如上
面的效果,Tab相对于屏幕顶部对齐,底部按钮相对于屏幕底部对齐.而内容则放在顶部的Tab和底部的按钮中间.
所以所有被其他控件依赖定位的控件,必须先写,也就是说,要实现上面的效果,XML中不是从上往下写,而是先定上和下,再写中间,因为中间的内容高度,位
置都依赖于它的上下控件.
实现TabHost效果的原理也简单,点击tab时设置被点击和没被点击的的tab的背景,字体颜色即可显示点击效果.在点击事件中,用View的
removeAllViews()方法清除中间控件的所有内容,再用addView方法添加需要的内容.
下面上代码,布局XML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?xml version ="1.0" encoding ="utf-8" ?> <RelativeLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:weightSum ="1" android:background ="@color/white" > <LinearLayout android:id ="@+id/topmenu" android:orientation ="horizontal" android:layout_alignParentTop ="true" android:layout_width ="fill_parent" android:layout_height ="40dip" android:background ="@drawable/topback" android:gravity ="bottom" > <!-- android:layout_alignParentTop 与父元素顶部是否对齐,这里true,就是把这个topmenu放屏幕顶部 --> <LinearLayout android:id ="@+id/task" android:orientation ="horizontal" android:layout_height ="35dip" android:layout_width ="100dip" android:background ="@drawable/textback" > <TextView android:layout_width ="fill_parent" android:id ="@+id/taskText" android:layout_height ="fill_parent" android:text ="计划" android:gravity ="center" android:textSize ="20sp" android:textColor ="@color/white" /> </LinearLayout> <LinearLayout android:id ="@+id/accounts" android:orientation ="horizontal" android:layout_height ="35dip" android:layout_width ="100dip" > <TextView android:layout_width ="fill_parent" android:id ="@+id/accountsText" android:layout_height ="fill_parent" android:text ="帐号" android:gravity ="center" android:textSize ="20sp" android:textColor ="@color/green" /> </LinearLayout> <LinearLayout android:id ="@+id/sended" android:orientation ="horizontal" android:layout_height ="35dip" android:layout_width ="100dip" > <TextView android:layout_width ="fill_parent" android:id ="@+id/sendedText" android:layout_height ="fill_parent" android:text ="已发" android:gravity ="center" android:textSize ="20sp" android:textColor ="@color/green" /> </LinearLayout> </LinearLayout> <Button android:id ="@+id/button" android:layout_alignParentBottom ="true" android:layout_width ="fill_parent" android:layout_height ="wrap_content" android:text ="底部按钮" /> <!-- layout_alignParentBottom 与父元素底部是否对齐,这里true,就是把这个Button放屏幕底部 --> <!-- RelativeLayout必须先写四周的控件,再写中间的,这里先写顶部的Tab和底部的Button,再写中间的Content,因为中间的内容位置是不固定的 --> <LinearLayout android:id ="@+id/content" android:orientation ="vertical" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:layout_below ="@id/topmenu" android:layout_above ="@id/button" > </LinearLayout> <!-- layout_below,当前控件放在设定控件下方 . android:layout_above 当前控件放在设定控件上方 这里配合使用,就是放在顶部tab和底部Button的中间 --> </RelativeLayout> |
程序代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
package com.pocketdigi ; import android.app.Activity ; import android.os.Bundle ; import android.view.LayoutInflater ; import android.view.View ; import android.view.View.OnClickListener ; import android.widget.LinearLayout ; import android.widget.TextView ; public class Main extends Activity { /** Called when the activity is first created. */ LinearLayout task, accounts, sended, content; TextView taskText, accountsText, sendedText; @Override public void onCreate( Bundle savedInstanceState) { super .onCreate ( savedInstanceState) ; setContentView( R.layout .main ) ; task = ( LinearLayout) findViewById( R.id .task ) ; accounts = ( LinearLayout) findViewById( R.id .accounts ) ; sended = ( LinearLayout) findViewById( R.id .sended ) ; content = ( LinearLayout) findViewById( R.id .content ) ; taskText = ( TextView) findViewById( R.id .taskText ) ; accountsText = ( TextView) findViewById( R.id .accountsText ) ; sendedText = ( TextView) findViewById( R.id .sendedText ) ; LayoutInflater factory = LayoutInflater.from ( this ) ; View taskView = factory.inflate ( R.layout .task , null ) ; View accountsView = factory.inflate ( R.layout .accounts , null ) ; View sendedView = factory.inflate ( R.layout .sended , null ) ; //把三个内容视图的XML文件转化成View content.addView ( taskView) ; //启动时默认载入taskView task.setOnClickListener ( new TabListener( task, taskText, taskView) ) ; accounts.setOnClickListener ( new TabListener( accounts, accountsText, accountsView) ) ; sended.setOnClickListener ( new TabListener( sended, sendedText, sendedView) ) ; //设置三个tab的点击监听器 } class TabListener implements OnClickListener { LinearLayout layout; TextView tv; View subView; TabListener( LinearLayout layout, TextView tv, View subView) { this .layout = layout; this .tv = tv; this .subView = subView; } @Override public void onClick( View v) { // TODO Auto-generated method stub task.setBackgroundDrawable ( null ) ; accounts.setBackgroundDrawable ( null ) ; sended.setBackgroundDrawable ( null ) ; taskText.setTextColor ( getResources( ) .getColor ( R.color .green ) ) ; accountsText.setTextColor ( getResources( ) .getColor ( R.color .green ) ) ; sendedText.setTextColor ( getResources( ) .getColor ( R.color .green ) ) ; // 全部设为未选中状态 layout.setBackgroundResource ( R.drawable .textback ) ; tv.setTextColor ( getResources( ) .getColor ( R.color .white ) ) ; // 设置选中项 content.removeAllViews ( ) ; //移除所有内容 content.addView ( subView) ; //添加传入的View } } } |
Strings.xml中存两个颜色值:
1 2 |
<color name ="white" > #ffffff</color> <color name ="green" > #0cc054</color> |
三个内容视图的xml,只贴一个,另两个一样,名字不同而已:
task.xml:
1 2 3 4 5 6 7 8 |
<?xml version ="1.0" encoding ="utf-8" ?> <TextView xmlns:android ="http://schemas.android.com/apk/res/android" android:layout_width ="fill_parent" android:layout_height ="fill_parent" android:text ="Task" > </TextView> |
相关推荐
自定义RelativeLayout圆角图片背景,自定义属性 背景 圆角半径
android实现自定义RelativeLayout可拖动、缩放、旋转TextView
Android布局入门,LinearLayout和RelativeLayout的理解和应用
根据ScrollView的自定义实现 RelativeLayout跟随手势的上下滑动显示和隐藏顶部标题栏,话不多说 直接上代码
RelativeLayout点击效果,背景色的变化,通过两种方法:1. 直接用图片资源; 2. 用color资源
这是一个使用RelativeLayout RadiouGroup ImageView制作的中间凸起的按钮效果,代码简单易懂,避免了使用自定义控件带来的繁琐问题.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考...
一个Android自定义控件,可以用手指拖动,改变控件的大小,同时控件可以填充自己特有的Android控件,以及第三方控件。相当于一个可拖动的RelativeLayout
Android RelativeLayout骏丰频谱水实例+源码下载,骏丰频谱水的开发实例,仅供参考
在Android中画线必须由一个载体,要么是一个控件,要么是一个布局,其实他们都是继承自View,通过自定义控件或布局的方式画线是最常见的。这个例子实现了在自定义RelativeLayout中画网格线
Android 开发入门 对 RelativeLayout的基本属性的讲解和用法 ,更容易的帮你理解和使用
本文实例为大家分享了Android实现3D层叠式卡片图片展示的具体代码,供大家参考,具体内容如下 先看效果 好了效果看了,感兴趣的往下看哦! 整体实现思路 1、重写RelativeLayout 实现 锁定宽高比例的 RelativeLayout...
实例002: 使用相对布局(RelativeLayout)来布局屏幕 3 实例003: 使用表格布局(TableLayout) 来布局屏幕 5 实例004: 使用绝对布局(AbsoluteLayout) 来布局屏幕 6 实例005: 使用标签布局(TabLayout)来 布局...
总结android中相对布局RelativeLayout的所有属性及使用方法。适合初级程序员
Android 相对布局 RelativeLayout 属性
摘要:Java源码,Android源码,相对布局,Android源码 Android RelativeLayout实例+源码下载,Android界面之相对布局的一个例子,安卓手机的界面都挺漂亮,那么究竟如何实现呢?这一方面和布局有很大关系,在布局中,...
Android RelativeLayout 的翻译应用。希望能给大家帮助
Android中使用RelativeLayout布局完成的登录界面教学案例任务说明.pdf 学习资料 复习资料 教学资源
自定义相对布局,允许两个手指捏缩放和整个布局的单点触摸移动。 归功于:android-developers.blogspot.sg/2010/06/making-sense-of-multitouch.html
RelativeLayout 上 下 中 左 右布局 demo
android布局属性RelativeLayout详解.