TabLayout和ViewPager以及Fragment实现超级简单导航栏

来源：互联网发布：楼体亮化设计软件编辑：程序博客网时间：2024/05/17 03:04

导航栏在项目中用到的很多，今天我们就来看看最简单的方式实现，这里我们用到了Design包下面的一个非常强大的类：TabLayout，先来看看那效果图：

布局文件main_activity.xml:

<RelativeLayout 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"    xmlns:app="http://schemas.android.com/apk/res-auto">    <android.support.design.widget.TabLayout        android:id="@+id/tablayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabMode="scrollable"        android:background="@color/colorPrimary_pink" >    </android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="fill_parent"        android:layout_below="@+id/tablayout" >    </android.support.v4.view.ViewPager></RelativeLayout>

到重点了，关键看我们的MainActivity，我们先来看看一般的方式：

package com.dice.md_13_tablayout;import android.os.Bundle;import android.support.design.widget.TabLayout;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.view.ViewPager;public class MainActivity extends FragmentActivity {private TabLayout tablayout;private String[] items_1 = new String[]{"item_1","item_2","item_3","item_4","item_5","item_6","item_7","item_8"};private String[] items_2 = new String[]{"item_1","item_2","item_3"};private ViewPager mViewPager;@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Adapter mAdapter = new Adapter(getSupportFragmentManager());        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mViewPager.setAdapter(mAdapter);        tablayout = (TabLayout) findViewById(R.id.tablayout);        // 1.1 关联 TabLyout 和 ViewPager  作用：为TabLayout 设置title         tablayout.setTabsFromPagerAdapter(mAdapter);        // 1.2 关联 TabLyout 和 ViewPager  作用: 滑动ViewPager TabLayout自动切换 协调切换        mViewPager.setOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));        // 1.3 点击TabLayout 切换ViewPager        tablayout.setOnTabSelectedListener(new OnTabSelectedListener() {@Overridepublic void onTabUnselected(Tab arg0) {// TODO Auto-generated method stub}@Overridepublic void onTabSelected(Tab tab) {mViewPager.setCurrentItem(tab.getPosition());}@Overridepublic void onTabReselected(Tab arg0) {// TODO Auto-generated method stub}});        //  然而 上面的 1.1、1.2、1.3 这里一句话搞定        //tablayout.setupWithViewPager(mViewPager);    }         // 这个Adapter 是必须     public class Adapter extends FragmentPagerAdapter{public Adapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {// TODO Auto-generated method stubMyFragment fragment = new MyFragment();Bundle bundle = new Bundle();bundle.putString("title", items_1[position]);fragment.setArguments(bundle);return fragment;}@Overridepublic CharSequence getPageTitle(int position) {return items_1[position];}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn items_1.length;}          }}

改进之后：

package com.dice.md_13_tablayout;import android.os.Bundle;import android.support.design.widget.TabLayout;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.view.ViewPager;public class MainActivity extends FragmentActivity {private TabLayout tablayout;private String[] items_1 = new String[]{"item_1","item_2","item_3","item_4","item_5","item_6","item_7","item_8"};private String[] items_2 = new String[]{"item_1","item_2","item_3"};private ViewPager mViewPager;@Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Adapter mAdapter = new Adapter(getSupportFragmentManager());        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mViewPager.setAdapter(mAdapter);        tablayout = (TabLayout) findViewById(R.id.tablayout);        //  然而 上面的 1.1、1.2、1.3 这里一句话搞定        tablayout.setupWithViewPager(mViewPager);    }        // 这个Adapter 是必须     public class Adapter extends FragmentPagerAdapter{public Adapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {// TODO Auto-generated method stubMyFragment fragment = new MyFragment();Bundle bundle = new Bundle();bundle.putString("title", items_1[position]);fragment.setArguments(bundle);return fragment;}@Overridepublic CharSequence getPageTitle(int position) {return items_1[position];}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn items_1.length;}          }}

是不是超级简单呢？

0 0