仿抖音底部导航

最终效果预览

这次实现的是第一步效果

原理解析：通过对控件添加动画来实现仿抖音底部导航的效果

一.首先编写布局文件（这里是用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>