封裝一個(gè)可滑動(dòng)的底部導(dǎo)航TabLayoutView

首先我們先看下封裝的基礎(chǔ)類TabLayoutView.java類

public class TabLayoutView extends LinearLayout {

    private Context context;
    private String[] titles; //要顯示的標(biāo)題
    private int[] imgs; //圖標(biāo)
    private int[] imgsSelected; //圖標(biāo)

    private int imgwidth;
    private int imgheight;
    private int txtsize; //標(biāo)題大小
    private int txtColor; //標(biāo)題未選中顏色
    private int txtSelectedColor; //選擇顏色

    private List<TextView> textViews; //保存標(biāo)題
    private List<ImageView> imageViews; //保存圖片
    private List<TextView> tvDots;//保存圓點(diǎn)
    private List<ImageView> tvImgs;//保存小紅點(diǎn)
    private int currentIndex = 0;

    private OnItemOnclickListener onItemOnclickListener;

    public TabLayoutView(Context context) {
        this(context, null);
    }

    public TabLayoutView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TabLayoutView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
    }

    public void setOnItemOnclickListener(OnItemOnclickListener onItemOnclickListener) {
        this.onItemOnclickListener = onItemOnclickListener;
    }

    /**
     * 設(shè)置標(biāo)題、圖片和當(dāng)前選中的條目
     *
     * @param tabtxts
     * @param imgs
     * @param currentIndex
     */
    public void setDataSource(String[] tabtxts, int[] imgs, int[] imgsSelected, int currentIndex) {
        this.titles = tabtxts;
        this.imgs = imgs;
        this.currentIndex = currentIndex;
        this.imgsSelected = imgsSelected;
    }

    /**
     * 設(shè)置圖標(biāo)大小
     *
     * @param imgwidth  圖標(biāo)的寬度
     * @param imgheight 圖標(biāo)的高度
     */
    public void setImageStyle(int imgwidth, int imgheight) {
        this.imgwidth = dip2px(context, imgwidth);
        this.imgheight = dip2px(context, imgheight);
    }

    /**
     * 設(shè)置標(biāo)題顏色
     *
     * @param txtsize          文字大小
     * @param txtColor         文字未選中顏色
     * @param txtSelectedColor 文字選中時(shí)顏色
     */
    public void setTextStyle(int txtsize, int txtColor, int txtSelectedColor) {
        this.txtsize = txtsize;
        this.txtColor = txtColor;
        this.txtSelectedColor = txtSelectedColor;
    }

    /**
     * 動(dòng)態(tài)布局
     * 1、外層為橫向線下布局
     * 2、動(dòng)態(tài)添加相對(duì)布局，平分父布局，使寬度一致，添加到橫向布局中
     * 3、總線布局添加圖標(biāo)和標(biāo)題，并添加到相對(duì)布局中
     * 4、添加圓點(diǎn)到相對(duì)布局中，并設(shè)置在3的右上角
     */
    public void initDatas() {
        textViews = new ArrayList<>();
        imageViews = new ArrayList<>();
        tvDots = new ArrayList<>();
        tvImgs = new ArrayList<>();

        setOrientation(HORIZONTAL);
        LayoutParams lp = new LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
        lp.weight = 1;
        lp.gravity = Gravity.CENTER;

        LayoutParams imglp = new LayoutParams(imgwidth, imgheight);
        imglp.gravity = Gravity.CENTER;

        LayoutParams txtlp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        txtlp.gravity = Gravity.CENTER;

        RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        rlp.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);

        int size = titles.length;
        for (int i = 0; i < size; i++) {
            ImageView imageView = new ImageView(context);
            imageView.setLayoutParams(imglp);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);

            TextView textView = new TextView(context);
            textView.setText(titles[i]);
            textView.setLayoutParams(txtlp);
            textView.setTextSize(txtsize);

            LinearLayout cly = new LinearLayout(context);
            cly.setId(i + 100);
            cly.setGravity(Gravity.CENTER);
            cly.setOrientation(VERTICAL);
            cly.setLayoutParams(imglp);
            cly.addView(imageView);

            RelativeLayout prl = new RelativeLayout(context);

            RelativeLayout.LayoutParams rlDot = new RelativeLayout.LayoutParams(dip2px(context, 12), dip2px(context, 12));
            rlDot.addRule(RelativeLayout.RIGHT_OF, cly.getId());
            rlDot.addRule(RelativeLayout.ABOVE, cly.getId());
            rlDot.setMargins(-dip2px(context, 10), 0, 0, -dip2px(context, 10));

            TextView tvDot = new TextView(context);

            tvDot.setText("0");
            tvDot.setTextSize(10);
            tvDot.setGravity(Gravity.CENTER);
            tvDot.setVisibility(GONE);
            tvDot.setTextColor(context.getResources().getColor(R.color.white));
            tvDot.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.circle_dot_red_bg));

            RelativeLayout.LayoutParams rlimgDot = new RelativeLayout.LayoutParams(dip2px(context, 8), dip2px(context, 8));
            rlimgDot.addRule(RelativeLayout.RIGHT_OF, cly.getId());
            rlimgDot.addRule(RelativeLayout.ABOVE, cly.getId());
            rlimgDot.setMargins(-dip2px(context, 5), 0, 0, -dip2px(context, 5));
            ImageView imgDot = new ImageView(context);
            imgDot.setImageResource(R.drawable.circle_dot_red_bg);
            imgDot.setVisibility(GONE);


            final int index = i;
            prl.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    setSelectStyle(index);
                    if (onItemOnclickListener != null) {
                        onItemOnclickListener.onItemClick(index);
                    }
                }
            });

            cly.addView(textView);
            prl.addView(cly, rlp);
            prl.addView(tvDot, rlDot);
            prl.addView(imgDot, rlimgDot);
            addView(prl, lp);

            textViews.add(textView);
            imageViews.add(imageView);
            tvDots.add(tvDot);
            tvImgs.add(imgDot);
        }
        setSelectStyle(currentIndex);
    }

    public void setSelectStyle(int index) {
        int size = titles.length;
        for (int i = 0; i < size; i++) {
            if (i == index) {
                textViews.get(i).setTextColor(context.getResources().getColor(txtSelectedColor));
                imageViews.get(i).setSelected(true);
                imageViews.get(i).setImageResource(imgsSelected[i]);

            } else {
                textViews.get(i).setTextColor(context.getResources().getColor(txtColor));
                imageViews.get(i).setSelected(false);
                imageViews.get(i).setImageResource(imgs[i]);

            }
        }
    }

    /**
     * 設(shè)置圓點(diǎn)
     *
     * @param index 圓點(diǎn)索引
     * @param count 圓點(diǎn)個(gè)數(shù)
     */
    public void setDotsCount(int index, int count) {
        if (tvDots == null || index > tvDots.size() - 1)
            return;
        if (count > 0) {
            tvDots.get(index).setVisibility(VISIBLE);
            tvDots.get(index).setText(count + "");
            tvImgs.get(index).setVisibility(GONE);
        } else if (count == -1) {
            tvDots.get(index).setVisibility(GONE);
            tvImgs.get(index).setVisibility(VISIBLE);
        } else {
            tvDots.get(index).setVisibility(GONE);
            tvImgs.get(index).setVisibility(GONE);
        }
    }

    public interface OnItemOnclickListener {
        void onItemClick(int index);
    }

    private int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

    private int dip2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }
}

我們?cè)賮砜匆幌翧ctivity對(duì)應(yīng)的xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg">

    <cn.hejia.jiapu.utils.NoScrollViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/main_tabview"
        android:overScrollMode="never" />

    <cn.hejia.jiapu.main.TabLayoutView
        android:id="@+id/main_tabview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_above="@+id/main_tabview"
        android:background="@color/lineColor" />
</RelativeLayout>

這里由于項(xiàng)目需求，我使用的是不可滑動(dòng)的NoScrollViewPager，代碼如下：

/**
 * 不可以滑動(dòng)，但是可以setCurrentItem的ViewPager。
 */

public class NoScrollViewPager extends ViewPager {
    public NoScrollViewPager(Context context) {
        super(context);
    }

    public NoScrollViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        return false;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        return false;
    }
}

如果你希望可以滑動(dòng)切換，直接用ViewPager就可以了。
然后我們直接需要導(dǎo)航的Activity中使用

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private TabLayoutView tabLayoutView;
    private String[] titles = {"附近", "動(dòng)態(tài)", "消息", "發(fā)現(xiàn)", "我的"};
    private int[] imgs = {R.mipmap.icon_nearby, R.mipmap.icon_circle, R.mipmap.icon_message, R.mipmap.icon_find, R.mipmap.icon_me};
    private int[] imgsselect = {R.mipmap.icon_nearby_selected, R.mipmap.icon_circle_selected, R.mipmap.icon_message_selected, R.mipmap.icon_find_selected, R.mipmap.icon_me_selected};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayoutView = (TabLayoutView) findViewById(R.id.tabview);
        initFragments();
        tabLayoutView.setDataSource(titles, imgs,imgsselect,0);
        tabLayoutView.setImageStyle(25, 25);
        tabLayoutView.setTextStyle(12, R.color.color_999999,R.color.color_ff78a3);
        tabLayoutView.initDatas();
        setDots();
        tabLayoutView.setOnItemOnclickListener(new TabLayoutView.OnItemOnclickListener() {
            @Override
            public void onItemClick(int index) {
                viewPager.setCurrentItem(index, true);
            }
        });

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                viewPager.setCurrentItem(position, false);
                tabLayoutView.setSelectStyle(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }
    
    private void initFragments()
    {
        List<Fragment> fragmentPages = new ArrayList<>();
        fragmentPages.add(new FragmentPage());
        fragmentPages.add(new FragmentPage());
        fragmentPages.add(new FragmentPage());
        fragmentPages.add(new FragmentPage());
        fragmentPages.add(new FragmentPage());
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragmentPages);
        viewPager.setAdapter(viewPagerAdapter);
    }
    /**
     * 設(shè)置底部右上角數(shù)字，0不顯示（默認(rèn)），>0實(shí)現(xiàn)數(shù)字，-1顯示小紅點(diǎn)
     */
    public void setDots()
    {
        tabLayoutView.setDotsCount(0, 1);
        tabLayoutView.setDotsCount(1, 0);
        tabLayoutView.setDotsCount(2, 3);
        tabLayoutView.setDotsCount(3, 0);
        tabLayoutView.setDotsCount(4, 5);
    }

由于我們使用了ViewPager，所以我們要給其對(duì)應(yīng)的Adapter

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragments;

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

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

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

最后附上用到的小紅點(diǎn)的資源文件circle_dot_red_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android= "http://schemas.android.com/apk/res/android"
    android:shape= "oval"
    android:useLevel= "false" >
    <solid android:color= "@color/red" />
    <stroke android:color="@color/red" android:width="2dp"/>
</shape>

到此我們就大功告成了，上面寫的比較詳細(xì)，大家可以根據(jù)具體需求自取。最后附上效果圖

231.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容