Android удаляет пробел между вкладками в tabwidget

ProgramBox

Android удаляет пробел между вкладками в tabwidget

Post author:admin
Запись опубликована:11 мая, 2023
Post category:Вопросы по программированию

#android #android-layout #android-tabhost #tabwidget #android-style-tabhost

#Android #android-макет #android-tabhost #tabwidget #в стиле Android-tabhost

Вопрос:

Я создал приложение, в котором есть вкладки, подобные в HelloTabActivity, между этими вкладками также есть пробел, кто-нибудь может подсказать, как удалить этот пробел, а также есть серая линия под вкладками, как это можно удалить?

введите описание изображения здесь

main.xml

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp" >
        <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scrollbars="none">
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
        </HorizontalScrollView>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp" />
    </LinearLayout>
</TabHost>
</LinearLayout>

styles.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="@android:style/Theme">
    <item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
</style>
<style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
    <item name="android:textAppearance">@style/CustomTabWidgetText</item>
</style>
<style name="CustomTabWidgetText" 
    parent="@android:style/TextAppearance.Widget.TabWidget">
    <item name="android:textSize">10sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">#1589FF</item>
    <item name="android:padding">3dip</item>
</style>


</resources>

Активность

 public class InfralineTabWidget extends TabActivity{

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

    Resources res = getResources(); // Resource object to get Drawables
    TabHost tabHost = (TabHost)getTabHost();  // The activity TabHost

    TabHost.TabSpec spec;  // Resusable TabSpec for each tab
    Intent intent;  // Reusable Intent for each tab

    // Create an Intent to launch an Activity for the tab (to be reused)
    intent = new Intent().setClass(this, TopNewsActivity.class);

    // Initialize a TabSpec for each tab and add it to the TabHost
    spec = tabHost.newTabSpec("topNews").setIndicator("Top News", res.getDrawable(R.drawable.tab_news)).setContent(intent);
    tabHost.addTab(spec);

    // Do the same for the other tabs
    intent = new Intent().setClass(this, PowerActivity.class);
    spec = tabHost.newTabSpec("power").setIndicator("Power", res.getDrawable(R.drawable.tab_power)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, EnergyActivity.class);
    spec = tabHost.newTabSpec("energy").setIndicator("Renewable Energy", res.getDrawable(R.drawable.tab_energy)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, CoalActivity.class);
    spec = tabHost.newTabSpec("coal").setIndicator("Coal", res.getDrawable(R.drawable.tab_coal)).setContent(intent);
    tabHost.addTab(spec);

    intent = new Intent().setClass(this, OilnGasActivity.class);
    spec = tabHost.newTabSpec("oilnGas").setIndicator("Oil amp; Gas", res.getDrawable(R.drawable.tab_oilngas)).setContent(intent);
    tabHost.addTab(spec);

    tabHost.setCurrentTab(0);
    tabHost.getTabWidget().getChildAt(0).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(1).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(2).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(3).setLayoutParams(new LinearLayout.LayoutParams(100,25));
    tabHost.getTabWidget().getChildAt(4).setLayoutParams(new LinearLayout.LayoutParams(100,25));



}



}

Теперь я хочу удалить черные пробелы между вкладками, и должно быть так, как будто они соединены, а также я не могу удалить серую линию под вкладками.

Спасибо

1. пожалуйста, поделитесь несколькими скриншотами о вашей проблеме и используемом вами XML-формате styles / themes. Может случиться, что вы где-то задаете глобальный стиль разделителя (layout xml или code), и это то, что вас сейчас беспокоит.

2. @rekaszeru : Я вставил код, пожалуйста, взгляните. 🙂

Ответ №1:

Для удаления серой линии в нижней части панели вкладок вы можете установить

 tabHost.getTabWidget().setStripEnabled(false);

Что касается удаления промежутка между вкладками.. Лучшим способом было бы использовать свой собственный drawable без каких-либо дополнений. Для этого вы можете использовать изображения или создавать фоновые изображения ваших вкладок с помощью xml, скажем, внутри <layer_list> корневого элемента:

 <layer_list>
    <item android:top="0dp" android:left="0dp" android:right="0dp" android:bottom="0dp">
        <shape android:shape="rectangle">
        [..]
        </shape>
    </item>
    [..]
</layer_list>

и установите этот объект рисования в качестве фона вашего TabWidget .

Чтобы узнать, как настроить ваши вкладки, в Интернете есть много руководств. Например, этот от Джоша короткий и имеет хорошее объяснение.

Обновить

Здесь я делюсь небольшим примером tabwidget с использованием пользовательских вкладок (на основе вашего кода) для достижения следующего результата:

пользовательские вкладки

Что вам нужно:

три новых слоя для рисования (для выбранных, сфокусированных и невыбранных состояний вкладок)
два отображаемых состояния (для текста и фона разных состояний)
новый макет для вкладок
обновите свой main.xml
обновите свой класс activity
обновите свой androidManifest.xml (удалите объявления стиля)

Трехслойные чертежи: tab_normal.xml , tab_focused.xml , tab_selected.xml
drawable/tab_normal.xml:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#AAAAAA" android:centerColor="#888888"
                android:endColor="#666666" android:angle="90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="1dp" android:right="1dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

drawable/tab_focused.xml:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#AAAAAA" android:centerColor="#888888"
                android:endColor="#666666" android:angle="90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="1dp" android:right="1dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#8F8F8F" android:centerColor="#656565"
                android:endColor="#3F3F3F" android:angle="90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

drawable/tab_selected.xml:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/default_back_color" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#EEEEEE" android:centerColor="#CCCCCC"
                android:endColor="#AAAAAA" android:angle="-90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="1dp" android:right="1dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#EAEAEA" android:centerColor="#9F9F9F"
                android:endColor="#696969" android:angle="90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

Два состояния для рисования: tab_background_selector.xml , tab_text_selector.xml
drawable/tab_background_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:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/tab_selected"/>
    <item android:state_selected="false" android:state_focused="false"
        android:state_pressed="false" android:drawable="@drawable/tab_normal" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_focused"/>
    <item android:state_focused="true" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/tab_selected"/>
</selector>

drawable/tab_text_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:color="#1589FF" />
    <item android:state_focused="true" android:color="#1589FF" />
    <item android:state_pressed="true" android:color="@android:color/white" />
    <item android:color="#F0F0F0" />
</selector>

Новый макет для вкладок: tab.xml
layout/tab.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="@drawable/tab_background_selector" android:gravity="center"
    android:orientation="vertical" android:padding="5dp">
    <ImageView android:id="@ id/tab_icon" android:layout_width="30dp"
        android:layout_height="30dp" android:scaleType="fitCenter" />
    <TextView android:id="@ id/tab_text" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:singleLine="true"
        android:textStyle="bold" android:gravity="center_horizontal"
        android:textSize="10sp" android:padding="3dip" android:ellipsize="marquee"
        android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

main.xml:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <HorizontalScrollView android:scrollbars="none"
                android:layout_width="fill_parent" android:layout_height="wrap_content">
                <TabWidget android:id="@android:id/tabs" 
                    android:layout_width="fill_parent" android:layout_height="wrap_content" />
            </HorizontalScrollView>
            <FrameLayout android:id="@android:id/tabcontent"
                android:layout_width="fill_parent" android:layout_height="fill_parent"
                android:padding="5dp" />
        </LinearLayout>
    </TabHost>
</LinearLayout>

InfralineTabWidget.java:

 public class InfralineTabWidget extends TabActivity
{
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        final TabHost tabHost = (TabHost) getTabHost();

        tabHost.addTab(createTab(TopNewsActivity.class, 
                "topNews", "Top News", R.drawable.tab_news));
        tabHost.addTab(createTab(PowerActivity.class, 
                "power", "Power", R.drawable.tab_power));
        tabHost.addTab(createTab(EnergyActivity.class, 
                "energy", "Renewable Energy", R.drawable.tab_energy));
        tabHost.addTab(createTab(CoalActivity.class, 
                "coal", "Coal", R.drawable.tab_coal));
        tabHost.addTab(createTab(OilnGasActivity.class, 
                "oilnGas", "Oil amp; Gas", R.drawable.tab_oilngas));

        tabHost.setCurrentTab(0);
        tabHost.getTabWidget().getChildAt(0).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(1).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(2).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(3).getLayoutParams().width = 140;
        tabHost.getTabWidget().getChildAt(4).getLayoutParams().width = 140;
    }

    private TabSpec createTab(final Class<?> intentClass, final String tag, 
            final String title, final int drawable)
    {
        final Intent intent = new Intent().setClass(this, intentClass);

        final View tab = LayoutInflater.from(getTabHost().getContext()).
            inflate(R.layout.tab, null);
        ((TextView)tab.findViewById(R.id.tab_text)).setText(title);
        ((ImageView)tab.findViewById(R.id.tab_icon)).setImageResource(drawable);

        return getTabHost().newTabSpec(tag).setIndicator(tab).setContent(intent);
    }
}

И это все.
Чтобы создать вкладки с прямыми углами, просто удалите спецификации углов из XML-файлов layer drawable.
Также поиграйте с цветами, штрихами и т.д., Чтобы результат соответствовал вашим предпочтениям.

1. я не понял, можете ли вы, пожалуйста, уточнить

2. пожалуйста, смотрите мое обновление для рабочего образца пользовательских вкладок. поиграйте с «границами», штрихами, цветами, углами, чтобы они выглядели так, как вам нравится.

3. Кажется нелепым проходить через все это, чтобы просто изменить фоновый рисунок вкладок в зависимости от состояния… отличный код, хотя

4. привет @rekaszeru как я могу применить другой цвет для каждой вкладки? Пожалуйста, помогите

5. @rekaszeru Возможно ли это? Или мне нужно установить отдельные XML-файлы для каждой вкладки?

Ответ №2:

используйте android:showDividers=»none» в XML-макете.

 <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:showDividers="none"
        android:layout_height="wrap_content"/>

Ответ №3:

Если ваша цель сборки — Honeycomb и далее, вы можете использовать следующий код.

 if (Integer.parseInt(Build.VERSION.SDK) >= Build.VERSION_CODES.HONEYCOMB) {
    tabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
}

Ответ №4:

Чтобы убрать лишний пробел между вкладками, можно установить для атрибута measureWithLargestChild в tabwidget значение false

 <TabWidget
   android:id="@android:id/tabs"                    
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:measureWithLargestChild="false">
 </TabWidget>

Ответ №5:

Одна волшебная строка.

 mTabHost.getTabWidget().setDividerDrawable(null);

Выполнено