引库
compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'
compile 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'
compile 'com.ogaclejapan.smarttablayout:utils-v4:1.6.1@aar'
使用方法
//布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:orientation="vertical"
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">
//经典模式
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#F00"
app:stl_defaultTabTextColor="#FFF"
app:stl_defaultTabTextHorizontalPadding="24dp"
app:stl_indicatorColor="#fF0F"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/viewpagertab"
/>
</LinearLayout>
public class MainActivity extends AppCompatActivity {
private SmartTabLayout viewpagertab;
private ViewPager viewpager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
FragmentPagerItems pages = new FragmentPagerItems(this);
String[] strs=new String[]{"哈哈","哈哈啊","断剑重铸之日","额","那就算了","嗯哼哼?"};
for (String str : strs) {
pages.add(FragmentPagerItem.of(str, PageFragment.class));
}
FragmentPagerItemAdapter adapter = new FragmentPagerItemAdapter(
getSupportFragmentManager(), pages);
viewpager.setAdapter(adapter);
viewpagertab.setViewPager(viewpager);
viewpagertab.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.d("meee",getClass()+":\n"+"position:"+position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initView() {
viewpagertab = (SmartTabLayout) findViewById(R.id.viewpagertab);
viewpager = (ViewPager) findViewById(R.id.viewpager);
}
}
工具类神奇之处2,方便Fragment的抽象
public class PageFragment extends android.support.v4.app.Fragment {
LinearLayout backgroun;
TextView tv;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View layout = inflater.inflate(R.layout.fragment_layout1, container, false);
backgroun=(LinearLayout)layout.findViewById(R.id.background);
tv= (TextView) layout.findViewById(R.id.tv);
return layout;
}
@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
int position = FragmentPagerItem.getPosition(getArguments());
if (position%2==0){
backgroun.setBackgroundColor(Color.BLUE);
}else{
backgroun.setBackgroundColor(Color.GREEN);
}
}
}
经典模式,且指示器居中
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#F00"
app:stl_defaultTabTextColor="#FFF"
app:stl_defaultTabTextHorizontalPadding="24dp"
app:stl_indicatorColor="#fF0F"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
//添加该属性表示指示器居中
app:stl_titleOffset="auto_center"
/>
智能模式,指示器在滑动过程中持续反馈
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#F00"
app:stl_defaultTabTextColor="#FFF"
app:stl_defaultTabTextHorizontalPadding="24dp"
app:stl_indicatorColor="#fF0F"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
app:stl_titleOffset="auto_center"
//将线性改为smart
app:stl_indicatorInterpolation="smart"
/>
Title长度相等
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#F00"
app:stl_defaultTabTextColor="#FFF"
app:stl_indicatorColor="#fF0F"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
app:stl_titleOffset="auto_center"
app:stl_indicatorInterpolation="smart"
//将该属性设置为true,则每个title占有相同的权重,但注意titile总长度不能超过屏幕宽度
app:stl_distributeEvenly="true"
/>
指示器强制居中
<com.ogaclejapan.smarttablayout.SmartTabLayout
android:id="@+id/viewpagertab"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#F00"
app:stl_defaultTabTextColor="#FFF"
app:stl_indicatorColor="#fF0F"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
app:stl_titleOffset="auto_center"
app:stl_indicatorInterpolation="smart"
//设置强制居中,注意该属性不能和stl_distributeEvenly同时使用
app:stl_indicatorAlwaysInCenter="true"
/>
自定义title中的TextView
创建一个布局,里面只有一个自定义的TextView
res/layout/custom_tab
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@id/tv_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:textColor="@color/custom_tab2"
android:textSize="33sp"
/>
//注意这里有一个坑,我在使用的使用总是报错说找不到id,所以
res/values/ids
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@id/tv_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:textColor="@color/custom_tab2"
android:textSize="33sp"
/>
<com.ogaclejapan.smarttablayout.SmartTabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/viewpagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//在这里个属性中输入布局的id
app:stl_customTabTextLayoutId="@layout/custom_tab"
//在这里输入自定义的textview的id
app:stl_customTabTextViewId="@id/tv_1"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorColor="#00f"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
/>
自定义title中的颜色
res/values/colors
<resources>
<color name="light_blue_500">#03A9F4</color>
<color name="cyan_500">#00BCD4</color>
<color name="teal_500">#009688</color>
<color name="green_500">#4CAF50</color>
<color name="light_green_500">#8BC34A</color>
<integer-array name="custom_tab_colors">
<item>@color/light_blue_500</item>
<item>@color/cyan_500</item>
<item>@color/teal_500</item>
<item>@color/green_500</item>
<item>@color/light_green_500</item>
</integer-array>
</resources>
<com.ogaclejapan.smarttablayout.SmartTabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/viewpagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="3dp"
app:stl_underlineThickness="1dp"
//设置分割线的颜色
app:stl_dividerColors="@array/custom_tab_colors"
//设置指示器的颜色
app:stl_indicatorColors="@array/custom_tab_colors"
/>
自定义Title图标
public class TintableImageView extends ImageView {
private ColorStateList tint;
public TintableImageView(Context context) {
super(context);
}
public TintableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs, 0);
}
public TintableImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs, defStyle);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray a = context.obtainStyledAttributes(
attrs, R.styleable.TintableImageView, defStyle, 0);
tint = a.getColorStateList(
R.styleable.TintableImageView_tint);
a.recycle();
}
@Override
protected void drawableStateChanged() {
super.drawableStateChanged();
if (tint != null && tint.isStateful()) {
updateTintColor();
}
}
public void setColorFilter(ColorStateList tint) {
this.tint = tint;
super.setColorFilter(tint.getColorForState(getDrawableState(), 0));
}
private void updateTintColor() {
int color = tint.getColorForState(getDrawableState(), 0);
setColorFilter(color);
}
}
该控件具有一个hint属性,需要自定义
res/attrs.xml
<resources>
<declare-styleable name="TintableImageView">
<attr name="tint" format="reference|color"/>
</declare-styleable>
</resources>
创建一个布局
res/layout/custom_icon
<?xml version="1.0" encoding="utf-8"?>
<com.ogaclejapan.smarttablayout.demo.TintableImageView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:scaleType="center"
//还需要创建一个点击后颜色变化的selector
app:tint="@color/custom_tab_icon"
/>
颜色selector
res/color/custom_tab_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#F00" android:state_selected="true"/>
<item android:color="#888" android:state_selected="false"/>
</selector>
在布局中将指示器隐藏
<com.ogaclejapan.smarttablayout.SmartTabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/viewpagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:stl_indicatorInterpolation="linear"
app:stl_dividerColors="@array/custom_tab_colors"
app:stl_indicatorColors="@array/custom_tab_colors"
//隐藏指示器
app:stl_dividerColor="@android:color/transparent"
app:stl_dividerThickness="0dp"
app:stl_indicatorColor="@android:color/transparent"
app:stl_indicatorThickness="0dp"
app:stl_underlineColor="@android:color/transparent"
app:stl_underlineThickness="0dp"
/>
代码中设置icon
viewpagertab.setCustomTabView(new SmartTabLayout.TabProvider() {
@Override
public View createTabView(ViewGroup container, int position, PagerAdapter adapter) {
Resources res = MainActivity.this.getResources()
ImageView icon = (ImageView) LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_icon, container,
false)
switch (position) {
case 0:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher))
break
case 1:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher_round))
break
case 2:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher))
break
case 3:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher_round))
break
case 4:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher))
break
case 5:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher_round))
break
case 6:
icon.setImageDrawable(res.getDrawable(R.mipmap.ic_launcher))
break
default:
throw new IllegalStateException("Invalid position: " + position)
}
return icon
}
})