安卓经典效果组件篇6——自定义底部Tab控件
来源:互联网 发布:电视盒子直播软件 编辑:程序博客网 时间:2024/05/17 05:56
最近用到了底部的tab控件,便仔细看了一下,写了一个例子,先上效果图,源码在最底下。
实现的方法就是,利用TabHost和TabSpace组合,然后再对TabHost的标签的布局进行自定义,实现在标签上显示图标和文字的效果。一步步来
代码说的比较细,分的步骤有点儿多
Intent customerInfoIntent = new Intent(this, OneActivity.class);tab1.setIndicator(view1).setContent(customerInfoIntent);
代码:
第一步:
创建一个类,继承TabActivity。并实现未实现的方法
public class MainActivity extends TabActivity
第二步:
编写其对应的Layout布局文件
<?xml version="1.0" encoding="utf-8"?><!-- 这里有三个标记是必须的 Android:id="@android:id/tabhost" Android:id="@android:id/tabcontent" Android:id="@android:id/tabs" --><TabHost xmlns:Android="http://schemas.android.com/apk/res/android" Android:id="@android:id/tabhost" Android:layout_width="fill_parent" Android:layout_height="fill_parent"> <RelativeLayout Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="fill_parent"> <FrameLayout Android:id="@android:id/tabcontent" Android:layout_width="fill_parent" Android:layout_height="fill_parent" Android:layout_weight="1"> </FrameLayout> <TabWidget Android:id="@android:id/tabs" Android:layout_width="fill_parent" Android:layout_height="60dp" Android:background="#FA83B3" Android:layout_alignParentBottom="true"/> </RelativeLayout></TabHost>
第三步:
在onCreate()方法里声明TabHost,并添加三个TabSpace.
TabHost host = getTabHost();TabSpec tab1 = host.newTabSpec("tab1");TabSpec tab2 = host.newTabSpec("tab2");TabSpec tab3 = host.newTabSpec("tab3");host.addTab(tab1);host.addTab(tab2);host.addTab(tab3);
这个时候运行,就已经可以看到三个tab了,如果是打其他的帖子扒的代码,可能会有一点儿问题,就是tab选项是在上面的,而我们需要的是在下边,
上面的代码页提供了解决的办法,有两种,一种是在FrameLayout标签上加上Android:layout_weight="1"属性即可,或者将整体的布局换成RelativeLayout,然后在TabWidget标签上加上Android:layout_alignParentBottom="true"属性即可。
这样就可以看见存在于底部的Tab标签了
但是标签依旧是纯文字的。没有自己的图标
第四步
新建一个Layout文件,用于显示标签项的布局
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FA83B3" android:orientation="vertical" > <ImageView android:id="@+id/image123" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_horizontal" android:src="@drawable/ic_launcher" > </ImageView> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="success" > </TextView></LinearLayout>这里定义了两个控件,一个用于显示图标,一个用于显示图标下面的文字
第五步:
获得TabHost选项卡的view,然后对其指定刚才的布局。这里三个标签使用的是同一个布局,只是在绑定到每个选项卡的时候进行参数设置从而实现每个选项卡显示的内容不一样,其实可以分别写三个布局来进行的,只是笔者有些懒,也不想让工程里的文件太多。
具体代码:
LinearLayout view1 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.space_view, null);ImageView image1 =(ImageView)view1.findViewById(R.id.image123);image1.setImageResource(R.drawable.icon_2_n);TextView text1 = (TextView) view1.findViewById(R.id.TextView1);text1.setText("My");
第六步:
新建相应的Activity,用于每个标签页的显示
这里不在赘述
第七步
绑定Activity到相应的标签卡上
Intent customerInfoIntent = new Intent(this, OneActivity.class);tab1.setIndicator(view1).setContent(customerInfoIntent);
最后整体的代码再一起贴一遍
activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!-- 这里有三个标记是必须的 Android:id="@android:id/tabhost" Android:id="@android:id/tabcontent" Android:id="@android:id/tabs" --><TabHost xmlns:Android="http://schemas.android.com/apk/res/android" Android:id="@android:id/tabhost" Android:layout_width="fill_parent" Android:layout_height="fill_parent"> <RelativeLayout Android:orientation="vertical" Android:layout_width="fill_parent" Android:layout_height="fill_parent"> <FrameLayout Android:id="@android:id/tabcontent" Android:layout_width="fill_parent" Android:layout_height="fill_parent" Android:layout_weight="1"> </FrameLayout> <TabWidget Android:id="@android:id/tabs" Android:layout_width="fill_parent" Android:layout_height="60dp" Android:background="#FA83B3" Android:layout_alignParentBottom="true"/> </RelativeLayout></TabHost>
MainActivity.java
package com.example.mytabhost;import java.util.ArrayList;import java.util.List;import android.app.TabActivity;import android.content.Intent;import android.os.Bundle;import android.view.LayoutInflater;import android.view.Menu;import android.view.Window;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TabHost;import android.widget.TabHost.TabSpec;import android.widget.TextView;public class MainActivity extends TabActivity {public List<ImageView> imageList = new ArrayList<ImageView>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);TabHost host = getTabHost();TabSpec tab1 = host.newTabSpec("tab1");TabSpec tab2 = host.newTabSpec("tab2");TabSpec tab3 = host.newTabSpec("tab3");LinearLayout view1 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.space_view, null);ImageView image1 =(ImageView)view1.findViewById(R.id.image123);image1.setImageResource(R.drawable.icon_2_n);TextView text1 = (TextView) view1.findViewById(R.id.TextView1);text1.setText("My");Intent customerInfoIntent = new Intent(this, OneActivity.class);tab1.setIndicator(view1).setContent(customerInfoIntent);LinearLayout view2 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.space_view, null);ImageView image2 =(ImageView)view2.findViewById(R.id.image123);image2.setImageResource(R.drawable.icon_3_n);TextView text2 = (TextView) view2.findViewById(R.id.TextView1);text2.setText("you");tab2.setIndicator(view2).setContent(customerInfoIntent);LinearLayout view3 = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.space_view, null);ImageView image3 =(ImageView)view3.findViewById(R.id.image123);image3.setImageResource(R.drawable.icon_4_n);TextView text3 = (TextView) view3.findViewById(R.id.TextView1);text3.setText("our");tab3.setIndicator(view3).setContent(customerInfoIntent);host.addTab(tab1);host.addTab(tab2);host.addTab(tab3);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}
space_view.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FA83B3" android:orientation="vertical" > <ImageView android:id="@+id/image123" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_horizontal" android:src="@drawable/ic_launcher" > </ImageView> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="success" > </TextView></LinearLayout>
OneActivity.java
package com.example.mytabhost;import android.os.Bundle;import android.app.Activity;import android.view.Menu;public class OneActivity extends Activity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_one);}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.one, menu);return true;}}
它的布局文件
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" tools:context=".OneActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /></RelativeLayout>
tab标签的布局
space_view.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/LinearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#FA83B3" android:orientation="vertical" > <ImageView android:id="@+id/image123" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_horizontal" android:src="@drawable/ic_launcher" > </ImageView> <TextView android:id="@+id/TextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="success" > </TextView></LinearLayout>
下面是我的工程源码
免积分下载
- 安卓经典效果组件篇6——自定义底部Tab控件
- 经典效果组件篇4:安卓的tab标签控件
- 经典效果组件篇3——自定义Dialog
- 安卓经典效果组件篇5——侧滑菜单的实现
- Android自定义控件—-RadioGroup实现APP首页底部Tab的切换
- 安卓控件增加自定义点击效果
- 安卓开发笔记——自定义HorizontalScrollView控件(实现QQ5.0侧滑效果)
- 安卓底部滚轮控件
- android自定义控件之底部自动切换Tab布局
- 安卓自定义控件(一)——组合控件
- 安卓 实现网易云音乐底部播放栏效果之使用自定义BaseActivity实现 上
- 安卓 实现网易云音乐底部播放栏效果之使用自定义BaseActivity实现 下
- 安卓经典功能组件篇1——实现界面的异步刷新
- 自定义安卓控件
- 安卓----自定义控件
- 安卓自定义控件
- 安卓自定义控件
- 安卓自定义控件
- Struts2 使用annotation从action跳转到action并传递参数
- 第六周作业
- 同步中,为什么要wait,又notify谁?
- Android中设置全屏的方法
- 线段树-HDU1394Minimum Inversion Number
- 安卓经典效果组件篇6——自定义底部Tab控件
- spring mvc EL ModelAndView的 Model 值 在jsp中不显示
- 开服涌入的问题
- 面向对象设计——系统动态模型设计(2,状态模型)
- 第三周作业
- XML 语法规则
- 七大经典排序(下)
- [UIImage imageNamed:@""]使用误区
- 16进制颜色(html颜色值)字符串转为UIColor