165.n1-viewIndicator实现tab

来源:互联网 发布:网络互动直播新闻 编辑:程序博客网 时间:2024/06/05 05:27
ViewPagerIndicator库的使用
ViewPager指针项目,在使用ViewPager的时候能够指示ViewPager所在的位置,就像Google Play中切换的效果一样,还能使用在应用初始化的介绍页面
1. 引入ViewPagerIndicator库
2. 编写布局文件
<com.viewpagerindicator.TabPageIndicator            android:id="@+id/indicator"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1" />
3. mIndicator.setViewPager(mViewPager);//将viewpager和mIndicator关联起来,必须在viewpager设置完adapter后才能调用
4. 重写PagerAdapter方法,返回页面标题
/**
* 重写此方法,返回页面标题,用于viewpagerIndicator的页签显示
*/@Overridepublic CharSequence getPageTitle(int position) {return mNewsTabData.get(position).title;}

5. 自定义样式修改,添加图标

MainIfest.xml中添加样式在PageIndicatorDefaults中可以修改自定义的样式

<activity android:name=".MainActivity"            android:theme="@style/Theme.PageIndicatorDefaults"            ></activity>
new_menu_details.xml处理使用库初始化的tab以外添加了一个ImageButton

<?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" >        <LinearLayout         android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal"        >        <!-- 使用开源的框架PageIndicator实现Tab -->    <com.viewpagerindicator.TabPageIndicator            android:id="@+id/indicator"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1" />        <ImageButton            android:id="@+id/btn_next"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:background="@android:color/transparent"            android:padding="5dp"            android:src="@drawable/news_cate_arr" />    </LinearLayout>    <!-- 详情的viewpager -->    <android.support.v4.view.ViewPager        android:id="@+id/vp_menu_detail"        android:layout_width="match_parent"    android:layout_height="match_parent"        /></LinearLayout>
NewsMenuDetailPager.java使用注解来注释图片按钮,添加点击事件,MenuDetailAdapter中重写titile方法
package com.ldw.news.base.menudetails;import java.util.ArrayList;import android.app.Activity;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;import com.ldw.news.R;import com.ldw.news.base.BaseMenuDetailPager;import com.ldw.news.base.TabDetailPager;import com.ldw.news.domain.NewsData.NewsTabData;import com.lidroid.xutils.ViewUtils;import com.lidroid.xutils.view.annotation.event.OnClick;import com.viewpagerindicator.TabPageIndicator;/* * 菜单详情页-新闻*/ public class NewsMenuDetailPager extends BaseMenuDetailPager {private ViewPager vp_menu_detail;private ArrayList<TabDetailPager> mPagerList;private ArrayList<NewsTabData> mNewsTabData;//页签的网络数据private TabPageIndicator mIndicator;public NewsMenuDetailPager(Activity activity, ArrayList<NewsTabData> children) {super(activity);//接受传过来的children数据,有11个mNewsTabData = children;}@Overridepublic View initView() {View view = View.inflate(mActivity, R.layout.news_menu_details, null);vp_menu_detail = (ViewPager) view.findViewById(R.id.vp_menu_detail);mIndicator = (TabPageIndicator) view.findViewById(R.id.indicator);//xUtils使用注解ViewUtils.inject(this, view);        return view;}@Overridepublic void initData(){//数据是通过从服务器中获取大数据来初始化mPagerList = new ArrayList<TabDetailPager>();for(int i = 0; i < mNewsTabData.size(); i++){TabDetailPager tabDetailPager = new TabDetailPager(mActivity, mNewsTabData.get(i));//添加到链表mPagerList.add(tabDetailPager);}vp_menu_detail.setAdapter(new MenuDetailAdapter());//在vp_menu_detail设置完成adapter以后才能调用,viewpager和indicator关联mIndicator.setViewPager(vp_menu_detail);}//监听右边的箭头,切换内容,内容+1@OnClick(R.id.btn_next)public void nextPage(View view){int currentItem = vp_menu_detail.getCurrentItem();vp_menu_detail.setCurrentItem(++ currentItem);}class MenuDetailAdapter extends PagerAdapter{//使用开源的框架PageIndicator初始化标题,重写这个方法设置tab@Override        public CharSequence getPageTitle(int position) {            return mNewsTabData.get(position).title;        }@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mPagerList.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {// TODO Auto-generated method stubreturn view == object;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {//初始化页面TabDetailPager tabDetailPager = new TabDetailPager(mActivity, mNewsTabData.get(position));//添加viewcontainer.addView(tabDetailPager.mRebootView);//初始化数据tabDetailPager.initData();//显示界面return tabDetailPager.mRebootView;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}}}




0 0