设置小红点和数字方法：

http://blog.csdn.net/yancychas/article/details/77331177

方法一. ViewPager + List + PagerAdapter

先看activity_main.xml [html] view plain copy

<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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#0E6DB0"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#0E6DB0"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/llChat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/ivChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/tab_chat" />
<TextView
android:id="@+id/tvChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="@drawable/tab_textview" />
LinearLayout>
<LinearLayout
android:id="@+id/llFriends"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/ivFriends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/tab_friends" />
<TextView
android:id="@+id/tvFriends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="@drawable/tab_textview" />
LinearLayout>
<LinearLayout
android:id="@+id/llContacts"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/ivContacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/tab_contacts" />
<TextView
android:id="@+id/tvContacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="@drawable/tab_textview" />
LinearLayout>
<LinearLayout
android:id="@+id/llSettings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/ivSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:src="@drawable/tab_setting" />
<TextView
android:id="@+id/tvSettings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="@drawable/tab_textview" />
LinearLayout>
LinearLayout>
LinearLayout>

说明一:还有另一种方式是用RadioGroup的方式,但是那种方式如果以后要包含小红点提醒或者右上角数字角标提醒,就不好灵活的修改了.所以本文忽略那种方法. 说明二:底部导航栏的4个ImageView使用的src, TextView使用的textColor都是seletor

然后看MainActivity.java [java] view plain copy

package com.yao.tab01;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity implements OnClickListener {
private List views = new ArrayList();
private ViewPager viewPager;
private LinearLayout llChat, llFriends, llContacts, llSettings;
private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;
private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
llChat = (LinearLayout) findViewById(R.id.llChat);
llFriends = (LinearLayout) findViewById(R.id.llFriends);
llContacts = (LinearLayout) findViewById(R.id.llContacts);
llSettings = (LinearLayout) findViewById(R.id.llSettings);
llChat.setOnClickListener(this);
llFriends.setOnClickListener(this);
llContacts.setOnClickListener(this);
llSettings.setOnClickListener(this);
ivChat = (ImageView) findViewById(R.id.ivChat);
ivFriends = (ImageView) findViewById(R.id.ivFriends);
ivContacts = (ImageView) findViewById(R.id.ivContacts);
ivSettings = (ImageView) findViewById(R.id.ivSettings);
tvChat = (TextView) findViewById(R.id.tvChat);
tvFriends = (TextView) findViewById(R.id.tvFriends);
tvContacts = (TextView) findViewById(R.id.tvContacts);
tvSettings = (TextView) findViewById(R.id.tvSettings);
ivChat.setSelected(true); //用setlect可以控制控件的被选中状态，使用selector可以控制被选中的颜色和图片变化
tvChat.setSelected(true); //selector的用法见http://blog.csdn.net/yancychas/article/details/77322671
ivCurrent = ivChat;
tvCurrent = tvChat;
viewPager.addOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
changeTab(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private void initData() {
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
views.add(tab01);
views.add(tab02);
views.add(tab03);
views.add(tab04);
MyPagerAdapter adapter = new MyPagerAdapter(views);
viewPager.setAdapter(adapter);
}
@Override
public void onClick(View v) {
changeTab(v.getId());
}
private void changeTab(int id) {
ivCurrent.setSelected(false);
tvCurrent.setSelected(false);
switch (id) {
case R.id.llChat:
viewPager.setCurrentItem(0);
case 0:
ivChat.setSelected(true);
ivCurrent = ivChat;
tvChat.setSelected(true);
tvCurrent = tvChat;
break;
case R.id.llFriends:
viewPager.setCurrentItem(1);
case 1:
ivFriends.setSelected(true);
ivCurrent = ivFriends;
tvFriends.setSelected(true);
tvCurrent = tvFriends;
break;
case R.id.llContacts:
viewPager.setCurrentItem(2);
case 2:
ivContacts.setSelected(true);
ivCurrent = ivContacts;
tvContacts.setSelected(true);
tvCurrent = tvContacts;
break;
case R.id.llSettings:
viewPager.setCurrentItem(3);
case 3:
ivSettings.setSelected(true);
ivCurrent = ivSettings;
tvSettings.setSelected(true);
tvCurrent = tvSettings;
break;
default:
break;
}
}
}

自定义适配器 MyPagerAdapter.java

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;


public class MyPagerAdapter extends PagerAdapter{  //继承适配器

private ListviewList;  
    private List titleList;  

        //实现构造方法
    public MyPagerAdapter(List viewList,List titleList){
this.viewList=viewList;
        this.titleList=titleList; 
    }

/*
ViewPager正常一次加载三个
多余的摧毁
 */

    @Override
    public int getCount() {
return viewList.size();  //返回当前页卡数量
    }

@Override
    public boolean isViewFromObject(View view, Object object) {   //View是否来自对象
        return view==object;   
    }


@Override
    public Object instantiateItem(ViewGroup container, int position) {  //实例化一个页卡
        container.addView(viewList.get(position));  //position代表当前的位置（所定位的View）
        return viewList.get(position);
    }

@Override
    public void destroyItem(ViewGroup container, int position, Object object) {  //销毁页卡
        container.removeView(viewList.get(position));
    }


/*
    设置Viewpager页卡的标题
    在main_activity.xml文件中的里添加子标签 才起作用
     */
    @Override
    public CharSequence getPageTitle(int position) {  //返回当前view对应的标题
        return titleList.get(position);
    }
}

这种方法一的方式就是提前用mInflater.inflate4个View丢到PagerAdapter里面,再给ViewPager设置Adapter 然后把点击底部Tab的事件和滑动ViewPager的事件(主要包括图片和文字seletor切换)整合在一起.

方法二. ViewPager + List + FragmentPagerAdapter或FragmentStatePagerAdapter

这种方法就很常见了 activity_main.xml和上文一样. 我们看MainActivity.java [java] view plain copy

package com.yao.tab02;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.app.Fragment;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.Window;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends Activity implements OnClickListener {
private List fragments = new ArrayList();
private ViewPager viewPager;
private LinearLayout llChat, llFriends, llContacts, llSettings;
private ImageView ivChat, ivFriends, ivContacts, ivSettings, ivCurrent;
private TextView tvChat, tvFriends, tvContacts, tvSettings, tvCurrent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
llChat = (LinearLayout) findViewById(R.id.llChat);
llFriends = (LinearLayout) findViewById(R.id.llFriends);
llContacts = (LinearLayout) findViewById(R.id.llContacts);
llSettings = (LinearLayout) findViewById(R.id.llSettings);
llChat.addOnClickListener(this);
llFriends.setOnClickListener(this);
llContacts.setOnClickListener(this);
llSettings.setOnClickListener(this);
ivChat = (ImageView) findViewById(R.id.ivChat);
ivFriends = (ImageView) findViewById(R.id.ivFriends);
ivContacts = (ImageView) findViewById(R.id.ivContacts);
ivSettings = (ImageView) findViewById(R.id.ivSettings);
tvChat = (TextView) findViewById(R.id.tvChat);
tvFriends = (TextView) findViewById(R.id.tvFriends);
tvContacts = (TextView) findViewById(R.id.tvContacts);
tvSettings = (TextView) findViewById(R.id.tvSettings);
ivChat.setSelected(true);
tvChat.setSelected(true);
ivCurrent = ivChat;
tvCurrent = tvChat;
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
changeTab(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
viewPager.setOffscreenPageLimit(2); //设置向左和向右都缓存limit个页面
}
private void initData() {
Fragment chatFragment = new ChatFragment();
Fragment friendsFragment = new FriendsFragment();
Fragment contactsFragment = new ContactsFragment();
Fragment settingsFragment = new SettingsFragment();
fragments.add(chatFragment);
fragments.add(friendsFragment);
fragments.add(contactsFragment);
fragments.add(settingsFragment);
MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);
// MyFragmentStatePagerAdapter adapter = new MyFragmentStatePagerAdapter(getFragmentManager(), fragments);
viewPager.setAdapter(adapter);
}
@Override
public void onClick(View v) {
changeTab(v.getId());
}
private void changeTab(int id) {
ivCurrent.setSelected(false);
tvCurrent.setSelected(false);
switch (id) {
case R.id.llChat:
viewPager.setCurrentItem(0);
case 0:
ivChat.setSelected(true);
ivCurrent = ivChat;
tvChat.setSelected(true);
tvCurrent = tvChat;
break;
case R.id.llFriends:
viewPager.setCurrentItem(1);
case 1:
ivFriends.setSelected(true);
ivCurrent = ivFriends;
tvFriends.setSelected(true);
tvCurrent = tvFriends;
break;
case R.id.llContacts:
viewPager.setCurrentItem(2);
case 2:
ivContacts.setSelected(true);
ivCurrent = ivContacts;
tvContacts.setSelected(true);
tvCurrent = tvContacts;
break;
case R.id.llSettings:
viewPager.setCurrentItem(3);
case 3:
ivSettings.setSelected(true);
ivCurrent = ivSettings;
tvSettings.setSelected(true);
tvCurrent = tvSettings;
break;
default:
break;
}
}
}

适配器MyFragmentPagerAdapter

import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;public class MyFragmentPagerAdapter extends FragmentPagerAdapter {    private List<Fragment> fragmentList;    public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragments) {        super(fm);        this.fragmentList=fragments;    }    //得到返回的Fragment    @Override    public Fragment getItem(int position) {        return fragmentList.get(position);    }    //计算Fragment的数量    @Override    public int getCount() {        return fragmentList.size();    }}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- getCount()返回的是ViewPager页面的数量，getItem()返回的是要显示的fragent对象。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
说明一:讲一下FragmentPagerAdapter 和 FragmentStatePagerAdapter 区别

1.FragmentStatePagerAdapter : 适合多个界面,类似于listView原理,离开视线就会被回收会执行onDestroyView方法 onDestroy方法
2.FragmentPagerAdapter : 适合少量界面, 方便滑动执行onDestroyView方法不执行onDestroy方法
3.两者都会预先准备好并缓存上一个和下一个Fragment

说明二: 重要说明:有个神方法viewPager.setOffscreenPageLimit(2); //设置向左和向右都缓存limit个页面. 我也是很晚才发现有这个方法.下面4个Tab, 只要你设置这个值为3, 那4个Tab永远都会缓存着了.

变态说明:这里告诉大家一个小技巧.ViewPager是V4包里面的.用到的FragmentPagerAdapter和FragmentStatePagerAdapter也是V4包里面的. 如果我们不想用android.support.v4.app.Fragment, 那就可以自己复制出来一个FragmentPagerAdapter,然后把里面的Fragment改成android.app.Fragment. 连带FragmentManager和FragmentTransaction也要改成android.app包下的
如需改变选中图片和文字，用setlect可以控制控件的被选中状态，使用selector可以控制被选中的颜色和图片变化。用法见http://blog.csdn.net/yancychas/article/details/77322671

禁止viewpaper的滑动动作
1.新建NoScrollViewPager继承ViewPager，重写onTouchEvent和onInterceptTouchEvent，返回false即禁止滑动

2.在一个参数的setCurrentItem中引用两个参数的setCurrentItem，并设置第二个参数为false能禁止滑动动画

import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.MotionEvent;public class NoScrollViewPager extends ViewPager {    private boolean noScroll = false;    public NoScrollViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    public NoScrollViewPager(Context context) {        super(context);    }    public void setNoScroll(boolean noScroll) {        this.noScroll = noScroll;    }    @Override    public void scrollTo(int x, int y) {        super.scrollTo(x, y);    }    /**     * 在onTouchEvent和onInterceptTouchEvent中返回false禁止滑动动作     */    @Override    public boolean onTouchEvent(MotionEvent arg0) {        return false;    }    @Override    public boolean onInterceptTouchEvent(MotionEvent arg0) {        return false;    }    /**     * 在一个参数的setCurrentItem中引用两个参数的setCurrentItem，     * 并设置第二个参数为false能禁止滑动动画     * @param item     */    @Override    public void setCurrentItem(int item) {        super.setCurrentItem(item,false);    }    @Override    public void setCurrentItem(int item, boolean smoothScroll) {        super.setCurrentItem(item, smoothScroll);    }}

在layout文件中如下代码即可使用（与viewpaper用法相同） android:id="@+id/pager" android:layout_height="0dp" android:layout_margintop="5dp" android:layout_weight="1" android:layout_width="fill_parent"/>

原文http://blog.csdn.net/alcoholdi/article/details/51594061#t1 https://yq.aliyun.com/articles/61268
http://www.2cto.com/kf/201411/348867.html

底部导航栏：利用viewpager实现Android底部标题栏

设置小红点和数字方法：

http://blog.csdn.net/yancychas/article/details/77331177

方法一. ViewPager + List + PagerAdapter

方法二. ViewPager + List + FragmentPagerAdapter或FragmentStatePagerAdapter

更多相关文章

随机推荐