Android Studio开发之TabLayout和ViewPager一起使用完成标签页功能

第一步：在activity_main里面添加android.support.design.widget.TabLayout 和 android.support.v4.view.ViewPager，直接附上源码如下：

第二步：因为使用support库中的相关东西，需要配置相应的库。我配置的是

com.android.support:design:26.1.0（备注：因为我使用的sdk版本就是26的，所以... ）,下面附上我的app目录下的build.gradle内容：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.terawins.www.t613_ui_tool"
        minSdkVersion 15
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    implementation 'com.android.support:design:26.1.0'
}

第三步：在src/main/res/layout目录下，新建几个你需要的标签页。这里我给出，我自己需要使用2个标签页，仅供参考。

fragment_device_connect.xml，源码如下：

fragment_keystone_correct.xml，源码如下：

第四步：针对上面2个layout分别新建一个class来处理各自的响应事件等。这里为了简单，只是实现了显示功能，其他点击响应事件的都省略了。

DeviceConnect.java 用来管理   fragment_device_connect.xml，源码如下：

package com.terawins.www.t613_ui_tool;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class DeviceConnect extends Fragment{
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_device_connect, container, false);
        //do other things...
        return view;
    }
}

KeyStoneCorrect.java用来管理 fragment_keystone_correct.xml，源码如下：

package com.terawins.www.t613_ui_tool;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class KeyStoneCorrect extends Fragment{
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_keystone_correct, container, false);
        //do others
        return view;
    }
}

第五步：新建一个适配器class来关联，直接附上源码了：

package com.terawins.www.t613_ui_tool;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.ArrayList;

public class SubFragmentsAdapter extends FragmentStatePagerAdapter{  //adapter all the sub Fragments which need to be shown
    private ArrayList m_subFragments;
    private String []m_subTitles;

    public SubFragmentsAdapter(FragmentManager fm)
    {
        super(fm);
    }

    @Override
    public android.support.v4.app.Fragment getItem(int position) {
        return m_subFragments.get(position);
    }

    @Override
    public int getCount() {
        return m_subFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int pos)
    {
        return m_subTitles[pos];
    }

    //set subFragments
    public void SetSubFragments(ArrayList subFragments, String []subTitles)
    {
        this.m_subFragments = subFragments;
        this.m_subTitles = subTitles;
    }
}

 

第六步：在MainActivity里面将标签页功能做好，仅供参考。直接附上源码了：

package com.terawins.www.t613_ui_tool;

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

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private ArrayList m_subFragments = new ArrayList();
    private String []m_subTitles = {"DeviceConnect", "KeyStoneCorrect"};
    private TabLayout m_tab_layout_container = null;
    private ViewPager m_vp = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        m_tab_layout_container = findViewById(R.id.tab_layout_container);
        m_tab_layout_container.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //Toast.makeText(MainActivity.this, tab.getText().toString(), Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        m_vp = findViewById(R.id.vp);

        m_subFragments.add(new DeviceConnect());
        m_subFragments.add(new KeyStoneCorrect());

        SubFragmentsAdapter sfa = new SubFragmentsAdapter(getSupportFragmentManager());
        sfa.SetSubFragments(m_subFragments, m_subTitles);
        m_vp.setAdapter(sfa);
        m_tab_layout_container.setupWithViewPager(m_vp);

    }
}

 

---- The End.