Как сделать овальную форму tabhost в android

Question

Я попытался сделать овальную форму табуса, как и ожидалось ниже.

Я попытался следующие коды.

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

Я получил выход, как показано ниже изображения

Может кто-нибудь поможет, то как т o сделать это. Спасибо

Answer 1

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

Ну у меня нет этого образа, поэтому я использовал ниже изображения ( _selected.png, _{not_selected.png}), чтобы показать, как это работает, но они не всегда хорошо;)

PscurrentLayout.setMargins(0, 0, this_should_be_zero, 0); и ваши изображения должны иметь, что поля (независимо от ожидаемого зазора) в противном случае будет разрыв между двумя изображениями. Кроме того, вы можете использовать селектор (тот же png с другим цветом), чтобы отобразить выбранный.

_{Кажется, вы пытаетесь выяснить программный способ попытаться обойти с классом Paint, если вы получили дополнительное время & усилие, если вы используете формы будет трудно выяснить точное представление, так как это сложно, вы можете увидеть вкладку вид и 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

Я думаю, что самый простой способ для того чтобы достигнуть такой взгляд является создание 3 для вводимого коэффициента сепараторов: 1. Левая вкладка фокусируется (белый), право не сфокусирован (синий) 2. Право сфокусированные (белый), левый не сфокусированный (синий) 3. оба не сфокусированы (синий)

После того, как одна из вкладок будет сфокусирована, вы просто измените ее левый и правый разделитель (если существует) на сфокусированный.

я бы разместить его в качестве комментария, но моя репутация слишком низка еще комментариев ...

Answer 3

вы можете сделать овальные вкладки с помощью вводимого коэффициента в tabhost.пожалуйста, найти ниже фрагменты кода

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

частного статического View getCustomLayout (контекст Context, String tabText) { View вид = LayoutInflater.from (контекст) .inflate (R.drawable.custom_tab, нуль, ложь) ; вид возврата; }

заказ 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

сделать свой собственный фон XML и добавить его и попытаться установить отступы с этим поэтому нет необходимости использовать изображение или еще

Answer 5

попробовать это в вашем xml.and использовать его как вкладку.

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