What
TabLayout是一种展示Tab的横向布局
Why
能够更方便快捷的实现Tab切换功能。
How
本文案例实现效果:
效果说明
选中的tab与未选中状态有明显区分,选中时文字居中,Tab高度与Tablayout匹配
实现思路
将TextView
放入RelativeLayout
中,未选中时marginTop = 10dp
,选中时marginTop=0dp
;
实现步骤
activity
对应的XML文件(activity_different_height.xml
)<?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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <android.support.design.widget.TabLayout android:id="@+id/tabLayout" style="@style/CustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="0dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
每一项对应的布局
custom_tab_difheight.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_marginTop="10dp" android:id="@+id/tabTitle" android:layout_width="match_parent" android:layout_height="match_parent" android:singleLine="true" android:textColor="@color/tab_text_color_selector" android:background="@drawable/tab_bg_selector" android:textSize="16sp" android:gravity="center" /> </RelativeLayout>
自定义的TabLayout
style
<style name="CustomTabLayout" parent="Base.Widget.Design.TabLayout"> <item name="tabMaxWidth">100dp</item> <item name="tabIndicatorColor">?attr/colorAccent</item> <item name="tabIndicatorHeight">2dp</item> <item name="tabPaddingStart">0dp</item> <item name="tabPaddingEnd">0dp</item> <item name="tabBackground">?attr/selectableItemBackground</item> <item name="tabTextAppearance">@style/CustomTabTextApperance</item> <item name="tabSelectedTextColor">?android:textColorPrimary</item> </style> <style name="CustomTabTextApperance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">14sp</item> <item name="android:textColor">?android:textColorSecondary</item> <item name="textAllCaps">true</item> </style>
Activity.java文件(DifferentHeightActivity.java)
import android.content.Context; import android.support.design.widget.AppBarLayout; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class DifferentHeightActivity extends AppCompatActivity { TabLayout tabLayout; ViewPager viewPager; Context mContext; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_different_height); mContext = this; tabLayout = (TabLayout) findViewById(R.id.tabLayout); viewPager = (ViewPager) findViewById(R.id.viewPager); SectionsPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager(), ContentFragment.newInstance(0) , ContentFragment.newInstance(1) , ContentFragment.newInstance(2) , ContentFragment.newInstance(3)); viewPager.setAdapter(mSectionsPagerAdapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); if (tab == null) { continue; } View view = mSectionsPagerAdapter.getTabView(this, i); tab.setCustomView(view); } tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0)); TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle); viewById.setLayoutParams(layoutParams); } @Override public void onTabUnselected(TabLayout.Tab tab) { RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 10), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0)); TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle); viewById.setLayoutParams(layoutParams); } @Override public void onTabReselected(TabLayout.Tab tab) { RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); layoutParams.setMargins(Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 10), Utils.dp2Px(mContext, 0), Utils.dp2Px(mContext, 0)); TextView viewById = (TextView) tab.getCustomView().findViewById(R.id.tabTitle); viewById.setLayoutParams(layoutParams); } }); tabLayout.getTabAt(1).select(); } public class SectionsPagerAdapter extends FragmentPagerAdapter { private List<Fragment> mFragments = new ArrayList<>(); private int[] titleResId = { R.string.bottom_button_index, R.string.bottom_button_study, R.string.bottom_button_activity, R.string.bottom_button_my };//标题资源 public SectionsPagerAdapter(FragmentManager fm, Fragment... fragments) { super(fm); mFragments.addAll(Arrays.asList(fragments)); } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { // Show 3 total pages. return 4; } //加载自定义布局 View getTabView(Context context, int position) { View view = LayoutInflater.from(context).inflate(R.layout.custom_tab_difheight, null); TextView tv = (TextView) view.findViewById(R.id.tabTitle); tv.setText(context.getResources().getString(titleResId[position])); return view; } } }
strings.xml
资源<string name="bottom_button_index">首页</string> <string name="bottom_button_study">学习</string> <string name="bottom_button_activity">活动</string> <string name="bottom_button_my">我的</string>
text背景文件
选择器(
tab_bg_selector.xml
)<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_rect_stroke" android:state_selected="false"/> <item android:drawable="@drawable/tab_rect_solid" android:state_selected="true"/> </selector>
选中背景(
tab_rect_solid.xml
)<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/tab_rect_stroke" android:state_selected="false"/> <item android:drawable="@drawable/tab_rect_solid" android:state_selected="true"/> </selector>
未选中背景(
tab_rect_stroke.xml
)<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="1dp" android:color="#A4A4A4" /> </shape>
文字颜色选择器(
tab_text_color_selector.xml
)<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@android:color/white" android:state_selected="true"/> <item android:color="#A4A4A4" android:state_selected="false"/> </selector>