Дизайн вкладок на андроид
Мне нужно, чтобы фон вкладки был установлен белым. Также мне нужно установить розовый цвет фона выбранной вкладки, а цвет фона оставшихся вкладок (невыбранная вкладка) - синий. Мой существующий код показан ниже. Что мне нужно изменить в нем?
main.xml:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:background="#ffffffff"
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:background="#ffffffff" >
<TabWidget
android:id="@android:id/tabs"
android:background="@drawable/tabicon"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:background="#ffffffff"
android:layout_height="fill_parent"/>
</LinearLayout>
</TabHost>
tab_indicator.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_unselected_v4" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_selected_v4" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false"
android:state_pressed="false"
android:drawable="@drawable/tab_focus" />
<item android:state_focused="true" android:state_selected="true"
android:state_pressed="false"
android:drawable="@drawable/tab_focus" />
<!-- Pressed -->
<item android:state_pressed="true"
android:drawable="@drawable/tab_press" />
</selector>
tab_unselected_v4.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
/>
</shape>
</item>
</selector>
tab_focus.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient BgColor for listrow Selected -->
<gradient
android:startColor="#5e8fb7"
android:centerColor="#5e8fb7"
android:endColor="#5e8fb7"
/>
</shape>
tab_selected.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#5e8fb7"
android:centerColor="#5e8fb7"
android:endColor="#5e8fb7"
/>
</shape>
tab_press.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#FFFFFF"
android:centerColor="#FFFFFF"
android:endColor="#FFFFFF"
/>
</shape>
РЕДАКТИРОВАТЬ: я добавил ниже code.now, мой цвет фона изменился на белый. Но мой выбранный элемент и цвет невыбранного элемента не устанавливают нужный цвет. Пожалуйста, помогите мне. Дайте мне несколько хороших решений.
tabicon.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="90"
/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<gradient android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="90" />
</shape>
</item>
</selector>
также добавлен ниже код Java:
for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
{
tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
}
tabHost.getTabWidget().setCurrentTab(0);
tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab_indicator);
}
public void onTabChanged(String tabId) {
// TODO Auto-generated method stub
for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
{
tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
}
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab_indicator);
}
}
РЕДАКТИРОВАТЬ:
Здесь я должен установить выбранный цвет фона и невыбранный цвет фона успешно.
Теперь я хочу, чтобы здесь была одна реализация.
Ширина первой вкладки больше, чем ширина второй и третьей вкладок. Как я могу это сделать???? Помогите мне, пожалуйста.
Здесь вкладка панели инструментов больше, чем вкладка заказа и клиента. Пожалуйста, помогите мне. Как я могу спроектировать и разработать это. Это мой вывод:
я хочу, чтобы o/p, как показано на рисунке ниже:
РЕДАКТИРОВАТЬ:
Здесь я должен использовать этот код в моем style.xml:
<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">20sp</item>
<item name="android:textStyle">bold</item>
</style>
После этого добавьте строку ниже в файл AndroidManifest.xml:
<activity android:name="MyTabActivity" android:theme="@style/CustomTheme">
Теперь я успешно изменил свой размер шрифта, цвет и стиль на tabhost.
2 ответа
Если вы хотите, чтобы ширина первой вкладки была больше, чем у второй и третьей, у вас может быть отдельный xml для нее и соответственно указана ширина. Я говорю об этом XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_selected_unselected">
</RelativeLayout>
Раздувая индикатор вкладок, вы можете раздувать различные вкладки с разными значениями xmls.
Я думаю, что будет лучше, если вы поместите TabWidget в LinearLayout, который имеет белый фон, подобный следующему:
<LinearLayout
android:id="@+id/ll_tab_widget"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white" >
<TabWidget
android:id="@android:id/tabs"
android:background="@drawable/tabicon"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Кроме того, для установки выбранного и невыбранного цвета вы можете создать xml с RelativeLayout, фон которого является селектором (с разными изображениями или цветами для выбранных и невыбранных состояний), например так:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabsLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_selected_unselected">
</RelativeLayout>
Затем вы можете надуть индикатор TabHost.TabSpec на приведенный выше xml.
Если вы обнаружите какие-либо трудности, вы можете опубликовать то же самое. Всего наилучшего!