仿抖音底部導航

最終效果預覽

此次實現的是第一步效果

原理解析：經過對控件添加動畫來實現仿抖音底部導航的效果

一.首先編寫佈局文件（這裏是用TextView做爲底部的指示橫線）

<?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">
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:id="@+id/nav_top"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:text="標題"
            android:id="@+id/nav_item_tv_title"
            android:textColor="#F1F1F1"
            android:textSize="16sp"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/nav_item_tv_line"
        android:layout_below="@id/nav_top"
        android:layout_marginTop="2dp"
        android:layout_alignRight="@id/nav_top"
        android:layout_alignLeft="@id/nav_top"
        android:background="#fff"
        android:alpha="0"
        android:layout_centerInParent="true"
        android:layout_height="2dp" />
</RelativeLayout>

複製代碼

二.建立NavItemView類繼承RelativeLayout（這是最終代碼展現，接下來說解各類方法的效果【除了自定義屬性】）

public class NavItemView extends RelativeLayout {
    TextView textView_title;
    TextView textView_line;
    private View mView;
    public NavItemView(Context context) {
        this(context,null);
    }
    public NavItemView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    @SuppressLint("ResourceType")
    public NavItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mView = View.inflate(context, R.layout.view_navitem, this);
        textView_line=mView.findViewById(R.id.nav_item_tv_line);
        textView_title=mView.findViewById(R.id.nav_item_tv_title);
//        獲取自定義屬性
        TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.NavItem);
        if(ta!=null){
            String navtext = ta.getString(R.styleable.NavItem_navtext);
            textView_title.setText(navtext);
        }
    }
//    選中狀態
    public void startActive(){
        textView_title.setTextColor(Color.WHITE);
        textView_title.setTextSize(18);
        textView_line.animate().alpha(1).setDuration(200).start();
    }
//    取消選中
    public void cancelActive(){
        textView_title.setTextColor(Color.parseColor("#F1F1F1"));
        textView_title.setTextSize(16);
        textView_line.animate().alpha(0).setDuration(200).start();
    }
}

複製代碼

三.startActive()方法做用：設置TextView的顏色爲白色，並經過動畫的方式顯示底部指示線，達到選中狀態。

四.cancelActive()方法做用:與startActive()方法的做用相反。

五.Activity調用

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    NavItemView navItemView1,navItemView2,navItemView3,navItemView4,navItemView_Temp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        navItemView1=findViewById(R.id.one);
        navItemView2=findViewById(R.id.two);
        navItemView3=findViewById(R.id.three);
        navItemView4=findViewById(R.id.four);
        navItemView1.setOnClickListener(this);
        navItemView2.setOnClickListener(this);
        navItemView3.setOnClickListener(this);
        navItemView4.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        if(navItemView_Temp!=null){
            navItemView_Temp.cancelActive();
        }
        switch (v.getId()){
            case R.id.one:
                navItemView1.startActive();
                navItemView_Temp=navItemView1;
                break;
            case R.id.two:
                navItemView2.startActive();
                navItemView_Temp=navItemView2;
                break;
            case R.id.three:
                navItemView3.startActive();
                navItemView_Temp=navItemView3;
                break;
            case R.id.four:
                navItemView4.startActive();
                navItemView_Temp=navItemView4;
                break;
        }
    }
}

複製代碼

六.自定義屬性文件展現

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="NavItem">
        <attr name="navtext" format="string"/>
    </declare-styleable>
</resources>

複製代碼

七.Activity佈局文件展現

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="com.example.douyin.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_height="40dp">
        <com.example.douyin.NavItemView
            android:layout_width="0dp"
            android:id="@+id/one"
            app:navtext="首頁"
            android:layout_weight="1"
            android:layout_height="wrap_content">
        </com.example.douyin.NavItemView>
        <com.example.douyin.NavItemView
            android:layout_width="0dp"
            android:id="@+id/two"
            app:navtext="關注"
            android:layout_weight="1"
            android:layout_height="wrap_content">
        </com.example.douyin.NavItemView>
        <com.example.douyin.NavItemView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/three"
            app:navtext="消息"
            android:layout_height="wrap_content">
        </com.example.douyin.NavItemView>
        <com.example.douyin.NavItemView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:id="@+id/four"
            app:navtext="我"
            android:layout_height="wrap_content">
        </com.example.douyin.NavItemView>
    </LinearLayout>

</RelativeLayout>
複製代碼