Question

我跟着这个tutorial并且它完美无缺，我的意思是SlidingTabs工作得很好，一切都很好，但我想添加这样的东西：

我搜索过，人们使用actionbar.addTab()，但我无法做到这一点......

这就是他们所做的：

actionBar.addTab(actionBar.newTab().setText(tabs[i])
                     .setIcon(resources.getDrawable(ICONS[i]))
                     .setTabListener(this));

但是我不能称之为addTab ... 我添加这样的标签：

adapter =  new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true); // TabsFixed
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
  @Override
  public int getIndicatorColor(int position) {
            return ContextCompat.getColor(mContext, R.color.tabsScrollColor);
        }
    });
tabs.setViewPager(pager);

其中Titles是String[]，而Numoftabs是显示的标签数量。

如何在标题上方添加图片？

修改

现在我已经实现了@ cricket_007给我的代码，我面对这个问题：

我在点击标签时尝试创建选择器更改ImageView和TextView的颜色，我做了但是这不是明确的代码：

View View2= getLayoutInflater().inflate(R.layout.custom_view, null);
ImageView iconHome = (ImageView) View2.findViewById(R.id.imageView);
TextView textView = (TextView) View2.findViewById(R.id.textView2);
textView.setTextColor(ContextCompat.getColor(mContext, R.color.white));
iconHome.setImageResource(R.drawable.ic_launcher);
textView.setText("Manual");

View TabView2 = getLayoutInflater().inflate(R.layout.custom_view,null);
ImageView iconIn = (ImageView) TabView2.findViewById(R.id.imageView);
TextView textViewIn = (TextView) TabView2.findViewById(R.id.textView2);
iconIn.setImageResource(R.drawable.ic_launcher);
textViewIn.setText("Tab2");

但它应该是自动的我的意思是当我启动APP时，选项卡上的第一项保持选中（例如白色图像和文本），其余为灰色（#ddd），但这不适用于该代码...

Answer 1

在考虑了我链接到的second tutorial的扩展后，我想出了这种简单的方法来使用标签和两个图像而不需要标签的自定义布局。

基本上，做ViewHolder pattern之类的事情，在Activity中定义这个类。

private static class TabViewHolder {
    int selectedIconId, unselectedIconId;
    String text;

    public TabViewHolder(String text, int selectedIconId, int unselectedIconId) {
        this.text = text;
        this.selectedIconId = selectedIconId;
        this.unselectedIconId = unselectedIconId;
    }
}

然后，onCreate看起来像是

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

    toolbar = (Toolbar) findViewById(R.id.tool_bar);
    setSupportActionBar(toolbar);

    tabLayout = (TabLayout) findViewById(R.id.tabs);

    setupTabLayout(tabLayout);

    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mSectionsPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            TabViewHolder holder = (TabViewHolder) tab.getTag();
            if (holder == null) {
                Log.e(TAG, "ViewHolder for tab " + tab.getPosition() + " not set");
            } else {
                tab.setIcon(holder.selectedIconId);
            }

            // Make sure to bind the pages to the tabs
            mViewPager.setCurrentItem(tab.getPosition(), true);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            TabViewHolder holder = (TabViewHolder) tab.getTag();
            if (holder == null) {
                Log.e(TAG, "ViewHolder for tab " + tab.getPosition() + " not set");
            } else {
                tab.setIcon(holder.unselectedIconId);
            }
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

}

setupTabLayout看起来像这样

private void setupTabLayout(TabLayout tabLayout) {
    TabViewHolder homeTabHolder = new TabViewHolder("Home", R.drawable.ic_home_white, R.drawable.ic_home_grey);
    TabViewHolder inboxTabHolder = new TabViewHolder("Inbox", R.drawable.ic_inbox_white, R.drawable.ic_inbox_grey);
    TabViewHolder starTabHolder = new TabViewHolder("Star", R.drawable.ic_star_white, R.drawable.ic_star_grey);

    final TabLayout.Tab home = tabLayout.newTab()
            .setText(homeTabHolder.text)
            .setIcon(homeTabHolder.selectedIconId) // set this as first selected
            .setTag(homeTabHolder);

    final TabLayout.Tab inbox = tabLayout.newTab()
            .setText(inboxTabHolder.text)
            .setIcon(inboxTabHolder.unselectedIconId)
            .setTag(inboxTabHolder);

    final TabLayout.Tab star = tabLayout.newTab()
            .setText(starTabHolder.text)
            .setIcon(starTabHolder.unselectedIconId)
            .setTag(starTabHolder);

    tabLayout.addTab(home);
    tabLayout.addTab(inbox);
    tabLayout.addTab(star);

    tabLayout.setTabTextColors(ContextCompat.getColorStateList(this, R.color.tab_selector));
    tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.indicator));
}

对我来说，结果在应用启动时看起来像这样

然后选择下一个标签

自定义SlidingTabs与图像和文本

修改

1 个答案: