아이콘 만있는 Tablayout

아이콘 만있는 Tablayout

---

디자인 지원을 사용하여 탭을 만들고 있습니다. ViewPager스 와이프 가능한 탭 에도 사용 하고 있습니다.

이제 탭에서 텍스트 대신 아이콘 만 사용하는 방법을 모르겠습니다. 알아 내려고했지만 성공하지 못했습니다.

내 코드 :

Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(R.id.pager);
    setupViewPager(viewPager);
    setupTablayout();
}

private void setupTablayout() {
    tabLayout = (TabLayout) findViewById(R.id.tabLayout);
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);
}

class MyPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public MyPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        mFragmentTitleList.get(position)
    }
}

private void setupViewPager(ViewPager viewPager) {
    MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
    adapter.addFrag(new frag(), "CAT");
    adapter.addFrag(new frag(), "DOG");
    adapter.addFrag(new frag(), "BIRD");
    viewPager.setAdapter(adapter);
}

---

한 가지 방법은 TabLayout.setupWithViewPager () 메서드 이후에 아이콘을 설정하는 것입니다.

mTabLayout.setupWithViewPager(mViewPager);
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
  mTabLayout.getTabAt(i).setIcon(R.drawable.your_icon);
}

---

다음 링크에 표시된 자습서는 원하는 내용을 다루어야합니다. https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout#add-icons-to-tablayout

아래 관련 섹션을 복사했습니다.

TabLayout에 아이콘 추가

현재 TabLayout 클래스는 탭에서 아이콘을 허용하는 깨끗한 추상화 모델을 제공하지 않습니다. 게시 된 해결 방법 중 하나는 아래 코드 스 니펫에 표시된대로 PagerAdapter의 getPageTitle (position) 메서드에서 ImageSpan에 아이콘이 포함 된 SpannableString을 반환하는 것입니다.

private int[] imageResId = {
        R.drawable.ic_one,
        R.drawable.ic_two,
        R.drawable.ic_three
};

// ...

@Override
public CharSequence getPageTitle(int position) {
    // Generate title based on item position
    // return tabTitles[position];
    Drawable image = context.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight());
    SpannableString sb = new SpannableString(" ");
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

기본적으로 TabLayout에서 만든 탭은 textAllCaps 속성을 true로 설정하여 ImageSpans가 렌더링되지 않도록합니다. tabTextAppearance 속성을 변경하여이 동작을 재정의 할 수 있습니다.

  <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
  </style>

  <style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="textAllCaps">false</item>
  </style>

---

의 새 버전에서는 다음 코드를 사용하여 XML을 통해 아이콘을 쉽게 추가 할 수있는 TabLayoutgoogle이 추가되었습니다 TabItem.

<android.support.design.widget.TabLayout
         app:tabTextColor="@color/gray"
         app:tabMode="fixed"
         app:tabBackground="@color/red"
         app:tabIndicatorHeight="4dp"
         app:tabIndicatorColor="@color/purple"
         app:tabPadding="2dp"
         app:tabSelectedTextColor="@color/white"
         app:tabMinWidth="64dp"
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <!--add height and width to TabItem -->
     <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>

여기에서 더 많은 것을 보십시오 .

---

이 시도

    public class GlobalActivity extends AppCompatActivity {
    Toolbar toolbar;
    ViewPager viewPager;
    TabLayout tabLayout;
    ViewPagerAdapter adapter;
    private int[] tabIcons = {
            R.drawable.home_ic,
            R.drawable.biz_ic,
            R.drawable.network_ic,
            R.drawable.offers_ic,
            R.drawable.message_ic_b
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_global_hub);
        tab();
    }
    public void tab(){
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

    }
    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
        tabLayout.getTabAt(3).setIcon(tabIcons[3]);
        tabLayout.getTabAt(4).setIcon(tabIcons[4]);

    }
    public void setupViewPager(ViewPager viewPager){
        adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new GlHubFragment(),"HOME");
        adapter.addFrag(new BizForumFragment(), "BIZ FORUM");
        adapter.addFrag(new NetworkFragment(), "NETWORK");
        adapter.addFrag(new MessagesFragment(), "MESSAGEs");
        adapter.addFrag(new OfferFragmentActivity(), "OFFER");
        viewPager.setAdapter(adapter);
    }

    public class ViewPagerAdapter extends FragmentPagerAdapter{
        private final List<Fragment> mfragmentlist =new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mfragmentlist.get(position);
        }

        @Override
        public int getCount() {
            return mfragmentlist.size();
        }
        public void addFrag(Fragment fragment,String title){
            mfragmentlist.add(fragment);
            mFragmentTitleList.add(title);
        }
        @Override
        public CharSequence getPageTitle(int position){
            return mFragmentTitleList.get(position);
        }
    }
}

---

아이콘을 사용하는 가장 쉬운 방법은 Tablayout.Tab.setIcon (drawable)을 사용하는 것입니다. 또한 선택한 아이콘을 쉽게 강조 표시 할 수 있습니다. 이렇게하려면 다음 단계를 따르십시오.

1 단계. res.mipmap 폴더에 이미지를 추가합니다. (mipmap-mdpi, hdpi 등) 여기에 다른 답변으로 판단하면 res.drawable 폴더에 넣는 것도 좋습니다.

2 단계. TabLayout 및 ViewPager를 설정 한 후 모든 탭에서 setIcon을 호출합니다. 활동을 깔끔하게 유지하기 위해 AdapterTabs에서 이것을 수행했습니다. 따라서 활동에서 다음을 수행하십시오.

    tablayout = (TabLayout) findViewById(R.id.tab_layout);
    viewPager = (ViewPager) findViewById(R.id.viewPager);
    adapterTabs = new AdapterTabs(this, getSupportFragmentManager(), fragments, tablayout, viewPager);

    viewPager.setAdapter(adapterTabs);
    tablayout.setupWithViewPager(viewPager);
    adapterTabs.setTabIcons();

FragmentPagerAdapter를 확장해야하는 AdapterTabs에 setTabIcons () 메소드를 넣으십시오.

    public void setTabTitlesToIcons() {
    Drawable icon1 = context.getResources().getDrawable(R.mipmap.ic_1);
    Drawable icon2 = context.getResources().getDrawable(R.mipmap.ic_2);
    Drawable icon3 = context.getResources().getDrawable(R.mipmap.ic_3);
    Drawable icon1Hilighted = context.getResources().getDrawable(R.mipmap.ic_1_selected);
    Drawable icon2Hilighted = context.getResources().getDrawable(R.mipmap.ic_2_selected);
    Drawable icon3Hilighted = context.getResources().getDrawable(R.mipmap.ic_3_selected);

    icons.add(icon1);
    icons.add(icon2);
    icons.add(icon3);
    iconsHilighted.add(icon1Hilighted);
    iconsHilighted.add(icon2Hilighted);
    iconsHilighted.add(icon3Hilighted);

    for(int i = 0; i < icons.size(); i++) {
        if(i == 0) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

두 목록 'icons'및 'iconsHilighted'에 대한 참조를 저장해야합니다. 나중에 필요합니다. 또한 활동에서 전달한 TabLayout 및 ViewPager에 대한 참조를 저장하십시오.

단계 3. AdapterTabs.getPageTitle ()이 null을 반환하는지 확인합니다. 이 시점에서 실행하면 첫 번째 아이콘이 강조 표시됩니다.

4 단계. AdapterTabs에서 ViewPager.OnPageChangeListener를 구현하고 해당 수신기를 viewPager에 추가합니다.

    public AdapterTabs(Context context, FragmentManager fragmentManager, List<Fragment> fragments, TabLayout tabLayout, ViewPager viewPager) {
    super(fragmentManager);
    this.context = context;
    this.tabLayout = tabLayout;
    this.viewPager = viewPager;
    this.viewPager.addOnPageChangeListener(this);

    tabs.add(fragments.get(0));
    tabs.add(fragments.get(1));
    tabs.add(fragments.get(2));
}

단계 5. AdapterTab의 onPageSelected 콜백에있는 탭의 아이콘을 업데이트합니다.

    @Override
public void onPageSelected(int position) {
    for (int i = 0; i < tabs.size(); i++) {
        if(i == position) {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(iconsSelected.get(i));
        }
        else {
            //noinspection ConstantConditions
            tabLayout.getTabAt(i).setIcon(icons.get(i));
        }
    }
}

이제 탭을 변경할 때 강조 표시된 아이콘이 업데이트되는 것을 볼 수 있습니다.

---

TabLayout을 ViewPager "장식"시나리오로 사용할 때 이러한 방법 중 어느 것도 우아하지 않습니다. TabLayout 문서 다음은 TabLayout 클래스 외부에 아이콘을 수동으로 추가하지 않고 PagerAdapter를 사용하여 탭 정보를 가져 오지 않고도 두 시나리오에서 사용할 수 있어야하는 TabLayout 대신 사용할 수있는 간단한 TabLayout 및 PagerAdapter 확장입니다. .

/**
 * Created by JDL on 1/18/2017.
 */
public class TabLayoutExt extends TabLayout {

    protected ViewPager mViewPager;

    public abstract static class TabLayoutViewPagerAdapter extends PagerAdapter {
        public TabLayoutViewPagerAdapter() {
        }

        /**
         * This method may be called by the TabLayout to obtain an icon drawable
         * to for the specified tab. This method may return null
         * indicating no tab icon for this page. The default implementation returns
         * null.
         *
         * @param position The position of the title requested
         * @return A drawable icon for the requested page
         */
        public Drawable getPageIcon(Context context, int position) {
            return null;
        }
    }

    public TabLayoutExt(Context context) {
        super(context);
    }

    public TabLayoutExt(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TabLayoutExt(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onAttachedToWindow() {
        //Cover the implicit setup in TabLayout
        if (mViewPager == null) {
            final ViewParent vp = getParent();
            if (vp instanceof ViewPager) {
                mViewPager = (ViewPager)vp;
            }

        }
        super.onAttachedToWindow();
    }

    public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        if (mViewPager != null && mViewPager.getAdapter() instanceof TabLayoutViewPagerAdapter) {
            Drawable icon = ((TabLayoutViewPagerAdapter) mViewPager.getAdapter()).getPageIcon(getContext(),position);
            tab.setIcon(icon);
        }
        super.addTab(tab,position,setSelected);

    }

    @Override
    public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
        mViewPager = viewPager;
        super.setupWithViewPager(viewPager, autoRefresh);
    }
}

요구 이루어집니다 연장 할 모든 그래서 TabLayoutViewPagerAdapter대신 PageAdapter하고 구현 getPageIcon(Context,int)대신 또는 제목에 추가. 에서 드롭 TabLayoutExt대신 정상의 XML 파일에서, TabLayout. 이것은 사용자 정의보기 또는 다른 것으로 탭을 추가로 수정하기 위해 확장 될 수 있습니다.

---

이어 TabLayout, 아이콘을 설정하는 것은 간단합니다 :

getPageTitle(position)null(제목을 표시하지 않으려면) 반환해야합니다 .

다음 :

tabLayout.getTabAt(0).setIcon(resId);

tabLayout.getTabAt(1).setIcon(resId);

......

---

이것을 시도하면 확실히 작동합니다.

private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
        R.drawable.single,
        R.drawable.multiple};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_contact_picker);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("Choose contact");
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    tab();
}


public void tab(){
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
}

private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);

}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new Login());
    adapter.addFragment(new Register());
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment) {
        mFragmentList.add(fragment);

    }


}

---

가장 간단한 방법은 tablayout에 Icon을 설정하여 새 테이블을 만드는 것입니다. 아래 코드는 아이콘 만있는 두 개의 탭을 생성합니다. onCreate () 메서드에서이 코드 사용

 tablayout = (TabLayout) findViewById(R.id.order_tablayout);
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_shopping_cart_white_24dp)) );
 tablayout.addTab( tablayout.newTab().setIcon(getResources().getDrawable(R.mipmap.ic_like2_fille_white_24dp)) );

---

주석에서 언급했듯이 PagerAdapter를 사용할 때 TabLayout에서 아이콘을 정의하면 작동하지 않습니다. Kotlin을 사용하는 경우 한 가지 해결 방법은 다음과 같은 확장 함수를 만드는 것입니다.

fun TabLayout.setupWithViewPagerAndKeepIcons(viewPager : ViewPager?) {
    val icons =  mutableListOf<Drawable?>()
    repeat(tabCount) {
        icons.add(getTabAt(it)?.icon)
    }
    setupWithViewPager(viewPager)

    repeat(tabCount) {
        getTabAt(it)?.setIcon(icons.get(it))
    }
}

Then in the layout.xml add your icons to the TabLayout:

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout">

        <com.google.android.material.tabs.TabItem
                android:icon="@drawable/your_icon"/>

    </com.google.android.material.tabs.TabLayout>

Finally, use the extension function to setup the TabLayout with a ViewPager.

tab_layout.setupWithViewPagerAndKeepIcons(view_pager)

---

With the TabLayout provided by the Material Components Library you can use:

• the method setIcon to define the resourceId
• the method setTabLabelVisibility to set the TAB_LABEL_VISIBILITY_UNLABELED.

Something like:

for (int i=0;i<tabLayout.getTabCount();i++){

   tabLayout.getTabAt(i).setIcon(iconResId);
   tabLayout.getTabAt(i).
        setTabLabelVisibility(TabLayout.TAB_LABEL_VISIBILITY_UNLABELED);
}

---

This may not be the best answer for all cases, but what I found did not solve my problem yet.

After having a look at Androids implementation of tabLayout.setupWithViewPager(ViewPager pager) I came up with a solution using just listeners.

The layout structure:

| LinearLayout (vertical)
|-- TabLayout (width: match_parent)
|---- TabItem (without text, just icons)
|---- TabItem
|---- ...
|-- ViewPager

Code for the both listeners:

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        pager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        tabLayout.setScrollPosition(position, positionOffset, false);
    }

    @Override
    public void onPageSelected(int position) {
        TabLayout.Tab tab = tabLayout.getTabAt(position);
        if (tab != null) {
            tab.select();
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }
});

Have a look at the tabLayout.setScrollPosition call inside OnPageChangeListener.onPageScrolled for the more or less good moving of the indicator while scrolling.

TabLayout의 너비가 match_parent로 설정되지 않은 경우 (또는 스크롤 가능해야 함) 작동하지 않을 수 있습니다.

인사말

참고 URL : https://stackoverflow.com/questions/30892545/tablayout-with-icons-only