【问题标题】:How to change the Tabs Images in the TabHost如何更改 TabHost 中的选项卡图像
【发布时间】:2011-05-29 07:22:50
【问题描述】:

我在我的应用程序中使用 TabHost,我在我的应用程序中使用了四个选项卡,并且当特定选项卡被选中和未选中时,我想在 TabHost 中使用不同的图像。我需要为每个特定选项卡使用不同的图像。

当我选择任何选项卡时,图像有点亮,当我切换到另一个选项卡时,明亮的图像变成灰色阴影。

我已经实现了 TabHost,但我不知道如何更改 TabHost 中的图像。

谁能帮帮我。

谢谢, 大卫

【问题讨论】:

  • @Suchismita 答案已被原发帖者接受。这个赏金的目的是什么?

标签: android android-tabhost android-image


【解决方案1】:

如果您希望为选中和未选中状态使用不同的图像,请在您的 drawables 文件夹中为每个选项卡创建“选择器”XML 文件,例如tab1_selector.xml, tab2_selector.xml 应该包含以下内容,替换对选定和未选定状态的图像的可绘制引用。即

    <?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:state_selected="true"
    android:drawable="@drawable/tab1_selected_image" />
  <item
    android:state_selected="false"
    android:drawable="@drawable/tab2_unselected_image" />
</selector>

然后使用上面 bharath 写的 .setIndicator 方法,您应该引用新的 xml 可绘制资源。

【讨论】:

    【解决方案2】:

    首先你必须有两张图片,因为你想从一张换到另一张,所以你需要两张图片,你必须把它放在三个drawable文件夹中。

    在我的示例中,我必须使用图像,一个名为 icon1.pngicon2.png

    之后,在可绘制文件夹中创建一个 xml 文件(所有可绘制文件夹的文件相同)。这是文件:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use icon1 -->
    <item android:drawable="@drawable/icon1"
          android:state_selected="true" />
    <!-- When not selected, use icon2-->
    <item android:drawable="@drawable/icon2" />
    </selector>
    

    您可以选择选择选项卡时将显示的图像。在这种情况下,icon1 会出现,因为我们在 state_selected=true 的标签上声明了它。

    现在,您在三个可绘制文件夹中拥有了两个图像和 xml 文件。好的!

    现在,在您声明选项卡的类中,为您要添加的每个选项卡添加这一行。

    tabHost.addTab(tabHost
    .newTabSpec("one")
    .setIndicator("The Tab",
      res.getDrawable(R.drawable.yourxmlfile))
    .setContent(new Intent(this, YourClass.class)));
    

    请记住,R.drawable.yourxmlfile 对应于您在可绘制文件夹中创建的 xml 文件。

    就是这样!希望对您有所帮助。

    【讨论】:

    • 一个更完整的答案。谢谢:)
    • 纽约市最佳解释.. :)
    【解决方案3】:

    要设置文本和图标,我们需要使用 setIndicator 属性。

     tabSpec.setIndicator(Char,Drawable);
     firstTabSpec.setIndicator("First Tab Name", getResources().getDrawable(R.drawable.logo));
     secondTabSpec.setIndicator("Second Tab Name",getResources().getDrawable(R.drawable.logo));
    

    使用它为每个标签设置单独的图像

    【讨论】:

    • 我不想使用文本和图标,我想更改选定和未选定表单上的选项卡图像。
    【解决方案4】:

    创建一个选择器xml文件tabicon.xml并放上这段代码

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/tab_enbled" android:state_selected="true"/>
        <item android:drawable="@drawable/tab_default" android:state_selected="false"/>
    </selector>
    

    现在转到您的 TabActivity 并输入此代码

    TabSpec MyTab = tabhost.newTabSpec("MyTab");
    MyTab.setIndicator("", getResources().getDrawable(R.drawable.tabicon));
    //note:if you give some text in setIndicator sometimes the icon will not be showed. 
    Intent tabIntent = new Intent(this, TabOne.class);
    TWTTab.setContent(tabIntent);
    

    【讨论】:

      【解决方案5】:

      thisTabLayout 教程中,选择和不选择 Tab 时使用不同的图像。

      基本上你必须创建一个Statelist drawable。这是来自开发者网站的相同代码

      <?xml version="1.0" encoding="utf-8"?>
      <selector xmlns:android="http://schemas.android.com/apk/res/android">
          <!-- When selected, use grey -->
          <item android:drawable="@drawable/ic_tab_artists_grey"
                android:state_selected="true" />
          <!-- When not selected, use white-->
          <item android:drawable="@drawable/ic_tab_artists_white" />
      </selector>
      

      还调用 setIndicator(CharSequence, Drawable) 来设置选项卡的文本和图标。

      【讨论】:

        【解决方案6】:

        此代码显示如何在标签主机中设置图标以及设置意图

          TabHost tabHost = getTabHost();
        
                // Tab for Photos
                TabSpec photospec = tabHost.newTabSpec("Photos");
                // setting Title and Icon for the Tab
                photospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_photos_tab));
                Intent photosIntent = new Intent(this, PhotosActivity.class);
                photospec.setContent(photosIntent);
        
                // Tab for Songs
                TabSpec songspec = tabHost.newTabSpec("Songs");
                songspec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_songs_tab));
                Intent songsIntent = new Intent(this, SongsActivity.class);
                songspec.setContent(songsIntent);
        
        
                // Tab for Videos
                TabSpec videospec = tabHost.newTabSpec("Videos");
                videospec.setIndicator("", getApplicationContext().getResources().getDrawable(R.drawable.icon_videos_tab));
                Intent videosIntent = new Intent(this, VideosActivity.class);
                videospec.setContent(videosIntent);
        
                // Adding all TabSpec to TabHost
                tabHost.addTab(photospec); // Adding photos tab
                tabHost.addTab(songspec); // Adding songs tab
                tabHost.addTab(videospec); // Adding videos tab
        

        【讨论】:

          【解决方案7】:

          您可以使用 ImageButton 更好,因为可以选择和不选择 imageView,并且可以选择不选择和按下 ImageButton 以及其他......

          【讨论】:

            【解决方案8】:

            @Suchismita 最好使用 TextView 而不是 TabActivity。 我在 tabactivity 中遇到了以下这些问题

            • 我无法在同一个选项卡中开始另一个活动,这是我面临的主要问题

            • 下一步是自定义选项卡视图,我无法更改可绘制的分隔线。

            • 并且 TabActivity 在 ICS 中已弃用

            接下来使用 TextView 我发现它非常容易处理事件和活动流,在这里您可以完全控制应用程序的行为,还可以根据需要自定义选项卡的外观。

            您对如何实施感兴趣吗?

            【讨论】:

              【解决方案9】:

              如果您想以编程方式更改选项卡的图像,那么:

              ImageView yourImage= (ImageView)mTabHost.getTabWidget().getChildTabViewAt(youtTabPosition).findViewById(android.R.id.icon);   
              yourImage.setImageResource(R.drawable.ic_more_vert_white_24dp);
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2018-06-14
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多