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没做什么内容，布局文件也很简单，小编就复制了；

转载请注明出处！