Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面

Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面

android design library提供的TabLayout

android studio 依赖

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

1。顶部

aty

package com.louis.louistablayout4viewpager;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;
/*
Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity，
（1）app:tabMode有两个值：fixed和scrollable。
（2）app:tabGravity有两个值：fill和center。
比较常用的是app:tabMode设置值scrollable，以及app:tabGravity设置值center。
比如，当app:tabMode设置值scrollable表示此TabLayout中当子view超出屏幕边界时候，将提供滑动以便滑出不可见的那些子view。
而app:tabGravity设置值center，在有些情况下，比如TabLayout中子view较少需要居中显示时候的情景。
*/
public class MainActivity extends AppCompatActivity {

List<View> views=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

for (int i=0;i<9;i++){
TextView textView=new TextView(this);
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
textView.setLayoutParams(layoutParams);
textView.setText("页面"+i);
textView.setGravity(Gravity.CENTER);
views.add(textView);
}

ViewPager viewPager= (ViewPager) findViewById(R.id.id_vp);
MyPagerAdapter myPagerAdapter=new MyPagerAdapter(views);
viewPager.setAdapter(myPagerAdapter);

TabLayout tabLayout= (TabLayout) findViewById(R.id.id_tl);

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

/* for (int i=0;i<views.size();i++){
TabLayout.Tab tlt=tabLayout.newTab().setText("xxx"+i);
tabLayout.addTab(tlt);
}*/

tabLayout.setupWithViewPager(viewPager);

}
}

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.louis.louistablayout4viewpager.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/id_tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#ff0900"
app:tabSelectedTextColor="#ffaa00"
app:tabTextColor="#FF000000"
>
</android.support.design.widget.TabLayout>

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

2。底部

aty

package com.louis.louistablayout4viewpager;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class Main2Activity extends AppCompatActivity {

List<View> views=new ArrayList<>();
TabLayout tabLayout;
int nowPos=0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);

for (int i=0;i<5;i++){
TextView textView=new TextView(this);
LinearLayout.LayoutParams layoutParams=new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
textView.setLayoutParams(layoutParams);
textView.setText("页面"+i);
textView.setGravity(Gravity.CENTER);
views.add(textView);
}

ViewPager viewPager= (ViewPager) findViewById(R.id.id_vp);
MyPagerAdapter myPagerAdapter=new MyPagerAdapter(views);
viewPager.setAdapter(myPagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
//
updateSelected(position);

}

@Override
public void onPageScrollStateChanged(int state) {

}
});
tabLayout= (TabLayout) findViewById(R.id.id_tl);

tabLayout.setTabMode(TabLayout.MODE_FIXED);

tabLayout.setupWithViewPager(viewPager);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
tab.setCustomView(getTabView(i));
//tab.setIcon(R.mipmap.ic_launcher);
//tab.setText("text1");
}
}
updateSelected(0);//默认选择0

}

private void updateSelected(int position) {
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
if (tab != null) {
LinearLayout linearLayout = (LinearLayout) tab.getCustomView().findViewById(R.id.id_ll_tab_bg);
TextView textView= (TextView) linearLayout.findViewById(R.id.id_tv);
if(i==position) {
textView.setTextColor(Color.parseColor("#FF00FF"));
}else{
textView.setTextColor(Color.parseColor("#000000"));

}
}
}
}

public View getTabView(int position) {
View v = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) v.findViewById(R.id.id_tv);
tv.setText("菜单" + position);
ImageView img = (ImageView) v.findViewById(R.id.id_iv);
img.setImageResource(R.mipmap.ic_launcher);
return v;
}
}

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.louis.louistablayout4viewpager.MainActivity">

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

<android.support.design.widget.TabLayout
android:id="@+id/id_tl"
android:layout_width="match_parent"
android:layout_height="80dp"
app:tabIndicatorColor="@null"
app:tabSelectedTextColor="@null"
app:tabTextColor="@null"
>
</android.support.design.widget.TabLayout>

</LinearLayout>

customer tab

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/id_ll_tab_bg"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/id_iv"
android:src="@mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="@+id/id_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="栏目"
/>
</LinearLayout>

3。共用的adapter

package com.louis.louistablayout4viewpager;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
* Created by Administrator on 2016/3/23.
*/
public class MyPagerAdapter extends PagerAdapter {
List<View> views;

public MyPagerAdapter(List<View> views) {
this.views = views;
}

@Override
public int getCount() {
return views.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// return super.instantiateItem(container, position);
View view=views.get(position);
container.addView(view);
return  view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//super.destroyItem(container, position, object);
container.removeView(views.get(position));
}

@Override
public CharSequence getPageTitle(int position) {
//return super.getPageTitle(position);
return "标题"+position;
}
}

结果：

顶部：



底部：



demo下载：http://download.csdn.net/detail/richiezhu/9470823

2016年8月8日08:52:57更新

包括上下导航整合一起：https://github.com/louisgeek/LouisTabLayout4ViewPager