您的位置:首页 > 移动开发 > Android开发

【Android进阶】实现各种各样的Tab切换效果

2016-07-28 18:04 513 查看

一、View  + ViewPager

使用ViewPager和View实现切换效果,效果如下:



主布局界面:

<LinearLayout 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"
android:orientation="vertical">
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
/>
<include layout="@layout/bottom"/>
</LinearLayout>top.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:gravity="center"
android:background="@drawable/title_bar"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff"
android:gravity="center"
android:textSize="20sp"/>
</LinearLayout>bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/id_tab_chat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:id="@+id/id_tab_chat_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed"
android:background="#00000000"/>
<TextView
android:text="微信"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_friend"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:id="@+id/id_tab_friend_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_find_frd_normal"
android:background="#00000000"/>
<TextView
android:text="朋友"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:id="@+id/id_tab_address_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_address_normal"
android:background="#00000000"/>
<TextView
android:text="通讯录"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<ImageButton
android:id="@+id/id_tab_settings_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@drawable/tab_settings_normal"
android:background="#00000000"/>
<TextView
android:text="设置"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
</LinearLayout>

</LinearLayout>我们在这里给LinearLayout设置了点击监听,但是它的子元素ImageButton会拦截掉这个点击事件,但是ImageButton并没有处理点击事件,所以点击ImageButton时没有效果,所以这里把clickable设置为false
MainActivity.java

/**
* ViewPager实现主界面制作,使用View
*/

public class MainActivity extends Activity implements OnClickListener{

private ViewPager viewPager;
private PagerAdapter adapter;
private List<View> mViews = new ArrayList<View>();

private LinearLayout mTabWeixin;
private LinearLayout mTabFriends;
private LinearLayout mTabAddress;
private LinearLayout mTabSettings;

private ImageButton mWeixinImg;
private ImageButton mFriendsImg;
private ImageButton mAddressImg;
private ImageButton mSettingsImg;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

initView();
initEvent();
}

private void initEvent() {
// 设置事件
mTabAddress.setOnClickListener(this);
mTabFriends.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
mTabWeixin.setOnClickListener(this);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
//ViewPager 改变时改变图标的颜色
@Override
public void onPageSelected(int arg0) {
int currentItem = viewPager.getCurrentItem();
resetImg();
switch (currentItem) {
case 0:
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mFriendsImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
break;

default:
break;
}
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});
}

private void initView() {
viewPager = (ViewPager)findViewById(R.id.viewpager);

mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_chat);
mTabAddress = (LinearLayout)findViewById(R.id.id_tab_address);
mTabFriends = (LinearLayout)findViewById(R.id.id_tab_friend);
mTabSettings = (LinearLayout)findViewById(R.id.id_tab_settings);

mWeixinImg = (ImageButton)findViewById(R.id.id_tab_chat_btn);
mFriendsImg = (ImageButton)findViewById(R.id.id_tab_friend_btn);
mAddressImg = (ImageButton)find
4000
ViewById(R.id.id_tab_address_btn);
mSettingsImg = (ImageButton)findViewById(R.id.id_tab_settings_btn);

LayoutInflater inflater = LayoutInflater.from(this);
View tab01 = inflater.inflate(R.layout.tab01, null);
View tab02 = inflater.inflate(R.layout.tab02, null);
View tab03 = inflater.inflate(R.layout.tab03, null);
View tab04 = inflater.inflate(R.layout.tab04, null);

mViews.add(tab01);
mViews.add(tab02);
mViews.add(tab03);
mViews.add(tab04);
//创建ViewPager的 PageAdapter
adapter = new PagerAdapter() {
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// 销毁View
container.removeView(mViews.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
// 初始化View
View view = mViews.get(position);
container.addView(view);
return view;
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getCount() {
return mViews.size();
}
};
viewPager.setAdapter(adapter);
}

@Override
public void onClick(View v) {
// 点击底部按钮时切换页面并改变图标颜色
switch (v.getId()) {
case R.id.id_tab_chat:
viewPager.setCurrentItem(0);
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.id_tab_friend:
viewPager.setCurrentItem(1);
mFriendsImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_address:
viewPager.setCurrentItem(2);
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.id_tab_settings:
viewPager.setCurrentItem(3);
mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
}
//将所有的图片都变暗
private void resetImg(){
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFriendsImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
}
}
View 比较简单,就是一个TextView,这里不贴代码了。

二、FragmentManager + Fragment 

使用FragmentManager来 切换Fragment,通过 add  hide  show 方法来添加显示和隐藏Fragment,没有直接使用replace方法,每次销毁创建会比较浪费资源。

效果如下,只可以点击切换,不可以滑动切换:



界面布局和上面大体一样,不过View换成了Fragment

主布局:

<LinearLayout 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"
android:orientation="vertical">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
Fragment 布局界面:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:text="this is first tab"
android:textSize="24dp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>Fragment 代码
public class WeixinFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.tab01, container,false);
}
}其他Fragment类似,就是名字不一样
MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener{
private LinearLayout mTabWeixin;
private LinearLayout mTabFriends;
private LinearLayout mTabAddress;
private LinearLayout mTabSettings;

private ImageButton mWeixinImg;
private ImageButton mFriendsImg;
private ImageButton mAddressImg;
private ImageButton mSettingsImg;

private Fragment tab001;
private Fragment tab002;
private Fragment tab003;
private Fragment tab004;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
}
private void initView() {

mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_chat);
mTabAddress = (LinearLayout)findViewById(R.id.id_tab_address);
mTabFriends = (LinearLayout)findViewById(R.id.id_tab_friend);
mTabSettings = (LinearLayout)findViewById(R.id.id_tab_settings);

mWeixinImg = (ImageButton)findViewById(R.id.id_tab_chat_btn);
mFriendsImg = (ImageButton)findViewById(R.id.id_tab_friend_btn);
mAddressImg = (ImageButton)findViewById(R.id.id_tab_address_btn);
mSettingsImg = (ImageButton)findViewById(R.id.id_tab_settings_btn);
//设置默认选中第0页
setSelect(0);
}
private void initEvent() {
// 设置事件
mTabAddress.setOnClickListener(this);
mTabFriends.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
mTabWeixin.setOnClickListener(this);
}
@Override
public void onClick(View v) {
//点击是默认所有图片都变暗
resetImg();
switch (v.getId()) {
case R.id.id_tab_chat:
setSelect(0);
break;
case R.id.id_tab_friend:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_settings:
setSelect(3);
break;
default:
break;
}
}
//设置选中第几页,使用FragmentManager进行控制
private void setSelect(int i){
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
hideFragment(transaction);
//改变内容区域,把图片设置为亮的
switch (i) {
case 0:
if(tab001 == null){
tab001 = new WeixinFragment();
//添加Fragment到 container
transaction.add(R.id.container, tab001);
}else{
//显示Fragment
transaction.show(tab001);
}
//更改图片
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
if(tab002 == null){
tab002 = new FriendsFragment();
transaction.add(R.id.container, tab002);
}else{
transaction.show(tab002);
}
mFriendsImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
if(tab003 == null){
tab003 = new AddressFragment();
transaction.add(R.id.container, tab003);
}else{
transaction.show(tab003);
}
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
if(tab004 == null){
tab004 = new SettingsFragment();
transaction.add(R.id.container, tab004);
}else{
transaction.show(tab004);
}
mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
break;

default:
break;
}
//提交事务
transaction.commit();
}
//隐藏所有的Fragment
private void hideFragment(FragmentTransaction transaction) {
if(tab001 != null){
transaction.hide(tab001);
}
if(tab002 != null){
transaction.hide(tab002);
}
if(tab003 != null){
transaction.hide(tab003);
}
if(tab004 != null){
transaction.hide(tab004);
}
}
//将所有的图片都变暗
private void resetImg(){
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFriendsImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
}
}

三、ViewPager + Fragment

使用ViewPager + Fragment 来进行Tab页的制作,不但可以点击,也可以进行滑动切换,这也是最常用的模式,最推荐使用的模式。

效果:



布局文件和上面类似,主布局
<LinearLayout 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"
android:orientation="vertical">
<include layout="@layout/top"/>
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />

<include layout="@layout/bottom"/>
</LinearLayout>MainActivity.java
public class MainActivity extends FragmentActivity implements OnClickListener{
private ViewPager viewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments = new ArrayList<Fragment>();

private LinearLayout mTabWeixin;
private LinearLayout mTabFriends;
private LinearLayout mTabAddress;
private LinearLayout mTabSettings;

private ImageButton mWeixinImg;
private ImageButton mFriendsImg;
private ImageButton mAddressImg;
private ImageButton mSettingsImg;

Fragment tab001;
Fragment tab002;
Fragment tab003;
Fragment tab004;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initEvent();
}

private void initView() {
viewPager = (ViewPager)findViewById(R.id.container);

mTabWeixin = (LinearLayout)findViewById(R.id.id_tab_chat);
mTabAddress = (LinearLayout)findViewById(R.id.id_tab_address);
mTabFriends = (LinearLayout)findViewById(R.id.id_tab_friend);
mTabSettings = (LinearLayout)findViewById(R.id.id_tab_settings);

mWeixinImg = (ImageButton)findViewById(R.id.id_tab_chat_btn);
mFriendsImg = (ImageButton)findViewById(R.id.id_tab_friend_btn);
mAddressImg = (ImageButton)findViewById(R.id.id_tab_address_btn);
mSettingsImg = (ImageButton)findViewById(R.id.id_tab_settings_btn);

tab001 = new WeixinFragment();
tab002 = new FriendsFragment();
tab003 = new AddressFragment();
tab004 = new SettingsFragment();

mFragments.add(tab001);
mFragments.add(tab002);
mFragments.add(tab003);
mFragments.add(tab004);

mAdapter = new FragmentPagerAdapter( getSupportFragmentManager()) {

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

@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
};
viewPager.setAdapter(mAdapter);
}
private void initEvent() {
// 设置事件
mTabAddress.setOnClickListener(this);
mTabFriends.setOnClickListener(this);
mTabSettings.setOnClickListener(this);
mTabWeixin.setOnClickListener(this);
viewPager.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int arg0) {
//当前选中的Fragment 下标
int currentItem = viewPager.getCurrentItem();
//把图片全设置为暗的
resetImg();
switch (currentItem) {
case 0:
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mFriendsImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
break;

default:
break;
}
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override
public void onPageScrollStateChanged(int arg0) {

}
});
}

@Override
public void onClick(View v) {
resetImg();
switch (v.getId()) {
case R.id.id_tab_chat:
setSelect(0);
break;
case R.id.id_tab_friend:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_settings:
setSelect(3);
break;
default:
break;
}
}
private void setSelect(int i){
//改变内容区域,把图片设置为亮的
switch (i) {
case 0:
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mFriendsImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);
break;

default:
break;
}
//切换Fragment
viewPager.setCurrentItem(i);
}
//将所有的图片都变暗
private void resetImg(){
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mFriendsImg.setImageResource(R.drawable.tab_find_frd_normal);
mSettingsImg.setImageResource(R.drawable.tab_settings_normal);
}
}

四、ViewPager + Fragment + 第三方指示器 viewPagerLibrary

使用第三方库 viewPagerLibrary 来实现指示器切换效果,效果如下:



主布局界面:

<LinearLayout 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"
android:orientation="vertical" >

<include layout="@layout/top"/>

<com.viewpagerindicator.TabPageIndicator
android:id="@+id/id_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent">
</com.viewpagerindicator.TabPageIndicator>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>top.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#58ACED"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/idx_logo"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="慕课网"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"
android:layout_marginLeft="3dp"
/>
</LinearLayout>Fragment 布局  frag.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello world"
android:layout_centerInParent="true"/>
</RelativeLayout>MainActivity.java
public class MainActivity extends FragmentActivity {
private ViewPager mViewPager;
//设置指示器
private TabPageIndicator indica
bfa0
tor;
//ViewPager 适配器
private TabAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
mViewPager = (ViewPager)findViewById(R.id.viewpager);
indicator = (TabPageIndicator)findViewById(R.id.id_indicator);
//创建适配器
mAdapter = new TabAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
//给ViewPager设置指示器
indicator.setViewPager(mViewPager,0);
}
}这里创建了适配器并设置适配器,并且把ViewPager和指示器进行了绑定。
Fragment  代码

public class TabFragment extends Fragment{
int pos;
public TabFragment(int pos){
this.pos = pos;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.frag, container,false);
TextView tView = (TextView) view.findViewById(R.id.tv);
tView.setText(TabAdapter.TITLES[pos]);
return view;
}
}TabAdapter.java  适配器代码
public class TabAdapter extends FragmentPagerAdapter{
public static String[] TITLES = new String[] { "课程", "问答", "求课", "学习", "计划" };

public TabAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int arg0) {
TabFragment fragment = new TabFragment(arg0);
return fragment;
}

@Override
public int getCount() {
return TITLES.length;
}

//设置标题
@Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
}TabAdapter中我们设置了标题的名字,重写了CharSequence getPageTitle 方法,指示器通过这里去获取标题的名字,同时在 getItem中 创建了 TITLES长度个数的Fragment,并设置了一个参数 arg0 ,Fragment构造函数中接收这个值并把值设置为TextView以作Fragment显示时的区分。
点击下载源码

hyman视频传送地址: http://www.imooc.com/learn/264
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息