Android Design Support Library(4)- TabLayout的使用
2016-01-14 22:05
387 查看
原创文章,转载请注明 /article/3662960.html
这篇文章介绍下Android Design Support Library中的TabLayout的使用,如果你还不知道怎么使用这个Design Library请参考 /article/3662957.html,在使用Viewpager进行页面滑动切换的时候会在上面放一个导航条,平时我们会使用一些第三方来实现这个效果或者自己写,但是都太麻烦,下面来介绍下如何简单的使用Android官方的控件来实现下面这个效果。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201601/e9d75cf5c74c62cfaf6f58dbd2adeaef)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201601/d98d4d854f62c13d6087128187526ea2)
这个效果的实现方式是TabLayout+Viewpager+Fragment
下面以一步一步实现这个效果来演示TabLayout的简单使用
1:首先还是在Android Studio中导入这个依赖库
2:主页面布局,activity_main.xml
最外层Linearlayout 里面一个TabLayout和一个Viewpager
TabLayout的几个属性
app:tabSelectedTextColor=”#FFFFFF” Tab被选中时文字的颜色
app:tabIndicatorColor=”#FF4081” Tab下划线的颜色
app:tabTextColor=”#000000” Tab默认文字颜色
app:tabGravity=”fill” 或者 “center” Tab的布局模式 分别是平铺和居中
app:tabBackground=”@android:color/holo_blue_bright” TabLayout的背景颜色
3:Fragment的布局文件,layout_fragment.xml
4:Viewpager包含的Fragment ,ViewPagerFragment.java
这里Viewpager加载同一个Fragment
5 Activity,MainActivity.java
这个类也很好理解,给Viewpager设置Adapter,然后TabLayout和Viewpager进行关联操作
Ok,这样一个效果就轻松实现了,有什么问题可以在下方评论:)
这篇文章介绍下Android Design Support Library中的TabLayout的使用,如果你还不知道怎么使用这个Design Library请参考 /article/3662957.html,在使用Viewpager进行页面滑动切换的时候会在上面放一个导航条,平时我们会使用一些第三方来实现这个效果或者自己写,但是都太麻烦,下面来介绍下如何简单的使用Android官方的控件来实现下面这个效果。
这个效果的实现方式是TabLayout+Viewpager+Fragment
下面以一步一步实现这个效果来演示TabLayout的简单使用
1:首先还是在Android Studio中导入这个依赖库
[code] compile 'com.android.support:design:23.1.1'
2:主页面布局,activity_main.xml
最外层Linearlayout 里面一个TabLayout和一个Viewpager
TabLayout的几个属性
app:tabSelectedTextColor=”#FFFFFF” Tab被选中时文字的颜色
app:tabIndicatorColor=”#FF4081” Tab下划线的颜色
app:tabTextColor=”#000000” Tab默认文字颜色
app:tabGravity=”fill” 或者 “center” Tab的布局模式 分别是平铺和居中
app:tabBackground=”@android:color/holo_blue_bright” TabLayout的背景颜色
[code]<?xml version="1.0" encoding="utf-8"?> <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" tools:context="com.leejz.tablayoutdemo.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tl_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabSelectedTextColor="#ffffff" app:tabIndicatorColor="#FF4081" app:tabTextColor="#000000" app:tabGravity="fill" app:tabBackground="@android:color/holo_blue_bright" /> <android.support.v4.view.ViewPager android:id="@+id/vp_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
3:Fragment的布局文件,layout_fragment.xml
[code]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_fragment" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" > <TextView android:id="@+id/tv_fragment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="test" android:textSize="20sp" android:textColor="#ffffff" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:layout_marginTop="8dp" android:text="Blog:http://blog.csdn.net/leejizhou" /> </LinearLayout>
4:Viewpager包含的Fragment ,ViewPagerFragment.java
这里Viewpager加载同一个Fragment
[code]import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; /** * Created by Lijizhou on 2016/1/14. * 仅用于演示,Viewpager共用一个Fragment */ public class ViewPagerFragment extends Fragment { private int page; private int color; public static final String GETPAGE="get_page"; public static final String GETCOLOR="get_color"; public static ViewPagerFragment getInstance(int page,int color){ Bundle args = new Bundle(); args.putInt(GETPAGE, page); args.putInt(GETCOLOR, color); ViewPagerFragment pageFragment = new ViewPagerFragment(); pageFragment.setArguments(args); return pageFragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); page=getArguments().getInt(GETPAGE); color=getArguments().getInt(GETCOLOR); } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.layout_fragment, container, false); TextView textView = (TextView) view.findViewById(R.id.tv_fragment); textView.setText("Page" + page); view.setBackgroundResource(color); return view; } }
5 Activity,MainActivity.java
这个类也很好理解,给Viewpager设置Adapter,然后TabLayout和Viewpager进行关联操作
[code]import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; public class MainActivity extends FragmentActivity { private ViewPagerAdapter viewPagerAdapter; private ViewPager viewPager; private TabLayout tabLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager()); viewPager = (ViewPager) findViewById(R.id.vp_viewpager); viewPager.setAdapter(viewPagerAdapter); tabLayout = (TabLayout) findViewById(R.id.tl_tabs); //Viewpager和Tablayout进行关联 tabLayout.setupWithViewPager(viewPager); //用于多TAB,Tablayout可以滚动 //tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); tabLayout.setTabMode(TabLayout.MODE_FIXED); } class ViewPagerAdapter extends FragmentPagerAdapter{ int pagecount=3; private int color[]=new int[]{android.R.color.holo_orange_light,android.R.color.holo_green_dark,android.R.color.holo_red_dark}; public ViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return ViewPagerFragment.getInstance(position+1,color[position]); } @Override public int getCount() { return pagecount; } @Override public CharSequence getPageTitle(int position) { return "Page"+(position+1); } } }
Ok,这样一个效果就轻松实现了,有什么问题可以在下方评论:)
相关文章推荐
- android studio 怎么运行java
- android sdk中example如何编译
- Android同一Activity中不同Fragment设置不同的menu(ViewPager+Fragment)
- 读书笔记--Android数据存储与文件IO
- android之获取屏幕宽度、控件宽度
- android中layout属性介绍
- Android IntentService
- android初接触之service2
- android wearable-Creating a 2D Picker,Showing Confirmations and Exiting Full-Screen Activities
- 【常用工具类】ToastUtil
- Android自助餐之动画(二)属性动画
- Android自助餐之动画(二)补间动画
- Android自助餐之动画(一)帧动画
- Android SQLLite 的基础操作
- android wearable-Creating Cards and Creating Lists
- Android之TextView
- android wearable-Creating Custom Layouts
- android初接触之service1
- android 获取apk md5值
- Android studio ElasticDownloadView