如何在Android中制作椭圆形TabHost

Question

如何在Android中制作椭圆形TabHost

androidandroid-tabhosttabwidgettabactivityandroid-tabactivity

6

我试图按照下面的形状制作椭圆形标签页。

我尝试了以下代码。

    public class AndroidTabLayoutActivity extends TabActivity {
    TabHost tabHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        tabHost = getTabHost();
        TabHost.TabSpec spec;
        Intent intent;
        intent = new Intent().setClass(this, PhotosActivity.class);
        View tabView = createTabView(this, "Updates");
        spec = tabHost.newTabSpec("tab1").setIndicator(tabView).setContent(intent);
        tabHost.addTab(spec);

        tabView = createTabView(this, "Events");
        intent = new Intent().setClass(this, SongsActivity.class);
        spec = tabHost.newTabSpec("tab2").setIndicator(tabView)
                .setContent(intent);
        tabHost.addTab(spec);

        TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
        final int tabChildrenCount = tabWidget.getChildCount();
        View currentView;
        for (int i = 0; i < tabChildrenCount; i++) {
            currentView = tabWidget.getChildAt(0);
            LinearLayout.LayoutParams currentLayout =
                    (LinearLayout.LayoutParams) currentView.getLayoutParams();
            currentLayout.setMargins(0, 0, 16, 0);
        }
        tabWidget.requestLayout();
        tabHost.getTabWidget().setDividerDrawable(null);
    }

    private static View createTabView(Context context, String tabText) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
        TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
        tv.setText(tabText);
        return view;
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#2CA0E6">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="30dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="2dp">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:paddingTop="5dp">

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="70dp" />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </LinearLayout>
    </TabHost>
</LinearLayout>

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="@color/tab_textcolor"
android:background="@drawable/tab_selector"/>

我得到的输出如下图所示

有人可以帮忙吗，如何制作它。谢谢。

- Ravi Kumar Karunanithi

我认为你可以使用图片，一个线性布局将包含两个标签和一个图像在它们之间。 - Mayur Raval

TabActivity现在已经过时了.. 另外，您能否发布整个代码？ - shadygoneinsane

http://adanware.blogspot.in/2012/04/android-custom-tab-layouts-just-using.html - IntelliJ Amiya

http://joshclemm.com/blog/?p=136 - IntelliJ Amiya

@IntelliJAmiya 我使用您提供的链接（http://adanware.blogspot.in/2012/04/android-custom-tab-layouts-just-using.html）修改了代码 :D - Ravi Kumar Karunanithi

@akk 很好。我的问题是，为什么您正在使用已弃用的 TabActivity？ - IntelliJ Amiya

5个回答

2

在你的xml中试试这个，并将其用作选项卡。

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

  <corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:radius="60dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp" />

  <solid android:color="#CFCFCF" />

  <padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp" />

  <size
    android:height="60dp"
    android:width="270dp" />

</shape>

- Avanish Singh

1

您可以使用TabHost中的可绘制对象来制作椭圆形选项卡。请查找以下代码片段。

tabHost.newTabSpec("tab1").setIndicator(getCustomLayout()).setContent(intent);

私有的静态方法getCustomLayout(Context context, String tabText)，返回一个View对象。

在该方法中，使用LayoutInflater从给定的context上下文中填充自定义选项卡布局R.drawable.custom_tab，并将其作为返回值返回。

custom-tab.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
     <stroke
         android:width="1dp"
         android:color="#000000"/>
       <corners android:radius="2dp"/>
    </shape>

- Ashik

它显示了一个错误。我们如何将custom-tab.xml实现到布局中？ - Ravi Kumar Karunanithi

0

制作您自定义的背景XML，添加它并尝试使用它设置填充，这样就不需要使用图像或其他内容了。

- parik dhakan

0

我认为实现这种外观最简单的方法是创建3个可绘制对象作为分隔符： 1. 左侧选项卡聚焦（白色），右侧未聚焦（蓝色） 2. 右侧选项卡聚焦（白色），左侧未聚焦（蓝色） 3. 两个选项卡都未聚焦（蓝色）

当其中一个选项卡被聚焦后，您只需将其左侧和右侧的分隔符（如果存在）更改为聚焦状态。

我本想将其发布为评论，但我的声望还不够高，无法发表评论...

- Raphau

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charuක · Accepted Answer

这是一张图片。你需要做的就是准备好图片并将其设置为所选标签。就这么简单！

我没有那张图片，所以我使用下面的图片（_selected.png，_{not_selected.png}）来展示它的工作原理，但它们设计得不太好 ;)

P.s currentLayout.setMargins(0, 0, this_should_be_zero, 0); 你的图片应该有这些边距（任何期望的间隙），否则两张图片之间会有间隙。此外，你可以使用选择器（颜色不同的相同png文件）来显示所选项。

_{看起来你正在尝试找到一种编程方式来解决问题，如果你有额外的时间和精力，可以尝试使用Paint类来解决，如果使用形状将很难找到确切的视图，因为它很复杂，你可以看到标签A和B的视图不同，使用图片将是最简单的方法}

在你的custom_tab.xml中设置

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:clickable="true"
    android:padding="5dp"
    android:textSize="15sp"
    android:textStyle="bold"
    android:layout_gravity="center"
    android:ellipsize="marquee"
    android:MaxLines="1"   //  you can use this instead  of  android:singleLine="true" 
    android:textColor="@color/black"
    android:background="@drawable/tab_button_effect"/> // here set selector

tab_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/not_selected" android:state_selected="true"></item>
    <item android:drawable="@drawable/selected"></item>

</selector>