1. 程式人生 > >使用Tablayout 實現Tab切換效果

使用Tablayout 實現Tab切換效果

實現的效果是這種

第一步 引入 (每個人的版本可能不一樣)

implementation 'com.android.support:design:28.0.0'
TabViewActivity.java
package com.example.viewpagertab;

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

import java.util.ArrayList;

public class TabViewActivity extends AppCompatActivity {

    private String[] mTitles = new String[]{"語文", "英語", "數學", "物理", "生物", "化學", "地理", "政治", "歷史"};
    //把viewpager放入到集合中
    private ArrayList<ViewPagerFragment> mViewPagerFragments = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tabview);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        for (int i = 0; i < mTitles.length; i++) {
            mViewPagerFragments.add(ViewPagerFragment.newInstance(mTitles[i]));
        }
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.setTitles(mTitles);
        viewPagerAdapter.setFragments(mViewPagerFragments);
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }


}
ViewPagerAdapter.java
package com.example.viewpagertab;

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

import java.util.ArrayList;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

    private String[] titles;
    private ArrayList<ViewPagerFragment> viewPagerFragments;
    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    public void setTitles(String[] titles) {
        this.titles = titles;
    }
    public void setFragments(ArrayList<ViewPagerFragment> viewPagerFragments) {
        this.viewPagerFragments = viewPagerFragments;
    }

    @Override
    public Fragment getItem(int position) {
        return viewPagerFragments.get(position);
    }

    @Override
    public int getCount() {
        return viewPagerFragments.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

}
ViewPagerFragment.java
package com.example.viewpagertab;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
public class ViewPagerFragment extends Fragment {

    private static final String KEY = "extra";
    private String mMessage;
    public ViewPagerFragment() { }
    public static ViewPagerFragment newInstance(String extra) {
        Bundle args = new Bundle();
        args.putString(KEY, extra);
        ViewPagerFragment fragment = new ViewPagerFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Bundle bundle = getArguments();
        if (bundle != null) {
            mMessage = bundle.getString(KEY);
        }
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view=null;
        if(mMessage=="語文"){
            Toast.makeText(getActivity(),"顯示文字="+mMessage,Toast.LENGTH_LONG).show();
            view = inflater.inflate(R.layout.fragment_view_yw_item, container, false);

        }else{
            view = inflater.inflate(R.layout.fragment_view_pager_item, container, false);
            TextView textView = (TextView) view.findViewById(R.id.fragment_text);
            textView.setText(mMessage);
        }
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Log.i("520it","message="+mMessage);
    }
}

下面是佈局檔案

activity_tabview.xml

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tool="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        tool:context=".TabViewActivity"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/tabLayoutBackground"
            app:tabMode="scrollable"
            app:tabTextColor="@color/color_white"
            app:tabSelectedTextColor="@color/tabSelectedText"
            app:tabIndicatorHeight="1dp"
            app:tabIndicatorColor="@color/tabSelectedText"/>

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

fragment_view_pager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/fragment_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>

</LinearLayout>

fragment_view_yw_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/lv11"
        android:text="顯示語文的佈局"
        />

    <TextView
        android:id="@+id/fragment_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>

</LinearLayout>