web-dev-qa-db-ja.com

TabLayoutのタブ間にマージンを追加するにはどうすればよいですか？

TabLayoutのタブ間にマージンを追加する方法はありますか？ Widget.Design.TabLayoutのカスタムスタイルを使用して試しましたが、パディングにのみ関連するプロパティがあり、マージンはありません。

androidandroid-tablayout
14
Todor Kostov

2、3時間を費やした後、ようやく解決策を見つけました。

TabLayoutを使用している場合、スタイルなどを使用してタブにマージンを追加する方法はありません。 （Android以前の@Connecting lifeとして）

しかし、いくつかのJavaコードを書くことでそれを行うことができます。すべてのコードのすべてがそのコードに似ているはずです：

            for(int i=0; i < mTabLayout.getTabCount(); i++) {
                View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
                ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
                p.setMargins(0, 0, 50, 0);
                tab.requestLayout();
            }

すべてのタブをビューとして取得するには、まずそれらを含むコンテナを取得する必要があります。この場合、TabLayoutはSlidingTabStripをタブのコンテナーとして使用しています。 SlidingTabStripはTabLayoutの最初の子です。

View tab = ((ViewGroup) mTabLayout.getChildAt(0))

そして、この小さなディテールの後、すべてが非常に簡単です。

36
Todor Kostov

これが私が純粋なxmlでそれをした方法です。

dimens.xml：

<!-- Set this to 50% of what you want the actual space between the tabs to be. -->
<dimen name="tab_spacing_half">5dp</dimen> <!-- i.e., 10dp spacing between tabs. -->

TabLayoutを含むレイアウト：

<Android.support.design.widget.TabLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/tab_spacing_half"/>

styles.xmlのテーマにこれを追加します：

<item name="tabBackground">@drawable/tab_background</item>

drawable-nodpi\tab_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:drawable="@drawable/tab_background_selected"
        Android:state_selected="true" />

    <item
        Android:drawable="@drawable/tab_background_unselected"
        Android:state_selected="false"
        Android:state_focused="false"
        Android:state_pressed="false" />

</selector>

drawable-nodpi\tab_background_selected.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:left="@dimen/tab_spacing_half"
        Android:right="@dimen/tab_spacing_half"
        Android:top="@dimen/tab_spacing_half"
        Android:bottom="@dimen/tab_spacing_half">

        <shape
            Android:shape="rectangle">

            <corners
                Android:radius="@dimen/border_radius_small">
            </corners>

            <stroke
                Android:width="@dimen/divider_height_thick"
                Android:color="@color/white">
            </stroke>

        </shape>

    </item>

</layer-list>

...そこが秘訣です。実際には、@dimen/tab_spacing_halfの値に応じて、「パディング」を使用して、itemで背景の形状をラップします。そして最後に...

drawable-nodpi\tab_background_unselected.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:left="@dimen/tab_spacing_half"
        Android:right="@dimen/tab_spacing_half"
        Android:top="@dimen/tab_spacing_half"
        Android:bottom="@dimen/tab_spacing_half">

        <shape
            Android:shape="rectangle">

            <corners
                Android:radius="@dimen/border_radius_small">
            </corners>

            <stroke
                Android:width="@dimen/divider_height_thin"
                Android:color="@color/white">
            </stroke>

        </shape>

    </item>

</layer-list>
2
ban-geoengineering

@Todor Kostovの回答のKotlinバージョンは次のとおりです。

 for (i in 0 until applicationList_tabLayout.tabCount) {
            val tab = (applicationList_tabLayout.getChildAt(0) as ViewGroup).getChildAt(i)
            val p = tab.layoutParams as ViewGroup.MarginLayoutParams
            p.setMargins(10, 0, 10, 0)
            tab.requestLayout()
 }
1
Vadims Krutovs

@Todor Kostovはうまく答えましたが、最後のタブにも余白があるため、タブの中央がずれています。

したがって、mTabLayout.getTabCount() - 1の代わりにmTabLayout.getCodeCount()を使用してください。

        for(int i=0; i < mTabLayout.getTabCount() - 1; i++) {
            View tab = ((ViewGroup) mTabLayout.getChildAt(0)).getChildAt(i);
            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
            p.setMargins(0, 0, 50, 0);
            tab.requestLayout();
        }
1
Tura

これは、4つの異なるタブにマージンを設定する方法です。 setMargins（v1、v2、v3、v4）関数の値を変更して、作業しているタブの数に適したフィッティングを取得できます。これがお役に立てば幸いです。 tabHostは、作業中のさまざまなタブをホストするTabHostのオブジェクトであることに注意してください。

Display display = getWindowManager().getDefaultDisplay();
            int width = display.getWidth();
            View currentView;
          for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
            {
                //This code removes divider between tabs
                tabHost.getTabWidget().setDividerDrawable(null);
                tabHost.getTabWidget().getChildAt(i).setLayoutParams(new
                         LinearLayout.LayoutParams((width/8)-2,50));
                 currentView = tabHost.getTabWidget().getChildAt(i);
                  LinearLayout.LayoutParams currentLayout =
                      (LinearLayout.LayoutParams) currentView.getLayoutParams();
                  currentLayout.setMargins(30, 5, 80, 0);

            }
0
Edwinfad