AppBarLayout、ViewPager、Fragment实现页面左右滑动

 
小编给大家分享一个页面左右滑动的案例，采用最新的AppBarLayout替代了ActionBar，ViewPager+Fragment去实现这个案例，并同时简单的介绍了下FloatingActionButton浮动按钮的用法;直接看代码吧，小编使用的的开发工具是Android Studio
 
activity_mian.xml主布局
 
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:context="com.zhiwenyan.activity.MainActivity">
    <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">
       <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">
         
           <!--app:tabIndicatorColor="#ffffff”  左右滑动指示器的颜色-->
           <!--app:tabTextColor="#ffffff"   字体颜色-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:tabIndicatorColor="#ffffff"
                app:tabTextColor="#ffffff"/>
       </android.support.design.widget.AppBarLayout>
       <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
       </android.support.v4.view.ViewPager>
    </LinearLayout>
    <!--android:layout_gravity="bottom|end" FloatingActionButton的位置 -->
 
   <android.support.design.widget.FloatingActionButton
       android:id="@+id/fab"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|end"
       android:layout_margin="@dimen/fab_margin"
       android:src="@android:drawable/ic_input_add"/>
</android.support.design.widget.CoordinatorLayout>
 
MainActivity
 import android.support.v4.app.Fragment;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.example.zhiwenyan.newsapp.R;
import com.zhiwenyan.Fragment.NewsFragment;
import com.zhiwenyan.Fragment.TopFragment;
import com.zhiwenyan.adapter.TabPagerAdapter;
import java.util.ArrayList;
 
public class MainActivity extends AppCompatActivity{    
    private TabLayout tabLayout;
    private ArrayList<Fragment> fragments = newArrayList<>();
    private String[] titles ={"头条", "新闻"};
    private ViewPager viewPager;
 
    @Override
    protectedvoid onCreate(BundlesavedInstanceState) {        
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout =(TabLayout)findViewById(R.id.tab_layout);
        viewPager =(ViewPager)findViewById(R.id.viewPager);
        fragments.add(new NewsFragment());
        fragments.add(new TopFragment());
        viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager(),fragments, titles));

       //给TabLayout设置关联ViewPager，如果设置了ViewPager，那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题
        tabLayout.setupWithViewPager(viewPager);
       //FloatingActionButton的用法      
        FloatingActionButtonfab =(FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener(){

            @Override
           publicvoid onClick(Viewview){                             
              Snackbar.make(view, "Hello FloatingActionButton!", Snackbar.LENGTH_LONG).setAction("Action", null).show();
            }      
      });
  }}
}

TabPagerAdapter：

import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
 
/** * Created byzhiwenyan on 1/6/16. */

 //继承FragmentPagerAdapter
public class TabPagerAdapter extends FragmentPagerAdapter{    
    ArrayList<Fragment> fragments;
    String[] titles;
 
    public TabPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragments,String[] titles) {     
       
super(fm);
        this.fragments =fragments;
        this.titles =titles;
    }
    @Override
    public Fragment getItem(intposition) {        
         return fragments.get(position);
    }
    @Override
    public int getCount() {        
         return fragments.size();
    }

//返回Fragment的标题

    @Override
    public CharSequencegetPageTitle(int position) {

        return titles[position];
    }

}
 
NewsFragment：
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.zhiwenyan.newsapp.R;
public class NewsFragment extends Fragment {
    public NewsFragment() {
        //Required emptypublic constructor
    }
    @Override
    public ViewonCreateView(LayoutInflaterinflater,ViewGroup container,BundlesavedInstanceState){
        //Inflate thelayout for this fragment
        return inflater.inflate(R.layout.fragment_news, container, false);
    }
}
TopFragment:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.zhiwenyan.newsapp.R;
public class TopFragment extends Fragment {
    publicTopFragment() {
        //Required emptypublic constructor
    }
    @Override
    public ViewonCreateView(LayoutInflaterinflater,ViewGroup container, BundlesavedInstanceState){
        //Inflate thelayout for this fragment
        return inflater.inflate(R.layout.fragment_top, container, false);
    }
}
 
 
两个Fragment没做什么内容，布局文件也很简单，小编就复制了；
转载请注明出处！