使用ViewpagerIndicator与viewpager实现tab标签

时间:2022-11-02 08:52:46

下载地址https://github.com/JakeWharton/ViewPagerIndicator

问题:1:新建的 项目和viewpagerindicator都有android-support-v4.jar。有可能版本不一样,而且不能有两个。不项目的android-support-v4.jar删除。

           2:布局小问题。因为加了头部布局覆盖了,导致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="wrap_content"
    android:orientation="horizontal" >


    <ImageView
        android:id="@+id/image_app"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/apporderform" />


    <TextView
        android:id="@+id/home_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:gravity="center"

        android:text="@string/head" />


    <ImageView
        android:id="@+id/image_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/add_num" />


    <ImageView
        android:id="@+id/image_search"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/appsearch" />


</LinearLayout>

显示效果:

使用ViewpagerIndicator与viewpager实现tab标签



主布局:<?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" >


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


  <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/tab_pageindicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </com.viewpagerindicator.TabPageIndicator> 


    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />


</LinearLayout>

代码:package com.JASON.mcsdn;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.widget.Toast;


import com.viewpagerindicator.TabPageIndicator;


public class HomePageActivity extends FragmentActivity
{
private String[] Title =
{ "最新", "前端", "移动开发", "语言","游戏&图像","系统&安全","loT","数据库","业界","云计算","大数据","研发工具",
"软件工具","程序人生","社区服务"};
private ViewPager mPager;


@Override
protected void onCreate(Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.homepage);
// 设置viewpager的adapter
mPager = (ViewPager) findViewById(R.id.tab_viewpager);
mPager.setAdapter(new TabindicatorAdapter(getSupportFragmentManager()));
// 设置tabpagerindicator链接viewpager
TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.tab_pageindicator);
indicator.setViewPager(mPager);
// 用indicator设置监听事件
indicator.setOnPageChangeListener(new OnPageChangeListener()
{


@Override
public void onPageSelected(int arg0)
{


Toast.makeText(getApplicationContext(), Title[arg0], Toast.LENGTH_SHORT).show();


}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2)
{
// TODO Auto-generated method stub


}


@Override
public void onPageScrollStateChanged(int arg0)
{
// TODO Auto-generated method stub


}
});
}


/*
* 设置viewpager的adpter
*/


class TabindicatorAdapter extends FragmentPagerAdapter
{


public TabindicatorAdapter(FragmentManager fm)
{
super(fm);
// TODO Auto-generated constructor stub
}


@Override
public CharSequence getPageTitle(int position)
{
// TODO Auto-generated method stub
return Title[position % Title.length]+"   ";
}


@Override
public Fragment getItem(int arg0)
{
Fragment fragment = new NewsFragment();
Bundle args = new Bundle();
args.putString("args", Title[arg0]);


fragment.setArguments(args);

Log.d("HomePageActivity", "getItem:");

return fragment;
}


@Override
public int getCount()
{
// TODO Auto-generated method stub
Log.d("HomePageActivity", "Title.length:"+Title.length);
return Title.length;
}


}
}


fragment:package com.JASON.mcsdn;


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


public class NewsFragment extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment, null);
TextView mTextView = (TextView) view.findViewById(R.id.fragment_tv);
Log.d("NewsFragment", "NewsFragment");
Bundle bundle = getArguments();
String tString = bundle.getString("args");
Log.d("NewsFragment", "args:"+tString);
mTextView.setText(tString);
return view;
}


@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState)
{
// TODO Auto-generated method stub
super.onActivityCreated(savedInstanceState);
}

}

效果图:使用ViewpagerIndicator与viewpager实现tab标签