首先看一下最終要實現(xiàn)的效果：
TabLayout自定義圖文布局
一般我們使用TabLayout都默認文字布局怀偷，比較單一。為了能靈活應對產(chǎn)品的各種需求播玖，我們必須學會如何來自定義布局椎工。下面讓我們一步步實現(xiàn)上圖效果 :
1.首先使用TabLayout要引入design庫
compile 'com.android.support:appcompat-v7:25.3.0'
2. 接著寫布局文件activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="mrallright.zjtest.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="53dp"
android:background="@android:color/white"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:theme="@style/Widget.Design.TabLayout" />
</LinearLayout>
3. 定義Fragment （布局僅使用TextView作為演示）
public class PageFragment extends Fragment {
public static final String ARG_PAGE="ARG_PAGE";
private int mPage;
public static PageFragment newInstance(int page){
Bundle bundle=new Bundle();
bundle.putInt(ARG_PAGE,page);
PageFragment pageFragment=new PageFragment();
pageFragment.setArguments(bundle);
return pageFragment;
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mPage=getArguments().getInt(ARG_PAGE);
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_page,container,false);
((TextView)view.findViewById(R.id.tv)).setText("Fragment #"+mPage);
return view;
}
}
其中fragment_page.xml布局如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
4. 接下來重點來了，我們來定義adapter黎棠，自定義 的布局也是在這里添加進去的
public class TabPageAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT=4;
private String tabTitles[]=new String[]{"首頁","理財","生活","我的"};
private Context context;
public TabPageAdapter(FragmentManager fm,Context context) {
super(fm);
this.context=context;
}
@Override
public Fragment getItem(int position) {
return PageFragment.newInstance(position+1);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
//注意＝臁！脓斩！這里就是我們自定義的布局tab_item
public View getCustomView(int position){
View view= LayoutInflater.from(context).inflate(R.layout.tab_item,null);
ImageView iv= (ImageView) view.findViewById(R.id.tab_iv);
TextView tv= (TextView) view.findViewById(R.id.tab_tv);
switch (position){
case 0:
//drawable代碼在文章最后貼出
iv.setImageDrawable(context.getResources().getDrawable(R.drawable.rb_home_icon_selector));
tv.setText("首頁");
break;
case 1:
iv.setImageDrawable(context.getResources().getDrawable(R.drawable.rb_finance_icon_selector));
tv.setText("理財");
break;
case 2:
iv.setImageDrawable(context.getResources().getDrawable(R.drawable.rb_life_icon_selector));
tv.setText("生活");
break;
case 3:
iv.setImageDrawable(context.getResources().getDrawable(R.drawable.rb_mine_icon_selector));
tv.setText("我的");
break;
}
return view;
}
}
tab_item.xml代碼如下（其中需要自定義textcolor木西，代碼會在文章最后貼出）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:paddingTop="5dp"
android:id="@+id/tab_iv"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:textColor="@color/textcolor"
android:paddingTop="5dp"
android:id="@+id/tab_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="首頁" />
</LinearLayout>
正常我們的adapter會實現(xiàn)getPageTitle方法，在里面設(shè)置標題随静，這樣就實現(xiàn)了純文字的布局八千，代碼如下：
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
但是今天我們要實現(xiàn)的是圖文布局，所以這個方法需要刪除掉
5. 最后MainActivity的中調(diào)用自定義布局
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private TabPageAdapter tabAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.view_pager);
tabAdapter = new TabPageAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(tabAdapter);
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < 4; i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
//注意Ａ敲汀Ａ道Α！這里就是添加我們自定義的布局
tab.setCustomView(tabAdapter.getCustomView(i));
//這里是初始化時重绷，默認item0被選中沸停，setSelected（true）是為了給圖片和文字設(shè)置選中效果，代碼在文章最后貼出
if (i == 0) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(true);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(true);
}
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(true);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(true);
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(false);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
最后貼一下圖片和文字的選擇效果
- 圖片的效果以rb_home_icon_selector.xml為例,圖片選擇和未選中請自備圖片
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false"
android:drawable="@mipmap/home_hui"/>
<item android:state_selected="true"
android:drawable="@mipmap/home_lan"/>
</selector>
- textcolor.xml(該文件是在res/color文件夾下昭卓，如果沒有color文件夾請自行建立)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorPrimary" android:state_selected="true" />
<item android:color="@android:color/black" android:state_selected="false" />
</selector>
本文參考：
[Showdy] http://www.reibang.com/p/ed129686f2cc
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html
http://blog.csdn.net/qiao0809/article/details/53506008
