Question

我试图按照预期的形状制作椭圆形tabhost。

我尝试了以下代码。

    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"/>

我得到的输出如下图

任何人都可以帮助，如何制作它。感谢

Answer 1

那是一张图片。你需要做的就是准备好图片并将它们设置到选定的标签上。那就是它！

我没有那张图片，所以我使用下面的图片（_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>

Answer 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>

Answer 3

您可以通过在tabhost中使用drawable来制作椭圆形标签。请找到下面的代码片段

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

private static View getCustomLayout（Context context，String tabText）{ View view = LayoutInflater.from（context）.inflate（R.drawable.custom_tab，null，false）; 返回视图; }

定制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>

Answer 4

我认为实现这种外观的最简单方法是为分隔符创建3个drawable： 1.左侧标签聚焦（白色），右侧未聚焦（蓝色） 2.右侧聚焦（白色），左侧未聚焦（蓝色） 3.两者都没有集中（蓝色）

在其中一个标签聚焦后，您只需将其左右分隔符（如果存在）更改为聚焦标记。

我会将其作为评论发布，但我的声誉太低而尚无评论......

Answer 5

制作自定义背景xml并添加它并尝试设置填充，这样就不需要使用图像了，否则

如何在android中制作椭圆形tabhost

5 个答案: