转载请标明出处:
http://blog.csdn.net/developer_jiangqq/article/details/50158985
本文出自:【江清清的博客】
(一).前言:
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org
仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现。要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现。不过我们今天不讲ViewPagerIndicator,我们来讲一下Google今年发布的TabLayout组件。在2015年的Google大会上,google发布的新的Android SupportDesign库,里面也包含了几个新的控件,那么TabLayout就是其中一个。使用该组件我们可以很轻松的实现TabPageIndicator效果,并且该为官方的,可以向下兼容很多版本而且可以更加统一Material Design效果。不过查看TabLayout的源码发现该组件也是继承自HorizontalScrollView实现。
使用HorizontalScrollView打造仿网易tab标签效果,点击进入...
本例子具体代码已经上传到下面的项目中,欢迎各位去star和fork一下。
FastDev4Android框架项目地址:https://github.com/jiangqqlmj/FastDev4Android
(二).使用方式:
2.1.我这边的项目采用Android Studio进行开发的,所以首先要引入TabLayout的依赖库,如下:
- compile'com.android.support:design:23.1.1'
- compile'com.android.support:appcompat-v7:23.1.1'
(三).效果实现:
我们现在需要仿照网易新闻(36Kr客户端)的Tab标签切换以及底部新闻页面切换的效果。Tab标签实现采用TabLayout组件,底部页面切换采用Fragment+ViewPager+FragmentStatePagerAdapter实现。
[注]:承载Fragment的Activity这边就不讲解了,具体可以看上一篇文章和本项目的代码即可。那我们直接从Fragment开始讲起。
3.1.首先我们需要给Fragment创建一个布局文件如下:
- <?xmlversionxmlversion="1.0" encoding="utf-8"?>
- <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:orientation="vertical"android:layout_width="match_parent"
- android:layout_height="match_parent">
- <!--顶部tab标签容器-->
- <android.support.design.widget.TabLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:id="@+id/tab_layout"
- android:background="@color/white"
- app:tabIndicatorColor="@color/color_selected"
- app:tabSelectedTextColor="@color/color_selected"
- app:tabTextColor="@color/color_unselected"
- ></android.support.design.widget.TabLayout>
- <android.support.v4.view.ViewPager
- android:id="@+id/info_viewpager"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- />
- </LinearLayout>
该布局主要为两个控件:第一部分为TableLayout组件该为Tab标签的容器,第二部分为ViewPager组件主要用于显示若干个Fragment进行页面切换。大家在TabLayout组件中应该已经注意到了三个自定义属性如下:
- app:tabIndicatorColor="@color/white" // 下方滚动的下划线颜色
- app:tabSelectedTextColor="@color/gray" // tab被选中后,文字的颜色
- app:tabTextColor="@color/white" // tab默认的文字颜色
这三个自定义属性是TabLayout提供的,我们可以任意修改标题颜色以及指示器的颜色,除此之外还提供了以下一些风格设置方法:
- tabMaxWidth
- tabIndicatorColor
- tabIndicatorHeight
- tabPaddingStart
- tabPaddingEnd
- tabBackground
- tabTextAppearance
- tabSelectedTextColor
3.2.接着是是CNKFixedPagerAdapter,该为ViewPager的自定义适配器,在ViewPager中的每一项采用Fragment实现,所以传入了得Fragment的页面的集合,同时还定义了Tab显示标题的数组。
- package com.chinaztt.fda.adapter;
- import android.support.v4.app.Fragment;
- import android.support.v4.app.FragmentManager;
- import android.support.v4.app.FragmentStatePagerAdapter;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.ImageView;
- import android.widget.TextView;
- import com.chinaztt.fda.application.FDApplication;
- import com.chinaztt.fda.ui.R;
- import java.util.List;
- /**
- * 当前类注释:Fragment,Viewpager的自定义适配器
- * 项目名:FastDev4Android
- * 包名:com.chinaztt.fda.adapter
- * 作者:江清清 on 15/12/2 10:08
- * 邮箱:jiangqqlmj@163.com
- * QQ: 781931404
- * 公司:江苏中天科技软件技术有限公司
- */
- public class CNKFixedPagerAdapter extends FragmentStatePagerAdapter {
- private String[] titles;
- private LayoutInflater mInflater;
- public void setTitles(String[] titles) {
- this.titles = titles;
- }
- private List<Fragment> fragments;
- public CNKFixedPagerAdapter(FragmentManager fm) {
- super(fm);
- }
- @Override
- public Fragment getItem(int position) {
- return this.fragments.get(position);
- }
- @Override
- public int getCount() {
- return this.fragments.size();
- }
- @Override
- public Object instantiateItem(ViewGroup container, int position) {
- Fragment fragment=null;
- try {
- fragment=(Fragment)super.instantiateItem(container,position);
- }catch (Exception e){
- }
- return fragment;
- }
- @Override
- public void destroyItem(ViewGroupcontainer, int position, Object object) {
- }
- //此方法用来显示tab上的名字
- @Override
- public CharSequence getPageTitle(intposition) {
- return titles[position %titles.length];
- }
- public List<Fragment> getFragments(){
- return fragments;
- }
- public void setFragments(List<Fragment> fragments) {
- this.fragments = fragments;
- }
- }
该Adapter中我们重写了getPageTitle()方法,用来显示Tab的标题。
3.3.下面就是具体的Fragment(TabInfoFragment)了,该Fragment中,我们初始化ViewPager,TabLayout以及自定义器适配器,Fragment页面和显示的Tab标题。
最终我们把适配器和ViewPager进行绑定,TabLayout和ViewPager进行绑定即可。
- public class TabInfoFragment extends Fragment {
- private String[]titles=new String[]{"全部","氪TV","O2O","新硬件","Fun!!","企业服务","Fit&Health","在线教育","互联网金融","大公司","专栏","新产品"};
- private View mView;
- private TabLayout tab_layout;
- private ViewPager info_viewpager;
- private List<Fragment> fragments;
- private CNKFixedPagerAdapter mPagerAdater;
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
- if(mView==null){
- mView=inflater.inflate(R.layout.tab_info_fragment_layout,container,false);
- initViews();
- initValidata();
- }
- return mView;
- }
- private void initViews(){
- tab_layout=(TabLayout)mView.findViewById(R.id.tab_layout);
- info_viewpager=(ViewPager)mView.findViewById(R.id.info_viewpager);
- }
- private void initValidata(){
- fragments=new ArrayList<>();
- for(int i=0;i<12;i++){
- OneFragment oneFragment=new OneFragment();
- Bundle bundle=new Bundle();
- bundle.putString("extra",titles[i]);
- oneFragment.setArguments(bundle);
- fragments.add(oneFragment);
- }
- //创建Fragment的 ViewPager 自定义适配器
- mPagerAdater=new CNKFixedPagerAdapter(getChildFragmentManager());
- //设置显示的标题
- mPagerAdater.setTitles(titles);
- //设置需要进行滑动的页面Fragment
- mPagerAdater.setFragments(fragments);
- info_viewpager.setAdapter(mPagerAdater);
- tab_layout.setupWithViewPager(info_viewpager);
- //设置Tablayout
- //设置TabLayout模式 -该使用Tab数量比较多的情况
- tab_layout.setTabMode(TabLayout.MODE_SCROLLABLE);
- }
- }
相信大家已经看到该代码的最后有一句:
- tab_layout.setTabMode(TabLayout.MODE_SCROLLABLE);
该用来设置Tablayout的模式,除了上面的默认之外还有一个模式如下:
- tab_layout.setTabMode(TabLayout.MODE_FIXED);
两者的区别如下,如果Tab数量比较多的情况下,最少用上面那个,Tab标签可以左右滑动显示。
3.4.运行效果如下:
(四).Tab升级版改造:
上面的效果是属于基础版本直接Tab显示标题就结束了,有时候不会达到我们的要求Tab标签上面显示图标。那么现在我们对其进行改造一下可以让TabLayout打造的Tab既能显示图标又能显示文字标题信息。该主要采用Tab的以下方法实现:
- tab.setCustomView(view); tab添加的自定义布局
4.1.首先对于Tab Item每一项我们需要定义一个布局文件:
- <?xmlversionxmlversion="1.0" encoding="utf-8"?>
- <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:orientation="vertical"
- >
- <ImageView
- android:src="@mipmap/ic_launcher"
- android:layout_width="15dp"
- android:layout_height="15dp"
- android:id="@+id/imageView"
- android:layout_gravity="center_horizontal"
- />
- <TextView
- android:text="Item 01"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:id="@+id/textView"
- android:layout_gravity="center_horizontal"
- />
- </LinearLayout>
该布局文件很简单,上下布局图标和标题
4.2.然后我们需要在CNKFixedPagerAdapter中进行以下修改:先前我们是通过重写public CharSequence getPageTitle(int position)该方法来显示标题的,那么现在我们需要删掉或者注释掉该方法,然后新增一个getTabView()方法来实时创建Tab Item的布局然后绑定数据:
- /**
- * 添加getTabView的方法,来进行自定义Tab的布局View
- * @param position
- * @return
- */
- public View getTabView(int position){
- mInflater=LayoutInflater.from(FDApplication.getInstance());
- Viewview=mInflater.inflate(R.layout.tab_item_layout,null);
- TextView tv= (TextView)view.findViewById(R.id.textView);
- tv.setText(titles[position]);
- ImageView img = (ImageView)view.findViewById(R.id.imageView);
- img.setImageResource(R.mipmap.ic_launcher);
- return view;
- }
4.3.这些步骤做完了之后,在主Fragment(TabInfoFragment)中对Tablayout中每一项Tab作如下设置即可:获取到每一项Tab,然后给该Tab设置自定义布局调用tab.setCustomView()方法。
- //设置自定义Tab--加入图标的demo
- for(int i=0;i<12;i++){
- TabLayout.Tab tab =tab_layout.getTabAt(i);
- tab.setCustomView(mPagerAdater.getTabView(i));
- }
4.4.运行结果如下:
(五).最后总结
今天我们通过Android Design支持库TabLayout组件实现了仿照网易新闻客户端首页的页面滑动和顶部Tab效果。希望对大家有所帮助使用以前的方式虽然也可以显示这样的效果,不过技术在发展嘛,紧跟时代潮流吧~嘿嘿。
本次实例代码因为比较多,重点核心代码已经贴出来。不过实例注释过的全部代码已经上传到Github项目中了。同时欢迎大家去Github站点进行clone或者fork浏览整个开源快速开发框架项目~
https://github.com/jiangqqlmj/FastDev4Android
尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!