TabLayout和androidx下的ViewPager的联动导航，白底黑字状态栏

盛世美颜
175 阅读1分钟

文章目录

xml文件

<androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        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_marginTop="4dp"
        android:layout_height="50dp"
        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>

viewpager的adapter

package com.bliss.print.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 fragment;
    }

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

}

activity中联动实现

package com.bliss.print.acvitity;

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

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.bliss.print.R;
import com.bliss.print.adapter.MyViewPagerAdapter;
import com.bliss.print.fragments.HomeFragment;
import com.bliss.print.fragments.MeFragment;
import com.bliss.print.fragments.MessageFragment;
import com.bliss.print.fragments.ResumeFragment;
import com.bliss.print.utils.DataGenerator;
import com.google.android.material.tabs.TabLayout;

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

import butterknife.BindView;
import butterknife.ButterKnife;

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.view_pager)
    ViewPager view_pager;

    @BindView(R.id.ll_container)
    LinearLayout ll_container;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        //白底黑字导航 appstyle颜色改为白色
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        }

        mFragmensts.add(new HomeFragment());
        mFragmensts.add(new MessageFragment());
        mFragmensts.add(new ResumeFragment());
        mFragmensts.add(new MeFragment());
        adapter = new MyViewPagerAdapter(getSupportFragmentManager(),mFragmensts);
        view_pager.setAdapter(adapter);
        view_pager.setOffscreenPageLimit(3);
        view_pager.setCurrentItem(0,false);
        for(int i=0;i<4;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.colorBlue));
            }

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

            }

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

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

    private void recoverItem() {
        for (int i = 0; i < 4; 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);
        }
    }

    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.colorBlue));
    }

    @Override
    public void onBackPressed() {
    }
}

Fragment样例

package com.bliss.print.fragments;


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.bliss.print.R;

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

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

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

    @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
        return inflater.inflate(R.layout.fragment_resume, container, false);
    }

}

获取Tab的item布局的工具

package com.bliss.print.utils;

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.bliss.print.R;
import com.bliss.print.fragments.HomeFragment;
import com.bliss.print.fragments.MeFragment;
import com.bliss.print.fragments.MessageFragment;
import com.bliss.print.fragments.ResumeFragment;

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

public class DataGenerator {

    public static final int []mTabRes = new int[]{R.drawable.home_default,R.drawable.message_default,R.drawable.resume_default,R.drawable.me_default};
    public static final int []mTabResPressed = new int[]{R.drawable.home_select,R.drawable.message_select,R.drawable.resume_select,R.drawable.me_select};
    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(MessageFragment.newInstance(from));
        fragments.add(ResumeFragment.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;
    }
}

源码地址

avatar
文章
阅读
粉丝