TabLayout+ViewPager+Fragment完成滑动界面

从昨天下午就搞把这三种一起组合，然后就写，但就是不行，快疯了，写了一遍又一遍就是不行，如果看到我文件包名时，你就知道我有多气愤了。今天中午吃饭的时候就突然想起是不是布局出了点什么问题。一瞅，之前我按照官网上的说是用一般使用水平布局，一打ViewPager布局就发现这布局的宽度几乎为0dp的，就是一场竖道。我去，然后换成相对布局，就重新调了调，然后就行了，我都快哭了。

在文件上是两部分一个是Fragment，另一个就是操作了。

我是新建了两个Fragment这就不全贴出来了，上上篇都说了很简单，Fragment有着和Activity 相似的生命周期。用他进行管理操作很简单和Activity只是创建的方法不同。

创建一个布局进行界面显示。

添加  compile 'com.android.support:design:23.2.1'  备用

1、创建tab_1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#990033"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:text="Tab_1_Toast"
        android:id="@+id/button1_Toast"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

一个Button而已。

2、然后创建一个管理它的类这个类继承Fragment  （Tab_Fragment_1）

package com.example.hejingzhou.sb;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

/**
 * Created by Hejingzhou on 2016/4/9.
 */
public class Tab_Fragment_1 extends Fragment {


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View viewTab_1 = inflater.inflate(R.layout.tab_1, container, false);
        Click(viewTab_1);
        return viewTab_1;
    }

    private void Click(View view) {
        Button btnToast_1 = (Button) view.findViewById(R.id.button1_Toast);
        btnToast_1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getActivity(), "第一个界面的Button", Toast.LENGTH_SHORT).show();
            }
        });
    }

}

这样的一个例子就熟悉了操作过程，和管理过程。

3、接下来我们需要在创建主界面的自动创建的main_activity.xml中添加TabLayout和ViewPaget  TabLayout是由android.support.design.widget包提供。这就是引入compile 'com.android.support:design:23.2.1'的原因了。

package com.example.hejingzhou.sb;




import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.ViewGroup;
import android.widget.Toast;


import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
    private String TAG = getClass().getSimpleName();
    private ViewPager viewPager;
    private TabLayout tabLayout;
    private List<Fragment> fragmentsList;//fragment容器
    private List<String> titleList;//标签容器


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        load();//加载
    }


    private void load() {
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        viewPager = (ViewPager) findViewById(R.id.viewPager);


        fragmentsList = new ArrayList<>();
        titleList = new ArrayList<>();


        fragmentsList.add(new Tab_Fragment_1());
        fragmentsList.add(new Tab_Fragment_2());//将fragment添加到fragmentList的list容器里
        for (int i = 0; i < 3; i++) { //重复添加 只是填充  没什么用
            fragmentsList.add(new Tab_Fragment_1());
        }
        titleList.add("新闻");
        titleList.add("笑话");
        titleList.add("段子");
        titleList.add("视频");
        titleList.add("图片");


        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//tab的模式如果标签多的话用MODE_SCROLLABLE  少的话用MODE_FIXED
        //tabLayout.setBackgroundColor(Color.BLUE);


        FragViewAdapter adapter = new FragViewAdapter(getSupportFragmentManager(), fragmentsList, titleList);
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabsFromPagerAdapter(adapter);//虽然过时了但是不能去掉，去掉后
        //如果是滑动操作的话没事，但是使用标签点击的时候就不行了。
        /**
         * @deprecated Use {@link #setupWithViewPager(ViewPager)} to link a TabLayout with a ViewPager
         *             together. When that method is used, the TabLayout will be automatically updated
         *             when the {@link PagerAdapter} is changed.
         */
        /*@Deprecated
        public void setTabsFromPagerAdapter(@Nullable final PagerAdapter adapter) {
            setPagerAdapter(adapter, false);
        }*/


        /**
         * 选择tablayout的监听，一般是用不到的
         */
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if (tab.getText().equals("新闻")) {
                    Toast.makeText(getApplicationContext(), "滑动或点击了新闻", Toast.LENGTH_SHORT).show();
                }
                if (tab.getPosition() == 1) {
                    Toast.makeText(getApplicationContext(), "滑动或点击了笑话", Toast.LENGTH_SHORT).show();
                }
            }


            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                if (tab.isSelected()) {
                    Toast.makeText(getApplicationContext(), "切换了Pager", Toast.LENGTH_SHORT).show();
                }
                Log.i(TAG, "tab.getTag()" + tab.getTag());
            }


            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                //不知道干啥的
            }
        });
    }


    /**
     * 创建适配器，主要是为了fragmet与标题进行匹配的 继承FragmentPagerAdapter
     */
    class FragViewAdapter extends FragmentPagerAdapter {
        List<Fragment> fragmentList_;
        List<String> titleList_;


        public FragViewAdapter(FragmentManager fm, List<Fragment> fragmentList, List<String> titleList) {
            super(fm);
            fragmentList_ = fragmentList;
            titleList_ = titleList;
        }


        @Override//fragment匹配
        public Fragment getItem(int position) {
            Log.i(TAG, "getItem  " + fragmentList_.get(position));
            return fragmentList_.get(position);
        }


        @Override//获取fragment的数量
        public int getCount() {
            return titleList_.size();
        }


        @Override//对标题进行匹配
        public CharSequence getPageTitle(int position) {
            Log.i(TAG, "getPageTitle  " + titleList_.get(position));
            return titleList_.get(position);
        }


        @Override//销毁 不知道这样做行不行
        public void destroyItem(ViewGroup container, int position, Object object) {
            super.destroyItem(container, position, object);
            fragmentList_.get(position).onDestroy();
        }
    }
}

把陌生的方法都做注释了，也没啥可说的。

效果：

           

下一步就准备做一个大框架 了，将侧滑菜单导航栏和选项卡和浮动Button与RecyclerView CardView都组合在一起，然后再加上一些免费的额接口我的第一个APP要在毕业前做完。

源码：  http://download.csdn.net/detail/csdnhejingzhou/9485901