1. 程式人生 > >android中如何打造一個動態的底部導航欄

android中如何打造一個動態的底部導航欄

在開發專案中底部導航是必不可少的控制元件之一,雖然網上已經有很多開源的專案可以用,如果一些特定的需求,導致專案不能用的話,那就頭大了,所以明白如何做一個動態導航欄,還是很有必要的。本教程主要針對一些初級的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);
    }
}

}
效果就是:
在這裡插入圖片描述
現在第一步完成了,但是會發現一般底部導航欄都是平均分佈的,那要怎麼做的?

  //第一步---如何動態在佈局裡新增子控制元件
        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);
        }

效果就是:
在這裡插入圖片描述

是不是越來越像了吶,

第二步-----如何給子控制元件新增圖片

 //第一步---如何動態在佈局裡新增子控制元件
        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;
    }
}

效果圖:
在這裡插入圖片描述
是不是現在覺得越來越像了,對就是這樣的

第三步就是怎麼才能獲取點選的哪一個呢?

重新寫了動態獲取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;
    }

在這裡插入圖片描述

確實效果實現了,雖然這樣的導航欄能用,但是就是要自己還要加一些點選的事件,還有導航欄點選之後圖片的變化和字型顏色的改變等,還是很麻煩的,這只是一個開始,後邊還會有一個更加高階的東西,就是自定義底部導航欄,不過原理都差不多,相信很多小夥伴,看到這些也應該能學到一些東西,原理都一樣,就是如何打造一個複合自己的底部導航欄,後續會封裝一個功能強大的,且操作簡單的動態底部導航欄,如有更好的建議可以留言。