打造滑动效果

FlycoTabLayout+TabLyout+ViewPager 实现底部菜单页面滑动效果

最近在做项目用到了FlycoTabLayout+TabLyout+ViewPager实现底部菜单功能，如下几步轻松实现这个功能：

• 1、Android studio 项目导入依赖compile路径

compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.1.2@aar'

• 2、TabEntity这里是tab的标题、选中的图标、未选中的图标

public class TabEntity implements CustomTabEntity {    public String title;    public int selectedIcon;    public int unSelectedIcon;    public TabEntity(String title, int selectedIcon, int unSelectedIcon) {        this.title = title;        this.selectedIcon = selectedIcon;        this.unSelectedIcon = unSelectedIcon;    }    @Override    public String getTabTitle() {        return title;    }    @Override    public int getTabSelectedIcon() {        return selectedIcon;    }    @Override    public int getTabUnselectedIcon() {        return unSelectedIcon;    }}

• 3、设置fragment，我这里新建了四个fragment。这里我只展示一个，其他类似

public class MyFragment extends Fragment {    private String mTitle;    public static MyFragment getInstance (String title){        MyFragment myFragment=new MyFragment();        myFragment.mTitle=title;        return  myFragment;    }    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View v = inflater.inflate(R.layout.fragment_my, null);        return v;    }}

• 4、运用到官方的简化viewholder

package com.example.zct11.course.utils;import android.util.SparseArray;import android.view.View;@SuppressWarnings({ "unchecked" })public class ViewFindUtils{    /**     * ViewHolder简洁写法,避免适配器中重复定义ViewHolder,减少代码量 用法:     *      * <pre>     * if (convertView == null)     * {     *  convertView = View.inflate(context, R.layout.ad_demo, null);     * }     * TextView tv_demo = ViewHolderUtils.get(convertView, R.id.tv_demo);     * ImageView iv_demo = ViewHolderUtils.get(convertView, R.id.iv_demo);     * </pre>     */    public static <T extends View> T hold(View view, int id)    {        SparseArray<View> viewHolder = (SparseArray<View>) view.getTag();        if (viewHolder == null)        {            viewHolder = new SparseArray<View>();            view.setTag(viewHolder);        }        View childView = viewHolder.get(id);        if (childView == null)        {            childView = view.findViewById(id);            viewHolder.put(id, childView);        }        return (T) childView;    }    /**     * 替代findviewById方法     */    public static <T extends View> T find(View view, int id)    {        return (T) view.findViewById(id);    }}

• 5、主函数中实现FlycoTabLayout+TabLyout+ViewPager

package com.example.zct11.course.ui;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import com.example.zct11.course.R;import com.example.zct11.course.adapter.MypagerAdapter;import com.example.zct11.course.base.BaseActivity;import com.example.zct11.course.bean.TabEntity;import com.example.zct11.course.ui.home.fragment.DownLoadFragment;import com.example.zct11.course.ui.home.fragment.MainFragment;import com.example.zct11.course.ui.home.fragment.MessageFragment;import com.example.zct11.course.ui.home.fragment.MyFragment;import com.example.zct11.course.utils.ViewFindUtils;import com.flyco.tablayout.CommonTabLayout;import com.flyco.tablayout.listener.CustomTabEntity;import com.flyco.tablayout.listener.OnTabSelectListener;import java.util.ArrayList;public class MainActivity extends AppCompatActivity {    private ArrayList<Fragment> mFragments = new ArrayList<>();    private CommonTabLayout mTabLayout;    private MypagerAdapter adapter;    private String[] mTitles = {"首页", "消息", "我的", "设置"};    private View view;    private ViewPager viewPager;    //tab的标题、选中图标、未选中图标    private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>();    private int[] mIconUnselectIds = {            R.mipmap.tab_home_unselect, R.mipmap.tab_speech_unselect,            R.mipmap.tab_contact_unselect, R.mipmap.tab_more_unselect};    private int[] mIconSelectIds = {            R.mipmap.tab_home_select, R.mipmap.tab_speech_select,            R.mipmap.tab_contact_select, R.mipmap.tab_more_select};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        view=getWindow().getDecorView();        viewPager= (ViewPager) findViewById(R.id.viewpager);        mTabLayout = ViewFindUtils.find(view,R.id.tl);        initData();        mTabLayout.setTabData(mTabEntities);        mTabLayout.setOnTabSelectListener(new OnTabSelectListener() {            @Override            public void onTabSelect(int position) {                viewPager.setCurrentItem(position);            }            @Override            public void onTabReselect(int position) {            }        });        viewPager.setAdapter(new MypagerAdapter(getSupportFragmentManager(),mFragments));        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                mTabLayout.setCurrentTab(position);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        viewPager.setCurrentItem(1);        //设置红点        mTabLayout.showDot(3);    }    private void initData() {        mFragments.add(MainFragment.getInstance(mTitles[0]));        mFragments.add(MessageFragment.getInstance(mTitles[1]));        mFragments.add(DownLoadFragment.getInstance(mTitles[2]));        mFragments.add(MyFragment.getInstance(mTitles[3]));        //设置tab的标题、选中图标、未选中图标        for (int i = 0; i < mTitles.length; i++) {            mTabEntities.add(new TabEntity(mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));        }    }}

• 6 在activity_main.xml中的布局如下

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tl="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v4.view.ViewPager>    <com.flyco.tablayout.CommonTabLayout        android:id="@+id/tl"        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_alignBottom="@+id/viewpager"        android:layout_alignParentBottom="true"        android:background="#ffffff"        tl:tl_divider_padding="5dp"        tl:tl_iconGravity="TOP"        tl:tl_iconHeight="18dp"        tl:tl_iconMargin="5dp"        tl:tl_iconWidth="18dp"        tl:tl_indicator_anim_enable="true"        tl:tl_indicator_bounce_enable="true"        tl:tl_indicator_color="#2C97DE"        tl:tl_indicator_corner_radius="2dp"        tl:tl_indicator_gravity="TOP"        tl:tl_indicator_height="4dp"        tl:tl_indicator_style="TRIANGLE"        tl:tl_indicator_width="4dp"        tl:tl_indicator_width_equal_title="true"        tl:tl_textSelectColor="#2C97DE"        tl:tl_textUnselectColor="#66000000"        tl:tl_textsize="15sp"        tl:tl_underline_color="#DDDDDD"        tl:tl_underline_gravity="TOP"        tl:tl_underline_height="1dp" /></RelativeLayout>

---

总结

在这次项目中我采用FlycoTabLayout+TabLyout+ViewPager轻松实现底部菜单功能，
fragment的背景颜色是不是有点鲜艳？这是我用来测试而已，希望大家能够见谅。

效果图如下：