基于AndroidX扩展包下的ViewPager和TabLayout的联动导航栏

效果图如下，本例使用的是Androidx下的viewpager和com.google.android.material.tabs.TabLayout进行的关联实现
声明：本例全部基于AndroidX扩展包开发

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.tabs.TabLayout;

在这里插入图片描述

方案：

根布局acvitity_main

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </androidx.viewpager.widget.ViewPager>

   <View
       android:layout_width="match_parent"
       android:layout_height="0.5dp"
       android:alpha="0.6"
       android:background="@android:color/darker_gray"></View>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        app:tabIndicatorHeight="0dp"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorGravity="center"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabRippleColor="@android:color/transparent"
        app:tabSelectedTextColor="@android:color/black"
        app:tabTextColor="@android:color/darker_gray">

    </com.google.android.material.tabs.TabLayout>

</LinearLayout>

HomeFragment （举例一个，本例共有三个fragment）

package com.kz.xk.fragment;


import android.os.Bundle;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.kz.xk.R;

/**
 * A simple {@link Fragment} subclass.
 */
public class HomeFragment extends Fragment {
   private String mFrom;

    public HomeFragment() {
        // Required empty public constructor
    }

    public static Fragment newInstance(String from){
        HomeFragment homeFragment = new HomeFragment();
        Bundle bundle = new Bundle();
        bundle.putString("from",from);
        homeFragment.setArguments(bundle);
        return homeFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null){
            mFrom = (String) getArguments().get("from");
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_home, container, false);

        return view;
    }

}

工具DataGenerator

package com.kz.xk.view;


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;


import androidx.fragment.app.Fragment;

import com.kz.xk.R;
import com.kz.xk.fragment.HomeFragment;
import com.kz.xk.fragment.MeFragment;
import com.kz.xk.fragment.StudyFragment;

import java.util.ArrayList;
import java.util.List;

public class DataGenerator {
    public static final int []mTabRes = new int[]{R.drawable.lesson_default,R.drawable.study_default,R.drawable.personal_default};
    public static final int []mTabResPressed = new int[]{R.drawable.lesson_selected,R.drawable.study_selected,R.drawable.personal_selected};
    public static final String []mTabTitle = new String[]{"选课","学习","我的"};

    public static List<Fragment> getFragments(String from){
        List<Fragment> fragments = new ArrayList<>();
        fragments.add(HomeFragment.newInstance(from));
        fragments.add(StudyFragment.newInstance(from));
        fragments.add(MeFragment.newInstance(from));
        return fragments;
    }

    /**
     * 获取Tab 显示的内容
     * @param context
     * @param position
     * @return
     */
    public static View getTabView(Context context, int position){
        View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null);
        ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
        tabIcon.setImageResource(DataGenerator.mTabRes[position]);
        TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
        tabText.setText(mTabTitle[position]);
        return view;
    }
}

FragmentPagerAdapter

package com.kz.xk.adapter;

import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyViewPagerAdapter extends FragmentPagerAdapter {
   private  List<Fragment> fragments;

    public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        fragment = fragments.get(position);
        Bundle bundle = new Bundle();
        bundle.putString("id",""+position);
        if (fragment != null) {
            fragment.setArguments(bundle);
        }
//        return fragments.get(position);
        return fragment;
    }

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

}

自定义底部导航的item布局home_tab_content

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView
        android:id="@+id/tab_content_image"
        android:layout_width="wrap_content"
        android:layout_height="25dp"
        android:scaleType="centerInside"
        />
    <TextView
        android:id="@+id/tab_content_text"
        android:layout_width="wrap_content"
        android:layout_height="25dp"
        android:textSize="14sp"
        android:textColor="@android:color/darker_gray"
        />
</LinearLayout>

实现 MainAcvitity

package com.kz.xk;


import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.tabs.TabLayout;
import com.kz.xk.adapter.MyViewPagerAdapter;
import com.kz.xk.fragment.HomeFragment;
import com.kz.xk.fragment.MeFragment;
import com.kz.xk.fragment.StudyFragment;
import com.kz.xk.view.DataGenerator;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

public class MainActivity extends AppCompatActivity {
    private List<Fragment> mFragmensts = new ArrayList<>();
    private MyViewPagerAdapter adapter;
    private static final String TAG = "MainActivity";

    @BindView(R.id.tab_layout)
    TabLayout mTabLayout;

    @BindView(R.id.vp_container)
    ViewPager view_pager;

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

    }

    private void initView() {
        mTabLayout = findViewById(R.id.tab_layout);
        view_pager = findViewById(R.id.vp_container);
//        mFragmensts = DataGenerator.getFragments("TabLayout Tab");
        mFragmensts.add(new HomeFragment());
        mFragmensts.add(new StudyFragment());
        mFragmensts.add(new MeFragment());
        adapter = new MyViewPagerAdapter(getSupportFragmentManager(),mFragmensts);
        view_pager.setAdapter(adapter);
        view_pager.setOffscreenPageLimit(2);
        view_pager.setCurrentItem(0,false);
        for(int i=0;i<3;i++){
            mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
        }
        chooseFirst();
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.e(TAG, "onTabSelected: " + tab.getPosition());
                view_pager.setCurrentItem(tab.getPosition(),true);
                recoverItem();
                View view =tab.getCustomView();
                ImageView imageView = view.findViewById(R.id.tab_content_image);
                TextView textView = view.findViewById(R.id.tab_content_text);
                imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabResPressed[tab.getPosition()]));
                textView.setTextColor(getResources().getColor(R.color.colorAccent));
            }

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

            }

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

            }
        });
        view_pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
    }

    /**
     * 初始化
     */
    private void chooseFirst(){
        TabLayout.Tab tabAt =  mTabLayout.getTabAt(0);
        View view =tabAt.getCustomView();
        ImageView imageView = view.findViewById(R.id.tab_content_image);
        TextView textView = view.findViewById(R.id.tab_content_text);
        imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabResPressed[0]));
        textView.setTextColor(getResources().getColor(R.color.colorAccent));
    }

    /**
     * 恢复默认
     */
    private void recoverItem() {
        for (int i = 0; i < 3; i++) {
            TabLayout.Tab tabAt =  mTabLayout.getTabAt(i);
            View view =tabAt.getCustomView();
            ImageView imageView = view.findViewById(R.id.tab_content_image);
            TextView textView = view.findViewById(R.id.tab_content_text);
            imageView.setImageDrawable(getResources().getDrawable(DataGenerator.mTabRes[i]));
            textView.setTextColor(Color.GRAY);
        }
    }
    
}

杨天福

发布了316 篇原创文章 · 获赞 63 · 访问量 37万+

他的留言板关注

基于AndroidX扩展包下的ViewPager和TabLayout的联动导航栏

方案：

根布局acvitity_main

HomeFragment （举例一个，本例共有三个fragment）

工具DataGenerator

FragmentPagerAdapter

自定义底部导航的item布局home_tab_content

实现 MainAcvitity

猜你喜欢