Android仿今日头条滑动页面导航效果

一、介绍

在Android开发中，实现滑动页面导航效果是比较常见的需求之一。本文针对如何实现仿今日头条的页面滑动导航效果进行详细讲解。

二、实现步骤

1.在布局文件中定义ViewPager和TabLayout控件，用于展示滑动页面和导航栏；

2.在Java代码中定义FragmentPagerAdapter，ViewPager的适配器；通过适配器承载Fragment实现滑动页面的展示；

3.在Java代码中设置TabLayout与ViewPager关联，实现滑动页面导航的效果；

4.通过自定义View为TabLayout设置下划线并提供属性接口，实现滑动条的效果。

三、示例说明

1.布局文件

在布局文件中，需要定义ViewPager和TabLayout两个控件。其中ViewPager用于展示滑动页面，而TabLayout用于展示导航栏。示例代码如下：

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabGravity="center"
    app:tabMode="fixed"
    app:tabSelectedTextColor="#000000"
    app:tabTextColor="#666666" />

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

2.Java代码

在Java代码中，需要定义FragmentPagerAdapter适配器，并在TabLayout中与ViewPager关联。同时，为了实现滑动条的效果，需要定义一个自定义View继承自View并实现onDraw方法，用于绘制TabLayout下方的滑动条。示例代码如下：

public class MainActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTabLayout = findViewById(R.id.tab_layout);
        mViewPager = findViewById(R.id.view_pager);

        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            private String[] mTitles = {"推荐", "热点", "视频", "社会", "娱乐", "科技", "汽车", "体育"};

            @Override
            public Fragment getItem(int position) {
                return PlaceholderFragment.newInstance(position);
            }

            @Override
            public int getCount() {
                return mTitles.length;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        };

        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorAccent));
        mTabLayout.post(() -> {
            int width = mTabLayout.getWidth() / mViewPager.getAdapter().getCount();
            DisplayMetrics metrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(metrics);
            int screenW = metrics.widthPixels;
            int tabWidth = width + mTabLayout.getTabSelectedIndicator().getIntrinsicWidth();
            int marginLeft = (screenW / mViewPager.getAdapter().getCount() - tabWidth) / 2;
            mTabLayout.setPadding(marginLeft, mTabLayout.getPaddingTop(), marginLeft, mTabLayout.getPaddingBottom());
        });
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                mTabLayout.scroll(position, positionOffset);
            }
        });
        mViewPager.setCurrentItem(0);
    }
}

public class TabLayoutIndicatorView extends View {

    private Paint mPaint;
    private int mIndicatorColor;
    private int mIndicatorHeight;
    private float mIndicatorCenterX = 0;
    private float mIndicatorPullOutDistance = 0;

    public TabLayoutIndicatorView(Context context) {
        this(context, null);
    }

    public TabLayoutIndicatorView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabLayoutIndicatorView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mIndicatorColor = Color.BLACK;
        mIndicatorHeight = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2, getResources().getDisplayMetrics());
    }

    public void setIndicatorColor(int color) {
        mIndicatorColor = color;
    }

    public void setIndicatorHeight(int height) {
        mIndicatorHeight = height;
    }

    public void setIndicatorPosition(float center, float pullOut) {
        mIndicatorCenterX = center;
        mIndicatorPullOutDistance = pullOut;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(mIndicatorColor);
        canvas.drawRect(
                mIndicatorCenterX - mIndicatorPullOutDistance,
                getHeight() - mIndicatorHeight,
                mIndicatorCenterX + mIndicatorPullOutDistance,
                getHeight(),
                mPaint);
    }
}

四、总结

通过以上步骤，我们可以实现仿今日头条的滑动页面导航效果。其中，在Java代码中需要注意ViewPager及TabLayout的适配和关联，以及自定义View的使用，这是实现该效果的关键。