原创文章,转载请注明 http://blog.csdn.net/leejizhou/article/details/50520547
这篇文章介绍下Android Design Support Library中的TabLayout的使用,如果你还不知道怎么使用这个Design Library请参考 http://blog.csdn.net/leejizhou/article/details/50479934,在使用Viewpager进行页面滑动切换的时候会在上面放一个导航条,平时我们会使用一些第三方来实现这个效果或者自己写,但是都太麻烦,下面来介绍下如何简单的使用Android官方的控件来实现下面这个效果。
这个效果的实现方式是TabLayout+Viewpager+Fragment
下面以一步一步实现这个效果来演示TabLayout的简单使用
1:首先还是在Android Studio中导入这个依赖库
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的背景颜色
<?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
<?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
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进行关联操作
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,这样一个效果就轻松实现了,有什么问题可以在下方评论:)