TabLayout轻松实现仿今日头条顶部tab导航效果
2016-04-28 09:40
537 查看
转自:http://www.cnblogs.com/ydxlt/p/5045407.html
前言
自android5.0出来后,谷歌使用了Material Design设计风格,随着带来了许多新的控件,如:SnackBar,TextinputLayout,以及今天使用的TabLayout,这些新控件的出现使得我们这些开发者更加方便,下面我们用TabLayout实现仿最新版的今日头条顶部导航的效果。这是我们今天要实现的一个效果:大家看到这个效果,你会怎么实现它?在以前,我们可以通过以下几种啊方式来实现:
ViewPagerIndicator + Fragment + ViewPager
ActionBar + Fragment + ViewPager
自定义一个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导航效果更加简单方便,技术在更新,我们在进步,更多使用方法FQ查看官方文档:android开发官网: http://developer.android.com/index.html
Demo下载: http://download.csdn.net/detail/ydxlt/9354379
相关文章推荐
- Android Studio Inotify Watches Limit
- IOS常用方法封装(1)
- composer+twig
- 使用ASI网络请求后,程序闪退的问题
- HTML5:烟火
- hdu5672 尺取法
- uva 508 Morse Mismatches
- hdu1513Palindrome(动态规划之最长公共子序列变形+滚动数组)
- 张近东现身国米看台 苏宁入资国米目标不只20%股份?
- Linux中移植3G上网卡
- GeoTrust 企业(OV)型 增强版(EV) 多域名(SAN/UC) SSL证书
- Android开发的注意事项
- XAMPP及Wordpress安装步骤
- 求一个数列(数列中的每个数不相同)的最长不下降子序列。
- 用JS解决Asp.net Mvc返回JsonResult中DateTime类型数据格式的问题
- iOS开发——瀑布流
- uva 10523 Very Easy !!! 大数模拟加法和乘法
- 自定义标签库jsp
- Android之仿今日头条顶部导航栏效果
- C#窗体应用程度,退出按钮的程序书写