Code Monkey home page Code Monkey logo

atab's Introduction

ATab----仿爱奇艺tabbar

仿爱奇艺选中凸起的tabbar 项目地址:https://github.com/csfwff/ATab

效果图

点这里看 或者video

食用方法

  1. 引入 现在还么的上传,自己下载引入吧,略🤪

  2. 使用 a. xml中使用

    <com.xiamo.atab.ATab
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:id="@+id/atab"
        android:layout_height="80dp">
        <com.xiamo.atab.ATabItem
            android:layout_width="0dp"
            android:layout_weight="1"
            app:msgText="哦豁"
            app:title="啦啦啦"
            app:checkIcon="@mipmap/home_un"
            app:uncheckIcon="@mipmap/home"
            android:layout_height="match_parent"/>
    </com.xiamo.atab.ATab>
    

    b. Java中使用 xml

    <com.xiamo.atab.ATab
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:id="@+id/atab"
        android:layout_height="80dp">
    </com.xiamo.atab.ATab>
    

    java aTab = (ATab)findViewById(R.id.atab);

    aTab.addItem(new ATabItem.Builder(this).title("首页").uncheckIcon(getDrawable(R.mipmap.home_un))
                .checkIcon(getDrawable(R.mipmap.home)).checkColor(R.color.colorPrimary).create());
    aTab.addItem(new ATabItem.Builder(this).title("热门").uncheckIcon(getDrawable(R.mipmap.hot_un))
                .checkIcon(getDrawable(R.mipmap.hot)).checkColor(R.color.colorPrimary).create());
    aTab.addItem(new ATabItem.Builder(this).title("会员").uncheckIcon(getDrawable(R.mipmap.vip_un))
                .checkIcon(getDrawable(R.mipmap.vip)).checkColor(R.color.colorAccent).create());
    aTab.addItem(new ATabItem.Builder(this).title("消息").uncheckIcon(getDrawable(R.mipmap.msg_un))
                .checkIcon(getDrawable(R.mipmap.msg)).checkColor(R.color.colorPrimary).msg("哦豁").create());
    aTab.addItem(new ATabItem.Builder(this).title("我的").uncheckIcon(getDrawable(R.mipmap.mine_un))
                .checkIcon(getDrawable(R.mipmap.mine)).checkColor(R.color.colorPrimary).create());
    
    
  3. 设置监听

    aTab.setOnItemSelectListener(new ATab.OnItemSelectListener() {
        @Override
        public void onItemSelect(int nowPos, int prePos) {
            Log.e("-----", nowPos+"---"+prePos);
        }
    });
    

ATabItem属性

定义了如下属性

<declare-styleable name="ATabItem">
        <!-- 基线距顶部的距离-->
        <attr name="baseLinePos" format="dimension" />
        <!--凸起的高度,需要小于baseLinePos,需要留一部分空间显示弹性效果-->
        <attr name="upHeight" format="dimension" />
        <!-- 背景颜色-->
        <attr name="bgColor" format="color" />
        <!--未选中icon-->
        <attr name="uncheckIcon" format="reference"/>
        <!--选中icon-->
        <attr name="checkIcon" format="reference"/>
        <!--icon的宽度-->
        <attr name="iconWidth" format="dimension" />
        <!--icon的高度-->
        <attr name="iconHeight" format="dimension" />
        <!--未选中颜色-->
        <attr name="uncheckColor" format="color"/>
        <!--选中颜色-->
        <attr name="checkColor" format="color"/>
        <!--选中的背景圆半径-->
        <attr name="checkRadius" format="dimension"/>
        <!--icon顶部到基线的距离-->
        <attr name="iconToBase" format="dimension"/>
        <!--文字下边距-->
        <attr name="textMarginBottom" format="dimension"/>
        <!--文字大小-->
        <attr name="textSize" format="dimension"/>
        <!--文字-->
        <attr name="title" format="string"/>
        <!--消息-->
        <attr name="msgText" format="string"/>
        <!--消息文字大小-->
        <attr name="msgSize" format="dimension"/>
        <!--消息文字颜色-->
        <attr name="msgColor" format="color"/>
        <!--消息背景颜色-->
        <attr name="msgBgColor" format="color"/>
        <!--消息距顶部距离-->
        <attr name="msgToTop" format="dimension"/>
        <!--消息距中心的x距离-->
        <attr name="msgToCenter" format="dimension"/>
        <!--消息内边距-->
        <attr name="msgPadding" format="dimension"/>
        <!--消息背景圆角半径-->
        <attr name="msgRadius" format="dimension"/>
</declare-styleable>

部分含糊的属性看如下说明 img

ATab方法说明

  1. 设置选中,举例: aTab.setSelect(2);
  2. 设置消息 aTab.setMsg(3,"消息内容"); 注:消息内容为null即表示不显示消息

atab's People

Contributors

csfwff avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.