打造滑动效果

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的背景颜色是不是有点鲜艳？这是我用来测试而已，希望大家能够见谅。

效果图如下：