一般的Tab标签效果就是点击下方标签,切换上方视图,现在常见的大多不是单独的标签效果,而是滑动标签,即页面可以直接左右滑动切换,也可以通过下方的tab标签点击切换。我分享下自己的学习心得。首先上个效果图:
这个页面主要有三部分组成:上方的标题栏,中间一个ViewPager,下方一个Tab标签。
效果实现大体分为以下几步:
1)ViewPager中显示是是fragment,所以创建一个List,并初始化fragment实例,添加进去。
homeFragment = new HomeFragment();
meFragment = new MeFragment();
messageFragment = new MessageFragment();
fragments = new ArrayList<>();
fragments.add(homeFragment);
fragments.add(messageFragment);
fragments.add(meFragment);
2)初始化ViewPager。因为加载的是fragment,索引适配器需要用FragmentPagerAdapter,并覆写getCount和getItem两个函数。
void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return fragments.size();
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new MyPageChangeListener());
titleText.setText("首页");
viewPager.setCurrentItem(0);
homeLayout.setSelected(true);
}
3)设置tab点击事件,点击时ViewPager显示对应的fragment。
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab_home:
viewPager.setCurrentItem(0);
break;
case R.id.tab_message:
viewPager.setCurrentItem(1);
break;
case R.id.tab_me:
viewPager.setCurrentItem(2);
break;
default:
break;
}
}
4)设置滑动页面时,改变tab标签显示。
定义一个继承自ViewPager.OnPageChangeListener 的监听器,覆写 onPageSelected 函数
private class MyPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
currentItem = position;
View[] view = {homeLayout, messageLayout, meLayout};
String[] titles = {"首页","消息","我"};
for(View v : view){
v.setSelected(false);
}
Log.d(TAG, "onPageSelected.position = " + position);
titleText.setText(titles[position]);
view[position].setSelected(true);
}
}
在ViewPager上添加监听器
viewPager.addOnPageChangeListener(new MyPageChangeListener());
注意:
1)需添加下面的库
compile 'com.android.support:appcompat-v7:23.0.0'
2)创建的fragment 必须都是继承自这个包
import android.support.v4.app.Fragment;
MainActivity代码如下:
package com.huiyu.hornsey.fragmentdemo;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private static final String TAG = "MainActivity";
private Context context;
private Fragment homeFragment, messageFragment, meFragment;
private List<Fragment> fragments;
private LinearLayout homeLayout, messageLayout, meLayout;
private ViewPager viewPager;
private FragmentPagerAdapter pagerAdapter;
private TextView titleText;
private int currentItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initViewPager();
}
void initViewPager() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public int getCount() {
return fragments.size();
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
};
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new MyPageChangeListener());
titleText.setText("首页");
viewPager.setCurrentItem(0);
homeLayout.setSelected(true);
}
private void initView() {
homeFragment = new HomeFragment();
meFragment = new MeFragment();
messageFragment = new MessageFragment();
fragments = new ArrayList<>();
fragments.add(homeFragment);
fragments.add(messageFragment);
fragments.add(meFragment);
titleText = (TextView) findViewById(R.id.text_title);
homeLayout = (LinearLayout) findViewById(R.id.tab_home);
messageLayout = (LinearLayout) findViewById(R.id.tab_message);
meLayout = (LinearLayout) findViewById(R.id.tab_me);
homeLayout.setOnClickListener(this);
messageLayout.setOnClickListener(this);
meLayout.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.tab_home:
viewPager.setCurrentItem(0);
break;
case R.id.tab_message:
viewPager.setCurrentItem(1);
break;
case R.id.tab_me:
viewPager.setCurrentItem(2);
break;
default:
break;
}
}
private class MyPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
currentItem = position;
View[] view = {homeLayout, messageLayout, meLayout};
String[] titles = {"首页","消息","我"};
for(View v : view){
v.setSelected(false);
}
Log.d(TAG, "onPageSelected.position = " + position);
titleText.setText(titles[position]);
view[position].setSelected(true);
}
}
}
XML代码如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/top_bar"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/main_color">
<TextView
android:id="@+id/text_title"
android:text="标题"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
<LinearLayout
android:id="@+id/bottom_bar"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="45dp">
<LinearLayout
android:id="@+id/tab_home"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" >
<ImageView
android:src="@drawable/tabhome"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_message"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" >
<ImageView
android:src="@drawable/taborder"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/tab_me"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" >
<ImageView
android:src="@drawable/tabmine"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<View
android:id="@+id/line"
android:layout_above="@id/bottom_bar"
android:background="@color/main_color"
android:layout_width="match_parent"
android:layout_height="1dp"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_below="@id/top_bar"
android:layout_above="@id/line"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
资源包供参考: