TabLayout轻松实现仿今日头条顶部tab导航效果

时间：2023-02-08 19:43:50

前言

 自android5.0出来后，谷歌使用了Material Design设计风格，随着带来了许多新的控件，如:SnackBar，TextinputLayout，以及今天使用的TabLayout，这些新控件的出现使得我们这些开发者更加方便，下面我们用TabLayout实现仿最新版今日头条顶部导航的效果。

这是我们今天要实现的一个效果:

TabLayout轻松实现仿今日头条顶部tab导航效果

大家看到这个效果，你会怎么实现它？在以前，我们可以通过以下几种啊方式来实现：

  1. ViewPagerIndicator + Fragment + ViewPager
  2. ActionBar + Fragment + ViewPager
  3. 自定义一个View实现上面的效果

 ViewPagerIndicator是一个国外大牛写的一个github开源控件，使用也很简单，但是得设置Activity的主题，这样难免有所耦合，而ActionBar实现简单，但耦合性也高，如果我们程序不使用ActionBar，那么第二种方式就没有了，而且怎么添加右边的更多按钮更是一个大问题，那么今天我们使用谷歌新出的控件TabLayout来实现这一效果，可以说TabLayout实现这种效果最简单最方便了，而且没有耦合，独立封装的一个控件。

下面我们通过代码一步一步地实现上面的导航效果：

代码编写

编码代码之前，添加程序所需要的依赖：

compile 'com.android.support:design:23.0.1'
compile 'com.android.support:support-v4:23.0.1'

第一步：编写布局，activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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"
 >


<LinearLayout
 android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D33C3C"
android:gravity="center_vertical"
android:orientation="horizontal">

<android.support.design.widget.TabLayout
 android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:tabIndicatorColor="@android:color/transparent"
app:tabMode="scrollable">
</android.support.design.widget.TabLayout>

<ImageView
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="@mipmap/ic_plus"/>
</LinearLayout>


<android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>

说明：

 1、 可以看到TabLayout使用和其他控件一样，要注意的是添加命名空间，和设置tabMode属性为可以滚动： 

app:tabMode="scrollable">

 2、 设置导航底部的指示颜色为透明，即去掉底部的矩形指示器，当然设置成其他颜色那么底部就会有相应颜色的矩形指示器

app:tabIndicatorColor="@android:color/transparent"

第二步：为ViewPager设置Adapter：

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
List<Fragment> fragments = new ArrayList<Fragment>();
for (int i = 0; i < titles.length; i++) {
    Fragment fragment = new MyFragment();
    Bundle bundle = new Bundle();
    bundle.putString("text",titles[i]);
    fragment.setArguments(bundle);
    fragments.add(fragment);
}
viewPager.setAdapter(new TabFragmentAdapter(fragments, titles, getSupportFragmentManager(), this));

MyFragment.java

package com.lt.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by lt on 2015/12/14.
 */
public class MyFragment extends Fragment{

private String mText;

@Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
if(getArguments()!=null){
            mText = getArguments().getString("text");
        }
    }

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        ViewGroup.LayoutParams params= new ViewGroup.LayoutParams(-1,-1);
        textView.setLayoutParams(params);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        textView.setText(mText);
return textView;
    }
}

 说明：我们可以通过fragment.setArguments(Bundle bundle)为fragment传递数据，然后再fragment中通过getArguments()取出bundle中的数据。

TabFragmentAdapter.java

package com.lt.tablayouttest;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by lt on 2015/12/14.
 */
public class TabFragmentAdapter extends FragmentPagerAdapter{

private final String[] titles;
private Context context;
private List<Fragment> fragments;

public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
super(fm);
this.context = context;
this.fragments = fragments;
this.titles = titles;
    }


@Override
public Fragment getItem(int position) {
return fragments.get(position);
    }

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

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

 说明：重写getPageTitle(int position)返回每个页面的导航标题，这样TabLayout会从ViewPager中得到Adapter并通过该方法拿到标题。

第三步：将TabLayouth和ViewPager绑定：

// 初始化
TabLayout tablayout = (TabLayout) findViewById(R.id.tablayout);
// 将ViewPager和TabLayout绑定
tablayout.setupWithViewPager(viewPager);
// 设置tab文本的没有选中（第一个参数）和选中（第二个参数）的颜色
tablayout.setTabTextColors(getResources().getColor(R.color.dark_white),Color.WHITE);

总结

TabLayout实现tab导航效果比以前那些实现新闻资讯类app顶部tab导航效果更加简单方便，技术在更新，我们在进步，更多使用方法*查看官方文档：

android开发官网：http://developer.android.com/index.html

Demo下载：http://download.csdn.net/detail/ydxlt/9354379

标签：

相关文章