android - Android タブの設計上の問題

Question

Android タブのデザインについては、ほとんど助けが必要です。下のこの画像でわかるように、タブはかなり醜く、非常に幅が広​​いように見えます。これをより薄く見せるにはどうすればよいですか。空のスペースがあまりないテキストが必要なだけです。

私の 2 番目の問題は、下の画像に表示されているものです。最初のタブで他のアクティビティからデータを読み込んでいますが、下の画像でわかるように、非常に変形しているように見えます。その他の活動では、ScrollView があります。

Answer 1

この方法でカスタムタブを作成できます

TabIndicator を表すレイアウトを作成する

これは tab_indicator.xml です

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/tv_tabTitle"
              android:layout_width="fill_parent"
              android:layout_height="35dp"
              android:background="@drawable/bg_tab_indicator"
              android:gravity="center"
              android:textSize="15sp"
              android:textColor="@drawable/tv_tab_indicator_title"
              android:text="Tab title"
              />

これは bg_tab_indicator.xml ドローアブルです

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Unselected tab -->
    <item android:state_focused="false"
          android:state_selected="false"
          android:state_pressed="false"
          android:drawable="@drawable/bg_tab_indicator_unselected"/>

    <!-- Selected tab -->
    <item android:state_focused="false"
          android:state_selected="true"
          android:state_pressed="false"
          android:drawable="@drawable/bg_tab_indicator_selected"/>

    <!-- Pressed tab -->
    <item android:state_pressed="true"
          android:drawable="@drawable/bg_tab_indicator_pressed"/>

    <!-- Selected tab using dial pad -->
    <item android:state_pressed="false"
          android:state_focused="true"
          android:state_selected="true"
          android:drawable="@drawable/bg_tab_indicator_selected"/>

</selector>

今あなたのTabActivityで

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.tab_activity);
    //if you are not using TabActivity then use findViewById(id) to find tabHost
    final TabHost tabHost = getTabHost();
    tabHost.setup();
    //if you are not using TabActivity then use findViewById(id) to find tabWidget
    TabWidget tabWidget = getTabWidget();
    tabWidget.setDividerDrawable(R.drawable.divider_tab);
    addTab("Tab1", tabHost, R.id.tab1);
    addTab("Tab2", tabHost, R.id.tab2);
    addTab("Tab3", tabHost, R.id.tab3);
}

これはaddTabメソッドです

private void addTab(String label, TabHost tabHost, int content){
    TabHost.TabSpec tabSpec = tabHost.newTabSpec(label)
           .setIndicator(indicatorView(label))
           .setContent(content);
    tabHost.addTab(tabSpec);
}

このメソッドは indicatorView を生成します

private View indicatorView(String label){
    View view = layoutInflater.inflate(R.layout.tab_indicator, null);
    TextView textView = (TextView) view;
    textView.setText(label);
    return view;
}

これがあなたを助けることを願っています