TabLayout+ViewPager+Fragment完成滑动界面

quasiceo 2016-12-31

展开全文

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

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

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

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

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

1、创建tab_1.xml

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas./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）

[java] view plain copy

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'的原因了。

[java] view plain copy

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();
}
}
}