在项目中我们经常用到Viewpage与Fragemt来实现页面,可以使用三方开源的PagerSlidingTabStrip去实现,或者viewpagerindicator。当然也可以用TabLayout实现,TabLayout的实现快速简单。
一、build.gradle添加依赖,TabLayout是com.android.support:design包中的
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:24.1.1'
compile 'com.android.support:support-v4:24.1.1'
compile 'com.android.support:design:24.1.1'
}
二.MainActivity:
布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.huang.tablayout.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</LinearLayout>
MainActivity代码:
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
private TabLayout mTabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setAdapter(new MyPageAdapter(getSupportFragmentManager()));
//与viewpager绑定
mTabLayout.setupWithViewPager(mViewPager);
// MODE_SCROLLABLE:Scrollview格式
// MODE_FIXED:所有的tab全部显示
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
class MyPageAdapter extends FragmentStatePagerAdapter {
private String tabTitles[] = new String[]{"tab1","tab2","tab3","tab4","tab5","tab6","tab7","tab8","tab9","tab10"};
public MyPageAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
Fragment fragment = BaseFragment.getInstance("fragement===="+(position+1));
return fragment;
}
@Override
public int getCount() {
return 10;
}
/**
* 返回tab的标题
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
}
三.BaseFragment的代码:
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class BaseFragment extends Fragment {
public TextView contentTv;
public static BaseFragment getInstance(String title){
Bundle bundle = new Bundle();
bundle.putString("title",title);
BaseFragment baseFragment = new BaseFragment();
baseFragment.setArguments(bundle);
return baseFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.base_fragment,container,false);
contentTv = (TextView) view.findViewById(R.id.content);
if (getArguments()!=null){
contentTv.setText(getArguments().getString("title","hello"));
}
return view;
}
}
效果
四、为TabLayout设置样式
<style name="TabStyle" parent="Widget.Design.TabLayout">
<!--设置指示条颜色-->
<item name="tabIndicatorColor">#ff0000</item>
<!--设置指示条高度-->
<item name="tabIndicatorHeight">2dp</item>
<!--背景颜色-->
<item name="tabBackground">@android:color/white</item>
<!--Tab的字体设置大小、颜色等-->
<item name="tabTextAppearance">@style/TabTextAppearance</item>
<!--选中Tab字体颜色-->
<item name="tabSelectedTextColor">#ff0000</item>
</style>
<style name="TabTextAppearance" parent="TextAppearance.Design.Tab">
<!--大小-->
<item name="android:textSize">16sp</item>
<!--颜色-->
<item name="android:textColor">@android:color/black</item>
<item name="textAllCaps">true</item>
</style>