2015 年 5 月 29 日の更新 としてタブをセットアップしました。Nexus 4 モバイルではタブが全幅になりますが、nexus 7 タブレットではタブが中央にあり、全画面幅をカバーしません。
Nexus 7 のスクリーンショット
Nexus 4 のスクリーンショット
2015 年 5 月 29 日の更新 としてタブをセットアップしました。Nexus 4 モバイルではタブが全幅になりますが、nexus 7 タブレットではタブが中央にあり、全画面幅をカバーしません。
Nexus 7 のスクリーンショット
Nexus 4 のスクリーンショット
Kaizie から借用した「より単純な」回答app:tabMaxWidth="0dp"
は、TabLayout
xmlに追加するだけです。
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
私は同じ問題を抱えていて、TabLayout スタイルをチェックしたところ、デフォルトのスタイルがWidget.Design.TabLayout
異なる実装 (通常、横向き、sw600dp) であることがわかりました。
必要なものは、次の実装を持つタブレット用 (sw600dp) です。
<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabGravity">center</item>
<item name="tabMode">fixed</item>
</style>
このスタイルから、"fill" 値を使用して " tabGravity " (可能な値は "center" または "fill") を使用します。
しかし、さらに深く掘り下げる必要があり、これが から拡張されていることがわかります。そのBase.Widget.Design.TabLayout
実装は次のとおりです。
<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabPaddingStart">12dp</item>
<item name="tabPaddingEnd">12dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
したがって、このスタイルから「tabMaxWidth」をオーバーライドする必要があります。私の場合は に設定した0dp
ので、制限はありません。
そして、私のスタイルは次のようになりました:
<style name="MyTabLayout" parent="Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMaxWidth">0dp</item>
</style>
そして、タブバーが画面全体を左右に埋めます。
スクロール可能なソリューション: (TabLayout.MODE_SCROLLABLE)、つまり、2 つ以上のタブ (動的タブ) が必要な場合です。
ステップ 1: style.xml
<style name="tabCustomStyle" parent="Widget.Design.TabLayout">
<item name="tabGravity">fill</item>
<item name="tabMaxWidth">0dp</item>
<item name="tabIndicatorColor">#FFFEEFC4</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">#FFFEEFC4</item>
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">@dimen/tab_text_size</item>
<item name="android:textAppearance">@style/TextAppearance.roboto_medium</item>
<item name="textAllCaps">true</item>
</style>
<style name="TextAppearance.roboto_medium" parent="android:TextAppearance">
<item name="android:fontFamily">sans-serif-medium</item>
</style>
ステップ 2 : xml レイアウト
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
style="@style/tabCustomStyle"
android:layout_width="match_parent"
android:layout_height="@dimen/tab_strip_height"
android:background="@color/your_color"
app:tabMode="scrollable"
app:tabTextColor="@color/your_color" />
ステップ 3: タブがあるアクティビティ/フラグメント内。
/**
* To allow equal width for each tab, while (TabLayout.MODE_SCROLLABLE)
*/
private void allotEachTabWithEqualWidth() {
ViewGroup slidingTabStrip = (ViewGroup) mTabLayout.getChildAt(0);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
View tab = slidingTabStrip.getChildAt(i);
LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
layoutParams.weight = 1;
tab.setLayoutParams(layoutParams);
}
}
タブを強制的に全幅にする (均等なサイズに分割する) には、次をTabLayout
ビューに適用します。
TabLayout tabLayout = (TabLayout) findViewById(R.id.your_tab_layout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
私のために働いてください。これもあるxmlns:app="http://schemas.android.com/apk/res-auto"