android中如何打造一个动态的底部导航栏

时间：2024-03-23 07:14:13

在开发项目中底部导航是必不可少的控件之一，虽然网上已经有很多开源的项目可以用，如果一些特定的需求，导致项目不能用的话，那就头大了，所以明白如何做一个动态导航栏，还是很有必要的。本教程主要针对一些初级的android程序员，利用随手可得的控件来完成，而不是用自定义View的方式来做，门槛比较低，布局容器采用LinearLayout，子控件采用TextView，主要的分为几步来完成的。

第一步------如何在一个布局容器里动态添加子控件

public class MainActivity extends AppCompatActivity {

LinearLayout container;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    container = findViewById(R.id.container);
    //第一步---如何动态在布局里添加子控件
    for (int i = 0; i < 5; i++) {
        TextView textView = new TextView(getApplicationContext());
        textView.setText("我");
        textView.setTextColor(Color.BLACK);
        container.addView(textView);
    }
}

}
效果就是：
android中如何打造一个动态的底部导航栏
现在第一步完成了，但是会发现一般底部导航栏都是平均分布的，那要怎么做的？

  //第一步---如何动态在布局里添加子控件
        for (int i = 0; i < 5; i++) {
            TextView textView = new TextView(getApplicationContext());
            textView.setText("我");
            //这一步就是让字体居中
            textView.setGravity(Gravity.CENTER);
            //给TextView设置布局参数--第一个参数是宽，第二个参数是高，第三个参数是相当于 android:layout_weight="1"
            LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT,1.0f);
            textView.setLayoutParams(params);
            textView.setTextColor(Color.BLACK);
            container.addView(textView);
        }

效果就是：
android中如何打造一个动态的底部导航栏

是不是越来越像了呐，

第二步-----如何给子控件添加图片

 //第一步---如何动态在布局里添加子控件
        for (int i = 0; i < 5; i++) {
            TextView textView = new TextView(getApplicationContext());
            textView.setText("我");
            //这一步就是让字体居中
            textView.setGravity(Gravity.CENTER);
            //给TextView设置布局参数--第一个参数是宽，第二个参数是高，第三个参数是相当于 android:layout_weight="1"
            LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1.0f);
            textView.setLayoutParams(params);
            textView.setTextColor(Color.BLACK);
            Drawable drawable = getResources().getDrawable(R.drawable.ic_launcher_background);
            //这句话一定要写
            drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
            // setCompoundDrawables(left ,top ,right, bottom);
            textView.setCompoundDrawables(null, drawable, null, null);
            container.addView(textView);
        }

这样就可以了，但是这个时候就进行简单的封装，建一个可以动态创建一个TextView的方法

  private TextView getTextView(String title,int drawableId){
        TextView textView = new TextView(getApplicationContext());
        textView.setText(title);
        //这一步就是让字体居中
        textView.setGravity(Gravity.CENTER);
        //给TextView设置布局参数--第一个参数是宽，第二个参数是高，第三个参数是相当于 android:layout_weight="1"
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 1.0f);
        textView.setLayoutParams(params);
        textView.setTextColor(Color.BLACK);
        Drawable drawable = getResources().getDrawable(drawableId);
        //这句话一定要写
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        // setCompoundDrawables(left ,top ,right, bottom);
        textView.setCompoundDrawables(null, drawable, null, null);
        return textView;
    }

然后再次修改密码

public class MainActivity extends AppCompatActivity {
    LinearLayout container;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        container = findViewById(R.id.container);
        //第一步---如何动态在布局里添加子控件
        container.addView(getTextView("首页", R.mipmap.ads1));
        container.addView(getTextView("消息", R.mipmap.ads1));
        container.addView(getTextView("联系人", R.mipmap.ads1));
        container.addView(getTextView("我的", R.mipmap.ads1));
    }
    private TextView getTextView(String title, int drawableId) {
        TextView textView = new TextView(getApplicationContext());
        textView.setText(title);
        //这一步就是让字体居中
        textView.setGravity(Gravity.CENTER);
        //给TextView设置布局参数--第一个参数是宽，第二个参数是高，第三个参数是相当于 android:layout_weight="1"
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
            1.0f);
        textView.setLayoutParams(params);
        textView.setTextColor(Color.BLACK);
        Drawable drawable = getResources().getDrawable(drawableId);
        //这句话一定要写
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        // setCompoundDrawables(left ,top ,right, bottom);
        textView.setCompoundDrawables(null, drawable, null, null);
        return textView;
    }
}

效果图:
android中如何打造一个动态的底部导航栏
是不是现在觉得越来越像了，对就是这样的

第三步就是怎么才能获取点击的哪一个呢？

重新写了动态获取TextView的方法

  private TextView getTextView(final String title, int drawableId) {
        TextView textView = new TextView(getApplicationContext());
        textView.setText(title);
        //这一步就是让字体居中
        textView.setGravity(Gravity.CENTER);
        //给TextView设置布局参数--第一个参数是宽，第二个参数是高，第三个参数是相当于 android:layout_weight="1"
        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,
            1.0f);
        textView.setLayoutParams(params);
        textView.setTextColor(Color.BLACK);
        Drawable drawable = getResources().getDrawable(drawableId);
        //这句话一定要写
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());
        // setCompoundDrawables(left ,top ,right, bottom);
        textView.setCompoundDrawables(null, drawable, null, null);

        textView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"点击了"+title,Toast.LENGTH_LONG).show();
            }
        });
        return textView;
    }

android中如何打造一个动态的底部导航栏

确实效果实现了，虽然这样的导航栏能用，但是就是要自己还要加一些点击的事件，还有导航栏点击之后图片的变化和字体颜色的改变等，还是很麻烦的，这只是一个开始，后边还会有一个更加高级的东西，就是自定义底部导航栏，不过原理都差不多，相信很多小伙伴，看到这些也应该能学到一些东西，原理都一样，就是如何打造一个复合自己的底部导航栏，后续会封装一个功能强大的，且操作简单的动态底部导航栏，如有更好的建议可以留言。

相关文章