Tablayout与Viewpager的使用

学习Tablayout与Viewpager的使用

最终效果

引入一个支持包
位置在build.gradle


activity代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context=".MainActivity"
    android:orientation="vertical">
<include layout="@layout/titlebar"/>     //标题栏
   <android.support.design.widget.TabLayout
      android:id="@+id/tabLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@android:color/holo_blue_bright"  //背景色
       app:tabIndicatorColor="@android:color/holo_red_dark"    //选中时，下标线的颜色
       app:tabSelectedTextColor="@android:color/holo_red_dark"			//选中字体的颜色
       app:tabTextColor="@android:color/white"			//未选中字体的颜色
       />
   <android.support.v4.view.ViewPager
       android:id="@+id/viewpager"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

   </android.support.v4.view.ViewPager>

</LinearLayout>

标题栏 titlebar代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/titlebar"
    android:background="@android:color/holo_blue_light"
    android:gravity="center"
    android:orientation="horizontal">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_title"
        android:text="标题"
        android:textColor="#FFFFFF"				//字体颜色
        android:textSize="20sp"/>					//字体大小
</LinearLayout>

在Main文件同级目录下创建两个文件夹fragment和adapter
fragment里面创建类MyFragment

具体代码如下

package com.example.tablayout.fragment;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

@SuppressLint("ValidFragment")
public class MyFragment extends Fragment {

    private final String title;
    private final String content;
    Context mContent;
    TextView textView;
//得到内容
    public String getContent() {
        return content;
    }
//得到标题
    public String getTitle() {
        return title;
    }

    @SuppressLint("ValidFragment")
    public MyFragment(String title, String content){
            super();
            this.title=title;
            this.content=content;
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContent=getActivity();  //得到上下文
    }

    /**
     * 创建视图
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        textView=new TextView(mContent);
        textView.setTextColor(Color.RED);   //设置文字颜色
        textView.setTextSize(25);           //设置文字大小
        textView.setGravity(Gravity.CENTER);//设置对齐方式

        return textView;

    }

    /**
     * 绑定数据
     * @param savedInstanceState
     */
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //设置内容
        textView.setText(content);
    }
}

adapter文件夹下创建类ViewPagerAdapter

ViewPagerAdapter代码如下

package com.example.tablayout.adapter;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.tablayout.fragment.MyFragment;

import java.util.ArrayList;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    private final ArrayList<MyFragment> fragments;

    public ViewPagerAdapter(FragmentManager fm, ArrayList<MyFragment> fragments) {
        super(fm);
        this.fragments=fragments;
    }

    /**
     * 根据位置返回对应的fragment
     * @param position
     * @return
     */
    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }


    //返回总数
    @Override
    public int getCount() {
        return fragments.size();
    }
//得到页面的标题
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return fragments.get(position).getTitle();
    }
}

MainActivity代码如下

package com.example.tablayout;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

import com.example.tablayout.adapter.ViewPagerAdapter;
import com.example.tablayout.fragment.MyFragment;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private TextView tv_title;
TabLayout tabLayout;
ArrayList<MyFragment> fragments;
   ViewPagerAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager=findViewById(R.id.viewpager);
        tv_title=findViewById(R.id.tv_title);
        tabLayout=findViewById(R.id.tabLayout);
        tv_title.setText("TabLayout的使用");
        //初始化数据
        fragments=new ArrayList<>();
        for(int i=0;i<12;i++){
            fragments.add(new MyFragment("标题"+i,"内容"+i));
        }
        //设置ViewPager的适配器
        adapter=new ViewPagerAdapter(getSupportFragmentManager(),fragments);
        viewPager.setAdapter(adapter);
        //关联viewpager
        tabLayout.setupWithViewPager(viewPager);
        //设置滚动方式
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

    }
}

最后再去清单文件中加个样式

把默认的标题给去掉，这样就做出一个简单的页面了。