使用TabPageIndicator创建tab页面

使用TabPageIndicator创建tab页面

一：概述

      Tab页面展示

      

二：1、头部的布局文件，这个很简单：

<?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:background="@color/light_blue"
    android:orientation="horizontal" >


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:src="@drawable/biz_navigation_tab_news_pressed" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:src="@drawable/base_action_bar_back_divider" />


    <TextView
        android:id="@+id/headTV"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="4dp"
        android:layout_weight="1"
        android:text="CSDN资讯"
        android:textColor="@color/white"
        android:textSize="21sp"
        android:textStyle="bold" >
    </TextView>




</LinearLayout>

就显示一个图标和标题。
2、主布局文件：

 

<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:background="#eee"
    android:orientation="vertical" >


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


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


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


</LinearLayout>

一个TabPageIndicator和一个ViewPager。
3、主Activity

package com.zhy.csdndemo;


import com.viewpagerindicator.TabPageIndicator;


import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;


public class MainActivity extends FragmentActivity
{
	private TabPageIndicator mIndicator ;
	private ViewPager mViewPager ;
	private FragmentPagerAdapter mAdapter ;


	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	
		mIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
		mViewPager = (ViewPager) findViewById(R.id.id_pager);
		mAdapter = new TabAdapter(getSupportFragmentManager());
		mViewPager.setAdapter(mAdapter);
		mIndicator.setViewPager(mViewPager, 0);	
	}
}

TabAdapter.java

package com.zhy.csdndemo;


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


public class TabAdapter extends FragmentPagerAdapter
{


	public static final String[] TITLES = new String[] { "业界", "移动", "研发", "程序员杂志", "云计算" };


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


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


	@Override
	public CharSequence getPageTitle(int position)
	{
		return TITLES[position % TITLES.length];
	}


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


}

MainFragment.java

package com.zhy.csdndemo;


import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


@SuppressLint("ValidFragment")
public class MainFragment extends Fragment
{


	private int newsType = 0;


	public MainFragment(int newsType)
	{
		this.newsType = newsType;
	}


	@Override
	public void onActivityCreated(Bundle savedInstanceState)
	{
		super.onActivityCreated(savedInstanceState);
	}


	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
	{
		View view = inflater.inflate(R.layout.tab_item_fragment_main, null);
		TextView tip = (TextView) view.findViewById(R.id.id_tip);
		tip.setText(TabAdapter.TITLES[newsType]);
		return view;
	}


}
<span style="font-family:Arial;BACKGROUND-COLOR: #ffffff"></span>

4、在styles.xml中自定义Theme
 

<style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowBackground">@drawable/init_pic</item>
        <item name="android:windowNoTitle">true</item>  
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>  
    </style>
    
    <style name="MyWidget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>


    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@color/black</item>
    </style>

 

三：在编程过程中遇到的问题

   

我要说是注意事件： （234也是如何使用自己编写的程序）

1.TabPageIndicator这个类找不到引入的路径

      1.需要下载这个 TabPageIndicator 框架， http://blog.csdn.net/lmj623565791/article/details/23513993 得源代码里面有

       2.把下载下来的原代码的viewPagerlibrary项目导入到eclipse里面作为资源包

        file-〉inport-〉exist android project

       3.要使 viewPagerlibrary成为

      右击项目名--〉选择properties---->在左边选择Android--->把is Library打勾--〉应用----〉ok

       4.需要把你开发的项目和 viewPagerlibrary关联

            具体作法是，右击项目名--〉选择properties---->在左边选择Android--->在下方选择Add--->选择需要作为包的项目------〉ok---〉应用----〉ok

       5.按照上面做了后，会出现android-support-v4.jar冲突报错，有的类不能正常的导入，原因是有2个android-support-v4.jar了，所以需要删除一个

         具体做法是：右击你正要写的项目下面的libs下的android-support-v4.jar包， 选择delete，就删掉了这个包了，一切ok了，就可以进行下面的开发了。。。