TabLayout是Android5.0提供给我们的一款使用起来相对方便的布局翻页效果的控件,实现后的效果相对来说也更加的贴近于使用的习惯。对开发提供了更大的便利。看下布局效果,当点击上方3个指示控件时,下面的ViewPager将会切换到对应的布局界面。
首先看下界面布局的实现
<?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.example.administrator.view.TabLayoutActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1FBCD2" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
对于布局代码来说,很简单,LinearLayout里面放了一个TabLayout和一个ViewPager,下面看下如何实现TabLayout与ViewPager之间联动的。
下面看下代码是如何实现
public class TabLayoutActivity extends AppCompatActivity {
private String[] mTitle = new String[3];
private String[] mData = new String[3];
private ArrayList<TextView> tvs;
private TextInputLayout inputTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
TabLayout tab_layout = (TabLayout) findViewById(R.id.tab_layout);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
for (int i = 0; i < 3; i++) {
mTitle[i] = "第" + i + "个";
mData[i] = "第" + i + "页";
}
tab_layout.setTabTextColors(Color.WHITE, Color.GRAY);
viewPager.setAdapter(mAdapter);
tab_layout.setupWithViewPager(viewPager);
tab_layout.setTabsFromPagerAdapter(mAdapter);
}
private PagerAdapter mAdapter = new PagerAdapter() {
@Override
public CharSequence getPageTitle(int position) {
return mTitle[position];
}
@Override
public int getCount() {
return mData.length;
}
@Override
public Object instantiateItem(View container, int position) {
TextView tv = new TextView(TabLayoutActivity.this);
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
tv.setTextSize(30.f);
tv.setLayoutParams(layoutParams);
tv.setGravity(Gravity.CENTER);
tv.setText(mData[position]);
((ViewPager) container).addView(tv);
return tv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
}
上面的代码就是整个界面的实现过程,首先要自己写一个集成了PagerAdapter的自定义Adapter,然后依次调用
viewPager.setAdapter(mAdapter);
tab_layout.setupWithViewPager(viewPager);
tab_layout.setTabsFromPagerAdapter(mAdapter);
这三个方法。
好了,以上就是TabLayout与ViewPager结合使用实现的界面切换效果,实现起来非常简单,比自己受到设计并实现提供了便利。当然,TabLayout还有一些其他的基本属性,大家可以自己尝试。