web-dev-qa-db-ja.com

TabLayoutを使用してアイコン付きのアプリバーを作成する方法Android Design？

Androidデザインライブラリで新しいTabLayoutを使用して、アイコン付きのアプリバーを作成しようとしています。

public void setupTabLayout(TabLayout tabLayout) {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setupWithViewPager(mViewpager);
    tabLayout.getTabAt(0).setIcon(R.drawable.ic_tabbar_library);
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_tabbar_recents);
    tabLayout.getTabAt(2).setIcon(R.drawable.ic_tabbar_favorites);
    tabLayout.getTabAt(3).setIcon(R.drawable.ic_tabbar_notifications);
    tabLayout.getTabAt(4).setIcon(R.drawable.ic_tabbar_settings);
}

結果：

app bar with icons

同様のアプリバーを作成するのを手伝ってください：

app bar with icons

申し訳ありませんが私の英語は苦手です。ありがとうございます！

android-tabhostandroid-tabsandroid-design-library
19
natuan241

ドキュメントから：

https://developer.Android.com/reference/Android/support/design/widget/TabLayout.Tab.html#setCustomView（Android.view.View）

このタブに使用するカスタムビューを設定します。これは、setText（CharSequence）およびsetIcon（Drawable）によって設定された値をオーバーライドします。

タイトル値を自分で設定する必要があります

あなたの例から：

public void setupTabLayout(TabLayout tabLayout) {
    tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
    tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
    tabLayout.setupWithViewPager(mViewpager);

    TextView tab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tab.setText("Library");
    tab.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tabbar_library, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tab);
    //..
}

custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:id="@+id/tab" />

更新

APIが変更され、カスタムIDを設定できるようになったため、text/drawableを手動で設定する必要がなくなりました。アダプターの値を使用します。

指定されたビューにIDがtext1のTextViewが含まれている場合、setText（CharSequence）に指定された値で更新されます。同様に、このレイアウトにIDアイコン付きのImageViewが含まれる場合、setIcon（Drawable）に指定された値で更新されます。

28
Chris Dinon

TabItemのAndroid:layout属性を使用して、カスタムビューを設定できます。カスタムビューxmlファイルでは、アイコンとテキストビューのidを@Android:id/iconとAndroid:id="@Android:id/text1"に設定することを忘れないでください。そうすれば、ライブラリが残りを処理します。

以下に例を示します。

。 custom_tab_item.xml

<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal">

  <ImageView
      Android:id="@Android:id/icon"
      Android:layout_width="16dp"
      Android:layout_height="16dp"
      Android:layout_marginTop="4dp"
      Android:scaleType="centerInside"/>

  <TextView
      Android:id="@Android:id/text1"
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:layout_marginLeft="8dp"
      Android:textSize="16dp"/>

</LinearLayout>

。 main.xml

<Android.support.design.widget.TabLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

  <Android.support.design.widget.TabItem
      Android:id="@+id/ti_activities"
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:icon="@drawable/ic_question"
      Android:layout="@layout/custom_tab_item"
      Android:text="@string/activities"/>

  <Android.support.design.widget.TabItem
      Android:id="@+id/ti_profile"
      Android:layout_width="wrap_content"
      Android:layout_height="wrap_content"
      Android:icon="@drawable/ic_question"
      Android:layout="@layout/custom_tab_item"
      Android:text="@string/Profile"/>

</Android.support.design.widget.TabLayout>

この助けを願っています。

3
nlt

ドキュメント のようにTabLayoutを使用して、xmlを介してTabItemにアイテムを追加できます。使用例は次のとおりです。

 <Android.support.design.widget.TabLayout
         Android:layout_height="wrap_content"
         Android:layout_width="match_parent">

     <Android.support.design.widget.TabItem
             Android:text="@string/tab_text"/>

     <Android.support.design.widget.TabItem
             Android:icon="@drawable/ic_Android"/>

 </Android.support.design.widget.TabLayout>
2
Amir

アイコンとしてのベクトルドロアブル を使用する場合、異なる状態に単純に色付けすることにより、単一のドロアブルを異なる状態に再利用できます。 この方法でapkサイズとリソースの割り当てを削減できます。 最初にカスタムFragmentPagerAdapterを定義します（ここではJavaここではなく）

class TabPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    override fun getCount(): Int = 2

    override fun getItem(position: Int): Fragment = when (position) {
        0 -> FirstFragment.newInstance()
        else -> SecondFragment.newInstance()
    }

    fun getPageIcon(context: Context, position: Int): Drawable = when (position) {
        0 -> ContextCompat.getDrawable(context, R.drawable.ic_whatshot)
        else -> ContextCompat.getDrawable(context, R.drawable.ic_face)
    }
}

getPageTitleを実装する代わりに、特定のタブのドロアブルを返すgetPageIconメソッドを作成します。次に、カスタムTabLayoutを作成します。

class IconTabLayout : TabLayout {

    private var viewPager: ViewPager? = null

    constructor(context: Context) : super(context)
    constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet)
    constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(context, attributeSet, defStyleAttr)

    override fun onAttachedToWindow() {
        if (viewPager == null) {
            if (parent is ViewPager) viewPager = parent as ViewPager
        }
        super.onAttachedToWindow()
    }

    override fun setupWithViewPager(viewPager: ViewPager?, autoRefresh: Boolean) {
        this.viewPager = viewPager
        super.setupWithViewPager(viewPager, autoRefresh)
    }

    override fun addTab(@NonNull tab: Tab, position: Int, setSelected: Boolean) {
        if (viewPager != null && viewPager!!.adapter is TabPagerAdapter) {
            val icon: Drawable = DrawableCompat.wrap((viewPager!!.adapter as TabPagerAdapter).getPageIcon(context, position))
            DrawableCompat.setTintList(icon.mutate(), ContextCompat.getColorStateList(context, R.color.tab_color))
            tab.icon = icon
        }
        super.addTab(tab, position, setSelected)
    }
}

そのため、アイコンと色の状態リストが設定されるaddTabメソッドで魔法が発生します。色状態リストの構造は次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <!-- Non focused states -->
    <item Android:color="@color/tab_not_active" Android:state_focused="false" Android:state_pressed="false" Android:state_selected="false" />
    <item Android:color="@color/tab_active" Android:state_focused="false" Android:state_pressed="false" Android:state_selected="true" />

    <!-- Focused states -->
    <item Android:color="@color/tab_not_active" Android:state_focused="true" Android:state_pressed="false" Android:state_selected="false" />
    <item Android:color="@color/tab_active" Android:state_focused="true" Android:state_pressed="false" Android:state_selected="true" />

    <!-- Pressed -->
    <item Android:color="@color/tab_not_active" Android:state_pressed="true" />
</selector>
1
Upvote