美文网首页
TabLayout + Fragment 实现页面滑动

TabLayout + Fragment 实现页面滑动

作者: 树蜂 | 来源:发表于2019-01-01 12:40 被阅读0次

    目录
    1、效果
    2、代码


    1、效果

    可点击标题,也可滑动切换


    TabFragment.gif

    2、代码

    1)代码结构


    屏幕快照 2019-01-01 下午12.26.41.png

    2)添加依赖

    implementation 'com.android.support:design:28.0.0'
    

    3)布局文件
    fragment_first.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个"/>
    </android.support.constraint.ConstraintLayout>
    

    fragment_second.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个"/>
    </android.support.constraint.ConstraintLayout>
    

    activity_main.xml:

    <?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">
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabSelectedTextColor="#ff0000"
            app:tabIndicatorColor="#00ff00"
            app:tabTextColor="#000"
            app:tabBackground="@android:color/transparent"
            app:tabTextAppearance="@android:style/TextAppearance.Holo.Medium"
            app:tabIndicatorHeight="3dp"
            />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"/>
    
    </LinearLayout>
    

    4)代码清单
    HasTitleFragment.java:
    该类主要是为了显示tab的标题

    package com.shufeng.tabfragmenttest.mainfragment;
    
    import android.support.v4.app.Fragment;
    
    public abstract class HasTitleFragment extends Fragment
    {
        private String title;
        public HasTitleFragment(String pTitle)
        {
            title = pTitle;
        }
    
        String getTitle()
        {
            return title;
        }
    }
    

    FragmentFirst.java:

    package com.shufeng.tabfragmenttest.mainfragment;
    
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import com.shufeng.tabfragmenttest.R;
    
    
    public class FragmentFirst extends HasTitleFragment
    {
        public FragmentFirst()
        {
            super("标题一");
        }
    
        public static FragmentFirst newInstance()
        {
            FragmentFirst instance = new FragmentFirst();
            return instance;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.inflate(R.layout.fragment_first, container, false);
    
    
            return view;
        }
    }
    

    FragmentSecond.java

    package com.shufeng.tabfragmenttest.mainfragment;
    
    import android.os.Bundle;
    import android.support.annotation.Nullable;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import com.shufeng.tabfragmenttest.R;
    
    
    public class FragmentSecond extends HasTitleFragment
    {
        public FragmentSecond()
        {
            super("标题二");
        }
    
        public static FragmentSecond newInstance()
        {
            FragmentSecond instance = new FragmentSecond();
            return instance;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
        }
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            View view = inflater.inflate(R.layout.fragment_second, container, false);
    
    
            return view;
        }
    }
    

    MainFragmentAdapter.java

    package com.shufeng.tabfragmenttest.mainfragment;
    
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    
    import java.util.List;
    
    public class MainFragmentAdapter extends FragmentPagerAdapter
    {
        private List<HasTitleFragment> fragmentList;
    
        public MainFragmentAdapter(FragmentManager fm, List<HasTitleFragment> pFragmentList)
        {
            super(fm);
            fragmentList = pFragmentList;
        }
    
        @Override
        public int getCount()
        {
            return fragmentList.size();
        }
    
        @Override
        public Fragment getItem(int position)
        {
            return fragmentList.get(position);
        }
    
        @Override
        public CharSequence getPageTitle(int position)
        {
            return fragmentList.get(position).getTitle();
        }
    }
    

    MainActivity.class:

    package com.shufeng.tabfragmenttest;
    
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    
    import com.shufeng.tabfragmenttest.mainfragment.FragmentFirst;
    import com.shufeng.tabfragmenttest.mainfragment.FragmentSecond;
    import com.shufeng.tabfragmenttest.mainfragment.HasTitleFragment;
    import com.shufeng.tabfragmenttest.mainfragment.MainFragmentAdapter;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity
    {
    
        ViewPager mPager;
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            init();
        }
    
        private void init()
        {
            HasTitleFragment first = FragmentFirst.newInstance();
            HasTitleFragment second = FragmentSecond.newInstance();
            List<HasTitleFragment> _FragmentList = new ArrayList<>();
            _FragmentList.add(first);
            _FragmentList.add(second);
            MainFragmentAdapter _Adapter = new MainFragmentAdapter(getSupportFragmentManager(), _FragmentList);
            mPager = (ViewPager)findViewById(R.id.pager);
            mPager.setAdapter(_Adapter);
    
    
            // 关联起来
            TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout_login);
            tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
            tabLayout.setTabMode(TabLayout.MODE_FIXED);
            tabLayout.setupWithViewPager(mPager);
        }
    }
    

    结束。

    相关文章

      网友评论

          本文标题:TabLayout + Fragment 实现页面滑动

          本文链接:https://www.haomeiwen.com/subject/bjdnlqtx.html