2015-07-24 19 views
5

Tôi đang cố gắng tạo tab với tablayout sau https://guides.codepath.com/android/Google-Play-Style-Tabs-using-TabLayout#add-custom-view-to-tablayoutTabLayout Biểu tượng không hiển thị

Bây giờ tôi đang cố gắng hiển thị biểu tượng thay vì văn bản bằng cách sử dụng hình ảnh. Nhưng nếu không có may mắn, bất cứ ai có thể giúp chỉ ra những gì còn thiếu trong hướng dẫn này?

Dưới đây là đoạn code

public class HomeActivity extends FragmentActivity { 

//Fragments List 
public ArrayList <Fragment> fragmentList; 

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

    setUpFragmentList(); 

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

    // Give the TabLayout the ViewPager 
    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); 
    //start this 2 are to set the tab to fill entire screen 
    tabLayout.setTabMode(TabLayout.MODE_FIXED); 
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL); 
    //end this 2 are to set the tab to fill entire screen 

    tabLayout.setupWithViewPager(viewPager); 
    tabLayout.getTabAt(1).setIcon(R.drawable.ic_tab_down_activity); 

} 

private void setUpFragmentList() { 
    fragmentList = new ArrayList<>(); 

    fragmentList.add(new MyActivitesFragment()); 
    fragmentList.add(new ChatListFragment()); 
    fragmentList.add(new QuickMatchFragment()); 
    fragmentList.add(new FilterMatchFragment()); 
} 
} 


public class HomeFragmentPagerAdapter extends FragmentPagerAdapter { 
private String tabTitles[] = new String[] { "Tab1", "Tab2", "Tab3" ,"Tab4"}; 
private Context context; 

private ArrayList <Fragment> fragmentList; 

private int[] imageResId = { 
     // unclicked 
     R.drawable.ic_tab_down_activity, 
     R.drawable.ic_tab_down_chat, 
     R.drawable.ic_tab_down_find, 
     R.drawable.ic_tab_down_filter, 
}; 

public HomeFragmentPagerAdapter(FragmentManager fm, Context context, ArrayList <Fragment> fragmentList) { 
    super(fm); 
    this.context = context; 
    this.fragmentList = fragmentList; 
} 

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

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

@Override 
public CharSequence getPageTitle(int 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; 
} 
} 
+0

Phần đó có vẻ ổn, hiển thị tất cả mã tab của bạn. –

Trả lời

0

Bạn chưa thêm bất kỳ tab.

Thêm tab như sau: tabLayout.addTab (tabLayout.newTab(). SetText ("Tab One")) ;.

0

tôi đoán bạn đang thiếu điểm chính trong xml của mình. Đặt kiểu dáng Giao diện văn bản cho bố cục tab của bạn. tức là textAllCaps = false nếu không khoảng hình ảnh sẽ không hoạt động.

+1

Thậm chí thiết lập để sai không hoạt động – pnavk

3

Trong tệp bố cục tab tùy chỉnh của bạn, chỉ cần tạo textAllCaps thành sai. Nó sẽ hoạt động :) Lý do, hình ảnh đang được chuyển đổi thành ký tự, sau đó nếu nó là đúng, sau đó chuyển đổi chúng thành vốn sẽ không hiển thị hình ảnh.

<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> 
    <item name="android:textSize">16sp</item> 
    <item name="android:textColor">?android:textColorSecondary</item> 
    <item name="textAllCaps">false</item> 
</style> 
+0

Cảm ơn sự giúp đỡ của bạn, nó đã giải quyết được vấn đề của tôi! Đã thêm MyCustomTabTextAppearance trong styles.xml và thiết lập ứng dụng: tabTextAppearance = "@ style/MyCustomTabTextAppearance" thuộc tính trên chế độ xem android.support.design.widget.TabLayout trong hoạt động xml. – lbartolic

3

Dường như tôi đã tìm ra giải pháp bằng cách sử dụng TabLayout.getTabAt (i) .setIcon (imageResId [i]);

lúc đầu ý định của tôi là có thể đặt tất cả biểu tượng từ bộ điều hợp chế độ xem. nhưng vì tôi không có ý tưởng hay thời gian để tìm ra giải pháp. thay vào đó tôi sẽ sử dụng thủ thuật khác mà tôi đã phát hiện ra.

và cũng để chuyển đổi hình ảnh xung quanh tôi sử dụng TabLayout.TabLayoutOnPageChangeListener

hy vọng điều này giúp người cần này quá. =]

Các vấn đề liên quan