在Tab布局中使用图标而不是标题

时间:2015-11-14 08:23:05

标签: android-studio android-tablayout

我有一个tablayout,它有一个标签标题。我想使用图标而不是图标来显示。但我有点混淆我如何实现它。我试图添加一个图标列表,但我不知道在哪里放它。在此先感谢:)

继承我的代码:

  public class City extends AppCompatActivity {

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

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

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    PagerAdapter pagerAdapter =
            new PagerAdapter(getSupportFragmentManager(), City.this);
    viewPager.setAdapter(pagerAdapter);

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    tabLayout.setupWithViewPager(viewPager);

    // Iterate over all tabs and set the custom view
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(pagerAdapter.getTabView(i));
    }
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_login, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

class PagerAdapter extends FragmentPagerAdapter {

    String tabTitles[] = new String[] { "Info", "Hotels", "Restaurants", "Malls", "Events", "Tourist Spots"};
    Context context;

    public PagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new Info();
            case 1:
                return new HotelPage();
            case 2:
                return new Restaurant();
            case 3:
                return new Mall();
            case 4:
                return new City_Events();
            case 5:
                return new Tourist_Spot();
        }

        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // Generate title based on item position
        return tabTitles[position];
    }

    public View getTabView(int position) {
        View tab = LayoutInflater.from(City.this).inflate(R.layout.custom_vtab, null);
        TextView tv = (TextView) tab.findViewById(R.id.custom_text);
        tv.setText(tabTitles[position]);
        return tab;
    }
}
private int[] imageResId = {
        R.drawable.user,
        R.drawable.password,
        R.drawable.back
};

1 个答案:

答案 0 :(得分:0)

我在这里使用Jake Wharton's View pager指标。

说明(如果您不知道如何在Android工作室中添加库)

从github下载zip文件并将其解压缩, 从你在android studio中的项目,转到New-&gt;导入模块 - &gt;从提取的文件中选择库文件夹。

将库模块添加到项目后

在您的gradle文件中的依赖项下添加此行

compile project(':library')

这是您的City类代码

public class City extends AppCompatActivity {
    private static final String[] CONTENT = new String[] { "Info", "Hotels", "Restaurants", "Events" };
    private static final int[] ICONS = new int[] {
            //arrage icons as per ur title content
            R.drawable.home,
            R.drawable.home,
            R.drawable.home,
            R.drawable.home,
    };

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

        FragmentPagerAdapter adapter = new CityAdapter(getSupportFragmentManager());

        ViewPager pager = (ViewPager)findViewById(R.id.pager);
        pager.setAdapter(adapter);

        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);
        indicator.setViewPager(pager);
    }

    class CityAdapter extends FragmentPagerAdapter implements IconPagerAdapter {
        public CityAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    return new Info();
                case 1:
                    return new Info();
                case 2:
                    return new Info();
                case 3:
                    return new Info();
            }

            return null;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return CONTENT[position % CONTENT.length].toUpperCase();
        }

        @Override public int getIconResId(int index) {
            return ICONS[index];
        }

        @Override
        public int getCount() {
            return CONTENT.length;
        }
    }
}

<强> simple_tabs.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>

多数,它应该工作正常