android magicindicator 万能的指示栏框架学习_Android

1.打造一个项目上要求实现的带圆角的，有图片的底部跳转tab:结合这2个框架里面的对象使用：CommonNavigator+ CommonPagerTitleView

二话不说先上效果图。

xml布局：1.simple_pager_title_layout.xml

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

    <ImageView
        android:id="@+id/title_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="center"
        android:src="@drawable/tab_icon_square_nor"
        />
 

</LinearLayout>

2.布局2： activity_load_custom_layout_example.xml，为了增加外层圆角的效果，我加一个cardview:

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="45dp"
    android:layout_marginRight="45dp"
    android:layout_marginBottom="30dp"
    app:cardCornerRadius="30dp"
    android:layout_alignParentBottom="true">里面再加入MagicIndicator这个。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/color_1DC8CC"
    tools:context=".LoadCustomLayoutExampleActivity">
    <FrameLayout
        android:id="@+id/fr_change"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="48dp" />

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="45dp"
        android:layout_marginRight="45dp"
        android:layout_marginBottom="30dp"
        app:cardCornerRadius="30dp"
        android:layout_alignParentBottom="true">

        <net.lucode.hackware.magicindicator.MagicIndicator
            android:id="@+id/magic_indicator"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/color_BEE7FA">

        </net.lucode.hackware.magicindicator.MagicIndicator>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

3.逻辑代码： LoadCustomLayoutExampleActivity.class

实现点击的时候有高亮的圆角，请看getIndicator（）这个实现的方法

package com.lodon.test;

import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;

import com.flyco.tablayout.utils.FragmentChangeManager;
import com.lodon.test.ui.DevicesFragment;
import com.lodon.test.ui.HeartRateFragment;
import com.lodon.test.ui.MainPlazaFragment;
import com.lodon.test.utils.DeviceUtils;

import net.lucode.hackware.magicindicator.FragmentContainerHelper;
import net.lucode.hackware.magicindicator.MagicIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.CommonNavigator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.CommonNavigatorAdapter;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.abs.IPagerTitleView;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.indicators.LinePagerIndicator;
import net.lucode.hackware.magicindicator.buildins.commonnavigator.titles.CommonPagerTitleView;

import java.util.ArrayList;

import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

public class LoadCustomLayoutExampleActivity extends AppCompatActivity {
    public static final String TAG = "LoadCustomLayoutExampleActivity";
    //    private static final String[] CHANNELS = new String[]{"NOUGAT", "DONUT", "ECLAIR", "KITKAT"};
    private FragmentContainerHelper mFragmentContainerHelper = new FragmentContainerHelper();
    //    private ViewPager mViewPager;
    MagicIndicator magicIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_load_custom_layout_example );
        initTabView();
        initMagicIndicator1();
//        全屏代码
        /*View decorView = getWindow().getDecorView();
        int option = View.SYSTEM_UI_FLAG_FULLSCREEN;
        decorView.setSystemUiVisibility(option);*/
        //透明栏
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor( Color.TRANSPARENT);
        }

    }

    private FragmentChangeManager mFragmentChangeManager;
    private ArrayList<Fragment> mFragments = new ArrayList<>();

    private void initTabView() {
        mFragments.clear();
        mFragments.add( HeartRateFragment.newInstance( "Heart Rate" ) );//发现
        mFragments.add( DevicesFragment.newInstance( "Device" ) );//我的
        mFragments.add( MainPlazaFragment.newInstance( "Temp" ) );//聊天室
        mFragmentChangeManager = new FragmentChangeManager( getSupportFragmentManager(),
                R.id.fr_change, mFragments );
    }

    public void setMainTabIndex(int index) {
        if (mFragmentChangeManager != null) {
            mFragmentChangeManager.setFragments( index );
        }
    }

    private void initMagicIndicator1() {
        int[] imgList = {R.mipmap.my_privilege_2, R.mipmap.my_privilege_3, R.mipmap.my_privilege_4};
        int[] imgClickList = {R.mipmap.my_privilege_2_slect, R.mipmap.my_privilege_3_slect, R.mipmap.my_privilege_4_slect};
        magicIndicator = findViewById( R.id.magic_indicator );
        CommonNavigator commonNavigator = new CommonNavigator( this );
        commonNavigator.setAdjustMode( true );
        commonNavigator.setAdapter( new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override//获取标题栏视图
            public IPagerTitleView getTitleView(Context context, final int index) {
                CommonPagerTitleView commonPagerTitleView = new CommonPagerTitleView( context );

                // load custom layout 图片与标题做为显示栏填到indicator里面去
                View customLayout = LayoutInflater.from( context ).inflate( R.layout.simple_pager_title_layout, null );
                final ImageView titleImg = (ImageView) customLayout.findViewById( R.id.title_img );
//                titleImg.setImageResource(R.drawable.tab_icon_square_nor);
                titleImg.setImageResource( imgList[index] );
                commonPagerTitleView.setContentView( customLayout );
                commonPagerTitleView.setOnClickListener( new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
//                        Log.e("LoadCustom","index ="+index);
                        mFragmentContainerHelper.handlePageSelected( index );
                        setMainTabIndex( index );
//                        titleImg.setImageResource( imgClickList[index] );
                    }
                } );

                commonPagerTitleView.setOnPagerTitleChangeListener( new CommonPagerTitleView.OnPagerTitleChangeListener() {
                    @Override
                    public void onSelected(int index, int totalCount) {

                        Log.e( "onselect", String.valueOf( index ) );
                        titleImg.setImageResource( imgClickList[index] );
                    }

                    @Override
                    public void onDeselected(int index, int totalCount) {
                        titleImg.setImageResource( imgList[index] );
                    }

                    @Override
                    public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
                    }

                    @Override
                    public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {

                    }
                } );


                return commonPagerTitleView;
            }

            @Override//圆角控制代码
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator indicator = new LinePagerIndicator( context );
                float navigatorHeight = DeviceUtils.dpToPixel( LoadCustomLayoutExampleActivity.this, 50 );
                indicator.setLineHeight( navigatorHeight );
//                float borderWidth = UIUtil.dip2px(context, 1);
//                float lineHeight = navigatorHeight - 2 * borderWidth;
//                indicator.setLineHeight(lineHeight);
//                indicator.setRoundRadius(lineHeight / 2);
                indicator.setRoundRadius( navigatorHeight / 2 );
//                indicator.setYOffset(borderWidth);
                indicator.setColors( getResources().getColor( R.color.white ) );
//                indicator.setBackgroundResource( R.drawable.tab_icon_square_nor );
                return indicator;
            }
        } );
        magicIndicator.setNavigator( commonNavigator );
//        ViewPagerHelper.bind(magicIndicator, mViewPager);
        mFragmentContainerHelper.attachMagicIndicator( magicIndicator );
    }
}

为了增加全屏透明的状态栏加了：

if (Build.VERSION.SDK_INT >= 21) {
    View decorView = getWindow().getDecorView();
    int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
    decorView.setSystemUiVisibility(option);
    getWindow().setStatusBarColor( Color.TRANSPARENT);
}

本文地址：https://blog.csdn.net/LlanyW/article/details/108187282