此前我们用HorizontalScrollView也实现了类似网易选项卡动态滑动效果,详见 Android选项卡动态滑动效果这篇文章
这里我们用TabLayout来实现这一效果。TabLayout是Android Design Support Library库中的控件。
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件。最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2。
接下来开始实现
1. 配置build.gradle
在build.gradle加入如下代码
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:recyclerview-v7:22.2.0' compile 'com.android.support:cardview-v7:22.2.0' }
com.android.support:design:22.2.0就是我们需要引入的Android Design Support Library,其次我们还引入了Recyclerview和Cardview,还不了解这两个控件的同学可以看下面这两篇文章:
Android5.x RecyclerView 应用解析和Android5.x CardView 应用解析
2.AppBarLayout、Toolbar与TabLayout
先看看主界面的布局 (activity_tab_layout.xml)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".TabLayoutActivity" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="#ADBE107E" app:tabMode="scrollable"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </LinearLayout>
这里用到了AppBarLayout和Toolbar,AppBarLayout是Android Design Support Library新加的控件继承自LinearLayout,它用来将Toolbar和TabLayout组合起来作为一个整体。Toolbar我们在这里不讲了,如果不熟悉可以看Android5.x Toolbar和Palette应用解析这篇文章
这布局文件最关键的一点就是android.support.design.widget.TabLayout 标签中的app:tabMode=”scrollable”,他设置tab的模式为“可滑动的”,现在我们把这句话去掉,来看看效果:
上面的tab由于太多(13个)却不能滑动就重叠了。
接下来在java中引用 (TabLayoutActivity.java)
package com.example.liuwangshu.mytablayout; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import java.util.ArrayList; import java.util.List; public class TabLayoutActivity extends AppCompatActivity { private DrawerLayout mDrawerLayout; private ViewPager mViewPager; private TabLayout mTabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); mViewPager = (ViewPager) findViewById(R.id.viewpager); initViewPager(); }
initViewPager方法 (TabLayoutActivity.java)
private void initViewPager() { mTabLayout = (TabLayout) findViewById(R.id.tabs); List<String> titles = new ArrayList<>(); titles.add("精选"); titles.add("体育"); titles.add("巴萨"); titles.add("购物"); titles.add("明星"); titles.add("视频"); titles.add("健康"); titles.add("励志"); titles.add("图文"); titles.add("本地"); titles.add("动漫"); titles.add("搞笑"); titles.add("精选"); for(int i=0;i<titles.size();i++){ mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i))); } List<Fragment> fragments = new ArrayList<>(); for(int i=0;i<titles.size();i++){ fragments.add(new ListFragment()); } FragmentAdapter mFragmentAdapteradapter = new FragmentAdapter(getSupportFragmentManager(), fragments, titles); //给ViewPager设置适配器 mViewPager.setAdapter(mFragmentAdapteradapter); //将TabLayout和ViewPager关联起来。 mTabLayout.setupWithViewPager(mViewPager); //给TabLayout设置适配器 mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter); }
在这里我们设定了13个标题内容并创建了相应的TabLayout和Fragment,设置了ViewPager适配器和TabLayout适配器并将将TabLayout和ViewPager关联起来。
ListFragment的代码(ListFragment.java)
package com.example.liuwangshu.mytablayout; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class ListFragment extends Fragment { private RecyclerView mRecyclerView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mRecyclerView = (RecyclerView) inflater.inflate(R.layout.list_fragment, container, false); return mRecyclerView; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext())); mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity())); } }
这里用RecyclerView来代替ListView来看看RecyclerViewAdapter(RecyclerViewAdapter.java)
package com.example.liuwangshu.mytablayout; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.ObjectAnimator; import android.annotation.TargetApi; import android.content.Context; import android.content.Intent; import android.os.Build; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> { private Context mContext; public RecyclerViewAdapter(Context mContext) { this.mContext = mContext; } @Override public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_card_main, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) { final View view = holder.mView; view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); } @Override public int getItemCount() { return 10; } public static class ViewHolder extends RecyclerView.ViewHolder { public final View mView; public ViewHolder(View view) { super(view); mView = view; } } }
最后FragmentAdapter(FragmentAdapter.java)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
package com.example.liuwangshu.mytablayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import java.util.List; public class FragmentAdapter extends FragmentStatePagerAdapter { private List<Fragment> mFragments; private List<String> mTitles; public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) { super(fm); mFragments = fragments; mTitles = titles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); } }
基本所有的代码都讲到了,当然这种稍微复杂的效果TabLayout能够实现,那么简单的3,4个Tab滑动TabLayout实现起来更是不再话下,修改TabLayoutActivity的initViewPager方法(TabLayoutActivity.java)
private void initViewPager() { mTabLayout = (TabLayout) findViewById(R.id.tabs); List<String> titles = new ArrayList<>(); titles.add("精选"); titles.add("体育"); titles.add("巴萨"); titles.add("购物"); for(int i=0;i<titles.size();i++){ mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i))); } List<Fragment> fragments = new ArrayList<>(); for(int i=0;i<titles.size();i++){ fragments.add(new ListFragment()); } FragmentAdapter mFragmentAdapteradapter = new FragmentAdapter(getSupportFragmentManager(), fragments, titles); //给ViewPager设置适配器 mViewPager.setAdapter(mFragmentAdapteradapter); //将TabLayout和ViewPager关联起来。 mTabLayout.setupWithViewPager(mViewPager); //给TabLayout设置适配器 mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter); }
我们只保留了4个Tab,然后去掉activity_tab_layout.xml android.support.design.widget.TabLayout 标签中的app:tabMode=”scrollable”
运行代码来看看效果