【转】TabHost详解

article/2025/9/9 21:52:25

 请大家尊重作者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/17120325
前言:今天仔细研究了下TabHost,主要是为了实现微信底部导航栏的功能,最后也给出一个链接,这位老兄用TabHost基本做出来了微信导航栏。

正文

TabHost的实现分为两种,一个是不继承TabActivity,一个是继承自TabActivity;当然了选用继承自TabActivity的话就相对容易一些,下面来看看分别是怎样来实现的吧。

方法一、定义tabhost:不用继承TabActivity

 1、布局文件:activity_main.xml

<LinearLayout 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:orientation="vertical"  tools:context=".MainActivity" >  <Button  android:id="@+id/button1"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="Button" />  <TabHost  android:id="@+id/tabhost"  android:layout_width="match_parent"  android:layout_height="wrap_content">  <LinearLayout  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical" >  <TabWidget  android:id="@android:id/tabs"  android:layout_width="match_parent"  android:layout_height="wrap_content" >  </TabWidget>  <FrameLayout  android:id="@android:id/tabcontent"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <!-- 第一个tab的布局 -->  <LinearLayout  android:id="@+id/tab1"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:id="@+id/textView1"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="林炳东" />  </LinearLayout>  <!-- 第二个tab的布局 -->  <LinearLayout  android:id="@+id/tab2"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:id="@+id/textView2"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="张小媛" />  </LinearLayout>  <!-- 第三个tab的布局 -->  <LinearLayout  android:id="@+id/tab3"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:id="@+id/textView3"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="马贝贝" />  </LinearLayout>  </FrameLayout>  </LinearLayout>  </TabHost>   </LinearLayout>  

2、JAVA代码

public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  TabHost th=(TabHost)findViewById(R.id.tabhost);  th.setup();            //初始化TabHost容器  //在TabHost创建标签,然后设置:标题/图标/标签页布局  th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));  th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));  th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));      //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标   }  
}  

效果图:

此例源码地址:http://download.csdn.net/detail/harvic880925/6657611  (不要分,欢迎下载)

 方法二:Tab的内容分开:不用继承TabActivity

 1、第一个tab的XML布局文件,tab1.xml:

<?xml version="1.0" encoding="UTF-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/LinearLayout01"   android:layout_width="wrap_content"  android:layout_height="wrap_content">  <TextView   android:text="我是标签1的内容喔"  android:id="@+id/TextView01"   android:layout_width="wrap_content"  android:layout_height="wrap_content">  </TextView>  </LinearLayout>  

2、第二个tab的XML布局文件,tab2.xml: 

<?xml version="1.0" encoding="UTF-8"?>  
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/LinearLayout02"  android:layout_width="wrap_content"  android:layout_height="wrap_content">  <TextView android:text="标签2"  android:id="@+id/TextView01"   android:layout_width="wrap_content"  android:layout_height="wrap_content" />  
</LinearLayout>  

3、主布局文件,activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:orientation="vertical" >  <TabHost  android:id="@+id/tabhost"           android:layout_width="match_parent"  android:layout_height="match_parent" >  <LinearLayout  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical" >  <TabWidget  android:id="@android:id/tabs"  android:layout_width="match_parent"  android:layout_height="wrap_content" >  </TabWidget>  <FrameLayout  android:id="@android:id/tabcontent"  android:layout_width="match_parent"  android:layout_height="match_parent" >  </FrameLayout>  </LinearLayout>  </TabHost>  </LinearLayout>  

4、JAVA代码:

public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  TabHost m = (TabHost)findViewById(R.id.tabhost);  m.setup();  LayoutInflater i=LayoutInflater.from(this);  i.inflate(R.layout.tab1, m.getTabContentView());  i.inflate(R.layout.tab2, m.getTabContentView());//动态载入XML,而不需要Activity  m.addTab(m.newTabSpec("tab1").setIndicator("标签1").setContent(R.id.LinearLayout01));    m.addTab(m.newTabSpec("tab2").setIndicator("标签2").setContent(R.id.LinearLayout02));   }  
}  

效果图:

此例源码地址:http://download.csdn.net/detail/harvic880925/6657679   (不要分,欢迎下载)

 方法三:继承自TabActivity

1、主布局文件,activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>  
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent">  <!-- 第一个布局 -->  <LinearLayout     android:id="@+id/view1"  android:layout_width="match_parent"  android:layout_height="match_parent" >        <TextView  android:id="@+id/textView1"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="张小媛" />  </LinearLayout>  <!-- 第二个布局 -->  <LinearLayout     android:id="@+id/view2"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView  android:id="@+id/textView2"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="马贝贝" />  </LinearLayout>  <!-- 第三个布局 -->  <TextView android:id="@+id/view3"   android:background="#00ff00"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:text="Tab3"/>  </FrameLayout>  

2、JAVA代码: 

 先将派生自Activity改为TabActivity,然后代码如下:

 

public class MainActivity extends TabActivity {  @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setTitle("TabDemoActivity");  TabHost tabHost = getTabHost();  LayoutInflater.from(this).inflate(R.layout.activity_main,  tabHost.getTabContentView(), true);  tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("tab1", getResources().getDrawable(R.drawable.ic_launcher))  .setContent(R.id.view1));  tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab2")  .setContent(R.id.view2));  tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("tab3")  .setContent(R.id.view3));  //标签切换事件处理,setOnTabChangedListener  tabHost.setOnTabChangedListener(new OnTabChangeListener(){    @Override  public void onTabChanged(String tabId) {  if (tabId.equals("tab1")) {   //第一个标签  }  if (tabId.equals("tab2")) {   //第二个标签  }  if (tabId.equals("tab3")) {   //第三个标签  }  }              });   }  }  

效果如下:

 

此例源码地址:http://download.csdn.net/detail/harvic880925/6657791   (不要分,仅供分享)

 四:实现微信底部导航栏

效果:

 

参看博客:http://blog.csdn.net/wangkuifeng0118/article/details/7745109

 源码地址:http://download.csdn.net/detail/harvic880925/6657767   (不要分,仅供分享)


http://chatgpt.dhexx.cn/article/kE1Wg8NB.shtml

相关文章

Android入门第十一篇之TabHost,TabWidget

本文来自http://blog.csdn.net/hellogv/ &#xff0c;引用必须注明出处&#xff01; 这回要介绍的是Android的Tab控件&#xff0c;Tab控件可以达到分页的效果&#xff0c;让一个屏幕的内容尽量丰富&#xff0c;当然也会增加开发的复杂程度&#xff0c;在有必要的时候再使用。An…

android Tabhost部件

本文结合源代码和实例来说明TabHost的用法。 使用TabHost 可以在一个屏幕间进行不同版面的切换&#xff0c;例如android自带的拨号应用&#xff0c;截图&#xff1a; 查看tabhost的源代码&#xff0c;主要实例变量有&#xff1a; private TabWidget mTabWidget; …

TabHost的用法

http://blog.csdn.net/lastsweetop/article/details/5566200 本文结合源代码和实例来说明TabHost的用法。 使用TabHost 可以在一个屏幕间进行不同版面的切换&#xff0c;例如android自带的拨号应用&#xff0c;截图&#xff1a; 查看tabhost的源代码&#xff0…

ViewPager和Tabhost结合,可滑动的tabhost

有朋友反映资源下载下来有问题&#xff0c;我看了下&#xff0c;确实是&#xff0c;已更新下面文章中的代码和资源&#xff0c;现在可以好好的跑起来了&#xff0c;另外还改动了个小地方的逻辑&#xff0c;因为我在使用中出了点小错&#xff0c;需要的可以试下。另外&#xff0…

TabSpec和TabHost实例

TabSpec与TabHost TabHost相当于浏览器中浏览器分布的集合&#xff0c;而Tabspec则相当于浏览器中的每一个分页面。d在Android中&#xff0c;每一个TabSpec分布可以是一个组件&#xff0c;也可以是一个布局&#xff0c;然后将每一个分页装入TabHost中&#xff0c;TabHost即可将…

Android中的TabHost

介绍 有时&#xff0c;我们想在一个window中显示多个视图&#xff0c;这时就需要用到Tab容器。在Android里它叫TabHost。 使用TabHost有两种方式&#xff1a; 在相同的activity中使用TabHost导航多个视图使用TabHost导航多个Activity(通过intents) Tab应用的结构 TabHost的A…

Android修行手册 - TabHost回忆

往期文章分享 点击跳转>《导航贴》- Unity手册&#xff0c;系统实战学习点击跳转>《导航贴》- Android手册&#xff0c;重温移动开发 &#x1f449;关于作者 众所周知&#xff0c;人生是一个漫长的流程&#xff0c;不断克服困难&#xff0c;不断反思前进的过程。在这个过…

Android TabHost的使用

1. 最简单的TabHost&#xff0c;Tab来自于layout下的元素 &#xff08;只从1个Layout中取数据&#xff09; &#xff08;1&#xff09;效果图 &#xff08;2&#xff09;代码 1&#xff09;tab_demo.xml <?xml version"1.0" encoding"utf-8"?&g…

TabHost详解

前言&#xff1a;今天仔细研究了下TabHost&#xff0c;主要是为了实现微信底部导航栏的功能&#xff0c;最后也给出一个链接&#xff0c;这位老兄用TabHost基本做出来了微信导航栏。 正文 TabHost的实现分为两种&#xff0c;一个是不继承TabActivity&#xff0c;一个是继承自…

Android选项卡TabHost功能和用法

1、选项卡TabHost介绍 TabHost可以方便地在窗口上放置多个标签页&#xff0c;每个标签页相当于获得了一个与外部容器大小相同的组件摆放区域 TabHost是一个简单的容器&#xff0c;提供如下两种方法来创建选项卡 newTabSpec(String tag):创建选项卡 addTab(TabHost.TabSpec tabS…

[Android] 选项卡组件TabHost

Tab选项卡实现多个分页之间的快速切换&#xff0c;每个分页可以显示不同的内容&#xff0c;在Android平台提供了TabHost组件实现Tab选项卡的功能&#xff0c;选项卡组件的主要功能是可以进行应用程序分类管理。 每个选项卡称为一个Tab&#xff0c;而包含这多个选项卡的容器称为…

交叉熵:计算交叉熵损失函数nn.CrossEntropyLoss()

首先要提出的问题是。。。什么是损失函数&#xff1f;干什么的&#xff08;功能&#xff09;&#xff1f;类型有哪些&#xff1f; 1.什么是损失函数&#xff1f; 损失函数&#xff08;loss function&#xff09;或 代价函数&#xff08;cost function&#xff09;是将随机事件或…

softmax函数与交叉熵损失函数

本文主要介绍了当前机器学习模型中广泛应用的交叉熵损失函数与softmax激励函数。 这个损失函数主要应用于多分类问题&#xff0c;用于衡量预测值与实际值之间的相似程度。 交叉熵损失函数定义如下: L C E ( y ^ , y ∗ ) − ∑ i 1 N c l a s s e s y i ∗ l o g ( y i ^ …

【交叉熵损失函数】关于交叉熵损失函数的一些理解

目录 0. 前言1.损失函数&#xff08;Loss Function&#xff09;1.1 损失项1.2 正则化项 2. 交叉熵损失函数2.1 softmax2.2 交叉熵 0. 前言 有段时间没写博客了&#xff0c;前段时间主要是在精读一些计算机视觉的论文&#xff08;比如yolov1&#xff09;&#xff0c;以及学cs23…

CrossEntropy交叉熵损失函数及softmax函数的理解

参考链接1 参考链接2 参考链接3 参考链接4 &#xff08;一&#xff09;什么是Sigmoid函数和softmax函数&#xff1f; 提到二分类问题容易想到逻辑回归算法&#xff0c;而逻辑回归算法最关键的步骤就是将线性模型输出的实数域映射到[0, 1]表示概率分布的有效实数空间&#xff…

【基础篇】交叉熵损失函数(Cross Entropy Loss)

文章目录 1. 理论知识2. 代码 1. 理论知识 我们需要关注那些按常理来说不太可能发生的事情。『信息量』就是用来度量事件的不确定性&#xff0c; 事件包含的信息量应与其发生的概率负相关 。假设 X X X是一个离散型随机变量&#xff0c;它的取值集合为 { x 1 , x 2 , . . . ,…

损失函数-交叉熵的推导和二分类交叉熵

交叉熵 期望&#xff1a; 期望就是所有随机变量的均值。 E(X)X1*P&#xff08;X1&#xff09;X2*P&#xff08;X2&#xff09;X3*P&#xff08;X3&#xff09; 熵&#xff1a; 熵表示所有信息量的期望。 信息量如何计算呢&#xff1f; 概率值取Log&#xff0c;然后加个负…

深度学习中的损失函数(交叉熵)

0、前景介绍 对于线性回归模型适用于输出为连续值的情景&#xff0c;但是在模型输出是一个像图像类别这样的离散值时。对于这样离散值的预测问题&#xff0c;通常使用一些例如sigmoid/softmax的分类模型。 1. 图像分类任务 假设下面两个模型都是通过softmax的方式得到对于每…

图示Softmax及交叉熵损失函数

Softmax函数 Softmax是将神经网络得到的多个值&#xff0c;进行归一化处理&#xff0c;使得到的值在之间&#xff0c;让结果变得可解释。即可以将结果看作是概率&#xff0c;某个类别概率越大&#xff0c;将样本归为该类别的可能性也就越高。Softmax就如下图&#xff08;借鉴李…

最全的交叉熵损失函数(Pytorch)

损失函数 引言BCELossBCEWithLogitsLossNLLLossCrossEntropyLoss总结参考 引言 这里主要讲述pytorch中的几种交叉熵损失类&#xff0c;熵是用来描述一个系统的混乱程度,通过交叉熵我们就能够确定预测数据与真是数据之间的相近程度。交叉熵越小&#xff0c;表示数据越接近真实样…