devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

android中实现底部导航栏

作者：很楠不爱3 | 2024-02-22 15:28:47

赞

踩

android中实现底部导航栏

1、引言

        底部导航栏在app应用中是十分常见了，大部分的安卓应用中也都实现了底部导航栏的功能，这里我就以我以前做的一个简单小说阅读软件为例，为大家演示一下底部导航栏的使用，需要的朋友直接复制代码过去改写就行了。

2、代码实现

2.1、主界面布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     xmlns:tools="http://schemas.android.com/tools"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">
  9.     <FrameLayout
  10.         android:id="@+id/fl_content"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:layout_weight="1" />
  14.     <RadioGroup
  15.         android:id="@+id/rg_main"
  16.         android:layout_width="match_parent"
  17.         android:layout_height="wrap_content"
  18.         android:background="#f5f5f5"
  19.         android:gravity="center_vertical"
  20.         android:orientation="horizontal"
  21.         android:padding="3dp">
  22.         <!--书架-->
  23.         <com.kotlin.custom.DrawableRadioButton
  24.             android:id="@+id/rb_main_book"
  25.             style="@style/bottom_tag_style"
  26.             android:text="书架"
  27.             app:drawableSize="30dp"
  28.             android:clickable="true"
  29.             app:drawableTop="@drawable/book_drawable_selector" />
  30.         <!--书城-->
  31.         <com.kotlin.custom.DrawableRadioButton
  32.             android:id="@+id/rb_main_store"
  33.             style="@style/bottom_tag_style"
  34.             android:text="书城"
  35.             android:clickable="true"
  36.             app:drawableSize="30dp"
  37.             app:drawableTop="@drawable/store_drawable_selector" />
  38.         <!--我的-->
  39.         <com.kotlin.custom.DrawableRadioButton
  40.             android:id="@+id/rb_main_user"
  41.             style="@style/bottom_tag_style"
  42.             android:text="我的"
  43.             android:clickable="true"
  44.             app:drawableSize="30dp"
  45.             app:drawableTop="@drawable/user_drawable_selector" />
  46.     </RadioGroup>
  47. </LinearLayout>

2.2、主界面代码

        这里包含了一些进行操作实际功能的代码，大家复制时直接忽略就行。

  1. package com.kotlin.novel;
  2.  
  3. import androidx.annotation.NonNull;
  4. import androidx.fragment.app.Fragment;
  5. import androidx.fragment.app.FragmentActivity;
  6. import androidx.fragment.app.FragmentTransaction;
  7.  
  8. import android.content.Intent;
  9. import android.content.pm.ActivityInfo;
  10. import android.graphics.Color;
  11. import android.os.Bundle;
  12. import android.os.Handler;
  13. import android.os.Message;
  14. import android.view.Gravity;
  15. import android.view.KeyEvent;
  16. import android.view.View;
  17. import android.widget.RadioGroup;
  18. import android.widget.Toast;
  19.  
  20. import com.google.gson.Gson;
  21. import com.kotlin.base.BaseFragment;
  22. import com.kotlin.data.UpdateVersion;
  23. import com.kotlin.dialog.UpdateDialogActivity;
  24. import com.kotlin.fragment.BookShelfFragment;
  25. import com.kotlin.fragment.BookStoreFragment;
  26. import com.kotlin.fragment.UserFragment;
  27. import com.kotlin.utils.ServerUtils;
  28. import com.kotlin.utils.SetUiSize;
  29.  
  30. import java.io.ByteArrayOutputStream;
  31. import java.io.InputStream;
  32. import java.net.HttpURLConnection;
  33. import java.net.URL;
  34. import java.util.ArrayList;
  35. import java.util.List;
  36.  
  37. /**
  38.  * 主界面导航切换，如果需要添加界面来这里修改
  39.  */
  40. public class MainActivity extends FragmentActivity {
  41.     @Override
  42.     protected void onResume() {//强制竖屏
  43.         if (getRequestedOrientation()!=ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){
  44.             setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
  45.         }
  46.         super.onResume();
  47.     }
  48.     public static MainActivity activity;
  49.     public RadioGroup rg_main;
  50.     private List<BaseFragment> baseFragment;
  51.     private int position;//选中的Fragment的对应的位置
  52.     private Fragment fragment;//上次切换的Fragment
  53.     @Override
  54.     protected void onCreate(Bundle savedInstanceState) {
  55.         super.onCreate(savedInstanceState);
  56.         setContentView(R.layout.activity_main);
  57.         View decorView=getWindow().getDecorView();//获取当前界面的DecorView
  58.         int option=View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
  59.                 View.SYSTEM_UI_FLAG_LAYOUT_STABLE |//全屏隐藏状态栏
  60.                 View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR;//更改文字颜色为深黑色
  61.         decorView.setSystemUiVisibility(option);//设置系统UI元素的可见性
  62.         getWindow().setNavigationBarColor(Color.TRANSPARENT);
  63.         getWindow().setStatusBarColor(Color.TRANSPARENT);//将状态栏设置为透明色
  64.         rg_main = findViewById(R.id.rg_main);
  65.         initFragment();
  66.         setListener();
  67.         activity=this;
  68.         updateVersion();
  69.     }
  70.     private void setListener() {
  71.         rg_main.setOnCheckedChangeListener(new CheckedChangeListener());
  72.         //设置默认选中书架
  73.         rg_main.check(R.id.rb_main_book);
  74.     }
  75.     class CheckedChangeListener implements RadioGroup.OnCheckedChangeListener {
  76.         @Override
  77.         public void onCheckedChanged(RadioGroup group, int checkedId) {
  78.             switch (checkedId){
  79.                 case R.id.rb_main_book://书架
  80.                     position = 0;
  81.                     break;
  82.                 case R.id.rb_main_store://书城
  83.                     position = 1;
  84.                     break;
  85.                 case R.id.rb_main_user://我的
  86.                     position = 2;
  87.                     break;
  88.             }
  89.             //根据位置得到对应的Fragment
  90.             BaseFragment to = getFragment();
  91.             //替换
  92.             switchFrament(fragment,to);
  93.         }
  94.     }
  95.     /**
  96.      * @param from 刚显示的Fragment,马上就要被隐藏
  97.      * @param to 马上要切换到的Fragment，马上就要被显示
  98.      */
  99.     private void switchFrament(Fragment from,Fragment to) {
  100.         if(from != to){
  101.             fragment = to;
  102.             FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
  103.             //判断有没有被添加,才切换
  104.             if(!to.isAdded()){
  105.                 //to没有被添加
  106.                 //from隐藏
  107.                 if(from != null){
  108.                     ft.hide(from);
  109.                 }
  110.                 //添加to
  111.                 if(to != null){
  112.                     ft.add(R.id.fl_content,to).commit();
  113.                 }
  114.             }else{
  115.                 //to已经被添加
  116.                 // from隐藏
  117.                 if(from != null){
  118.                     ft.hide(from);
  119.                 }
  120.                 //显示to
  121.                 if(to != null){
  122.                     ft.show(to).commit();
  123.                 }
  124.             }
  125.         }
  126.     }
  127.     /**
  128.      * 根据位置得到对应的Fragment
  129.      * @return
  130.      */
  131.     private BaseFragment getFragment() {
  132.         BaseFragment fragment = baseFragment.get(position);
  133.         return fragment;
  134.     }
  135.     private void initFragment() {
  136.         baseFragment = new ArrayList<>();
  137.         baseFragment.add(new BookShelfFragment());//书架Fragment
  138.         baseFragment.add(new BookStoreFragment());//书城Fragment
  139.         baseFragment.add(new UserFragment());//我的Fragment
  140.     }
  141.     public boolean exit;//标识是否可以退出
  142.     @Override
  143.     public boolean onKeyUp(int keyCode, KeyEvent event) {
  144.         if(event.getKeyCode()==KeyEvent.KEYCODE_BACK) {
  145.             if(exit) {
  146.                 BookShelfFragment.fragment.handler.sendEmptyMessage(1);//刷新书架，取消选择
  147.                 return true;//不退出
  148.             }
  149.         }
  150.         return super.onKeyUp(keyCode, event);
  151.     }
  152.     private String result;
  153.     /**
  154.      * 获取更新数据
  155.      */
  156.     private void updateVersion(){
  157.         new Thread(){
  158.             @Override
  159.             public void run() {
  160.                 URL url;
  161.                 try {
  162.                     url=new URL(ServerUtils.updatePath);
  163.                     HttpURLConnection connection = (HttpURLConnection) url.openConnection();
  164.                     connection.setReadTimeout(5000);
  165.                     connection.setConnectTimeout(5000);
  166.                     int code = connection.getResponseCode();
  167.                     if (code==200){
  168.                         InputStream is = connection.getInputStream();
  169.                         ByteArrayOutputStream bs=new ByteArrayOutputStream();
  170.                         int len=-1;
  171.                         byte[] buffer=new byte[1024];
  172.                         while ((len=is.read(buffer))!=-1){
  173.                             bs.write(buffer,0,len);
  174.                         }
  175.                         result = bs.toString();
  176.                         bs.close();
  177.                         is.close();
  178.                         connection.disconnect();
  179.                     }
  180.                 } catch (Exception e) {
  181.                 }
  182.                 if (result!=null&&!result.equals("")){
  183.                     handler.sendEmptyMessage(0);
  184.                 }
  185.             }
  186.         }.start();
  187.     }
  188.     /**
  189.      * 提示
  190.      * @param message
  191.      */
  192.     private void tip(String message){
  193.         runOnUiThread(() -> {
  194.             //更改默认Toast显示方式，需要什么直接调用方法就行
  195.             Toast toast=Toast.makeText(MainActivity.this,
  196.                     message,Toast.LENGTH_SHORT);
  197.             int size= (int) (280/ SetUiSize.displayHeightDp*SetUiSize.displayHeight);
  198.             toast.setGravity(Gravity.TOP,
  199.                     0,size);
  200.             toast.show();
  201.         });
  202.     }
  203.     private Handler handler=new Handler(){
  204.         @Override
  205.         public void handleMessage(@NonNull Message msg) {
  206.             super.handleMessage(msg);
  207.             switch (msg.what){
  208.                 case 0:
  209.                 {
  210.                     UpdateVersion version = new Gson().fromJson(result, UpdateVersion.class);
  211.                     if (version.getApk_version()>ServerUtils.versionCode){
  212.                         Intent intent=new Intent(MainActivity.this, UpdateDialogActivity.class);
  213.                         intent.putExtra("result",result);
  214.                         startActivity(intent);
  215.                     }
  216.                 }
  217.                 break;
  218.             }
  219.         }
  220.     };
  221. }

2.3、自定义控件

        自定义radiobutton:

  1. package com.kotlin.custom;
  2.  
  3. import android.annotation.SuppressLint;
  4. import android.content.Context;
  5. import android.content.res.TypedArray;
  6. import android.graphics.drawable.Drawable;
  7. import android.util.AttributeSet;
  8. import android.widget.RadioButton;
  9.  
  10. import com.kotlin.novel.R;
  11. /**
  12.  * Describe：可控制drawableTop等图片的大小
  13.  */
  14. @SuppressLint("AppCompatCustomView")
  15. public class DrawableRadioButton extends RadioButton {
  16.     private int mDrawableSize;// xml文件中设置的大小
  17.     public DrawableRadioButton(Context context) {
  18.         this(context, null, 0);
  19.     }
  20.     public DrawableRadioButton(Context context, AttributeSet attrs) {
  21.         this(context, attrs, 0);
  22.     }
  23.     public DrawableRadioButton(Context context, AttributeSet attrs, int defStyle) {
  24.         super(context, attrs, defStyle);
  25.         Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = null;
  26.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DrawableRadioButton);
  27.         int n = a.getIndexCount();
  28.         for (int i = 0; i < n; i++) {
  29.             int attr = a.getIndex(i);
  30.             switch (attr) {
  31.                 case R.styleable.DrawableRadioButton_drawableSize:
  32.                     mDrawableSize = a.getDimensionPixelSize(R.styleable.DrawableRadioButton_drawableSize, 50);
  33.                     break;
  34.                 case R.styleable.DrawableRadioButton_drawableTop:
  35.                     drawableTop = a.getDrawable(attr);
  36.                     break;
  37.                 case R.styleable.DrawableRadioButton_drawableBottom:
  38.                     drawableRight = a.getDrawable(attr);
  39.                     break;
  40.                 case R.styleable.DrawableRadioButton_drawableRight:
  41.                     drawableBottom = a.getDrawable(attr);
  42.                     break;
  43.                 case R.styleable.DrawableRadioButton_drawableLeft:
  44.                     drawableLeft = a.getDrawable(attr);
  45.                     break;
  46.             }
  47.         }
  48.         a.recycle();
  49.         setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);
  50.     }
  51.     /**
  52.      * RadioButton上、下、左、右设置图标
  53.      */
  54.     public void setCompoundDrawablesWithIntrinsicBounds(Drawable left, Drawable top, Drawable right, Drawable bottom) {
  55.         if (left != null) {
  56.             left.setBounds(0, 0, mDrawableSize, mDrawableSize);
  57.         }
  58.         if (right != null) {
  59.             right.setBounds(0, 0, mDrawableSize, mDrawableSize);
  60.         }
  61.         if (top != null) {
  62.             top.setBounds(0, 0, mDrawableSize, mDrawableSize);
  63.         }
  64.         if (bottom != null) {
  65.             bottom.setBounds(0, 0, mDrawableSize, mDrawableSize);
  66.         }
  67.         setCompoundDrawables(left, top, right, bottom);
  68.     }
  69. }

        自定义圆形图标。

  1. package com.kotlin.custom;
  2.  
  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.*;
  6. import android.graphics.drawable.BitmapDrawable;
  7. import android.graphics.drawable.ColorDrawable;
  8. import android.graphics.drawable.Drawable;
  9. import android.util.AttributeSet;
  10. import com.kotlin.novel.R;
  11.  
  12. public class CircleImageView extends androidx.appcompat.widget.AppCompatImageView {
  13.     private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;
  14.     private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
  15.     private static final int COLORDRAWABLE_DIMENSION = 1;
  16.     private static final int DEFAULT_BORDER_WIDTH = 0;
  17.     private static final int DEFAULT_BORDER_COLOR = Color.BLACK;
  18.     private final RectF mDrawableRect = new RectF();
  19.     private final RectF mBorderRect = new RectF();
  20.     private final Matrix mShaderMatrix = new Matrix();
  21.     private final Paint mBitmapPaint = new Paint();
  22.     private final Paint mBorderPaint = new Paint();
  23.     private int mBorderColor = DEFAULT_BORDER_COLOR;
  24.     private int mBorderWidth = DEFAULT_BORDER_WIDTH;
  25.     private Bitmap mBitmap;
  26.     private BitmapShader mBitmapShader;
  27.     private int mBitmapWidth;
  28.     private int mBitmapHeight;
  29.     private float mDrawableRadius;
  30.     private float mBorderRadius;
  31.     private boolean mReady;
  32.     private boolean mSetupPending;
  33.     public CircleImageView(Context context) {
  34.         super(context);
  35.     }
  36.     public CircleImageView(Context context, AttributeSet attrs) {
  37.         this(context, attrs, 0);
  38.     }
  39.     public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
  40.         super(context, attrs, defStyle);
  41.         super.setScaleType(SCALE_TYPE);
  42.         TypedArray a = context.obtainStyledAttributes(attrs,
  43.                 R.styleable.CircleImageView, defStyle, 0);
  44.         mBorderWidth = a.getDimensionPixelSize(
  45.                 R.styleable.CircleImageView_border_width, DEFAULT_BORDER_WIDTH);
  46.         mBorderColor = a.getColor(R.styleable.CircleImageView_border_color,
  47.                 DEFAULT_BORDER_COLOR);
  48.         a.recycle();
  49.         mReady = true;
  50.         if (mSetupPending) {
  51.             setup();
  52.             mSetupPending = false;
  53.         }
  54.     }
  55.     @Override
  56.     public ScaleType getScaleType() {
  57.         return SCALE_TYPE;
  58.     }
  59.     @Override
  60.     public void setScaleType(ScaleType scaleType) {
  61.         if (scaleType != SCALE_TYPE) {
  62.             throw new IllegalArgumentException(String.format(
  63.                     "ScaleType %s not supported.", scaleType));
  64.         }
  65.     }
  66.     @Override
  67.     protected void onDraw(Canvas canvas) {
  68.         if (getDrawable() == null) {
  69.             return;
  70.         }
  71.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, mDrawableRadius,
  72.                 mBitmapPaint);
  73.         if (mBorderWidth != 0) {
  74.             canvas.drawCircle(getWidth() / 2, getHeight() / 2, mBorderRadius,
  75.                     mBorderPaint);
  76.         }
  77.     }
  78.     @Override
  79.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  80.         super.onSizeChanged(w, h, oldw, oldh);
  81.         setup();
  82.     }
  83.     public int getBorderColor() {
  84.         return mBorderColor;
  85.     }
  86.     public void setBorderColor(int borderColor) {
  87.         if (borderColor == mBorderColor) {
  88.             return;
  89.         }
  90.         mBorderColor = borderColor;
  91.         mBorderPaint.setColor(mBorderColor);
  92.         invalidate();
  93.     }
  94.     public int getBorderWidth() {
  95.         return mBorderWidth;
  96.     }
  97.     public void setBorderWidth(int borderWidth) {
  98.         if (borderWidth == mBorderWidth) {
  99.             return;
  100.         }
  101.         mBorderWidth = borderWidth;
  102.         setup();
  103.     }
  104.     @Override
  105.     public void setImageBitmap(Bitmap bm) {
  106.         super.setImageBitmap(bm);
  107.         mBitmap = bm;
  108.         setup();
  109.     }
  110.     @Override
  111.     public void setImageDrawable(Drawable drawable) {
  112.         super.setImageDrawable(drawable);
  113.         mBitmap = getBitmapFromDrawable(drawable);
  114.         setup();
  115.     }
  116.     @Override
  117.     public void setImageResource(int resId) {
  118.         super.setImageResource(resId);
  119.         mBitmap = getBitmapFromDrawable(getDrawable());
  120.         setup();
  121.     }
  122.     private Bitmap getBitmapFromDrawable(Drawable drawable) {
  123.         if (drawable == null) {
  124.             return null;
  125.         }
  126.         if (drawable instanceof BitmapDrawable) {
  127.             return ((BitmapDrawable) drawable).getBitmap();
  128.         }
  129.         try {
  130.             Bitmap bitmap;
  131.             if (drawable instanceof ColorDrawable) {
  132.                 bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION,
  133.                         COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
  134.             } else {
  135.                 bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
  136.                         drawable.getIntrinsicHeight(), BITMAP_CONFIG);
  137.             }
  138.             Canvas canvas = new Canvas(bitmap);
  139.             drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
  140.             drawable.draw(canvas);
  141.             return bitmap;
  142.         } catch (OutOfMemoryError e) {
  143.             return null;
  144.         }
  145.     }
  146.     private void setup() {
  147.         if (!mReady) {
  148.             mSetupPending = true;
  149.             return;
  150.         }
  151.         if (mBitmap == null) {
  152.             return;
  153.         }
  154.         mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  155.         mBitmapPaint.setAntiAlias(true);
  156.         mBitmapPaint.setShader(mBitmapShader);
  157.         mBorderPaint.setStyle(Paint.Style.STROKE);
  158.         mBorderPaint.setAntiAlias(true);
  159.         mBorderPaint.setColor(mBorderColor);
  160.         mBorderPaint.setStrokeWidth(mBorderWidth);
  161.         mBitmapHeight = mBitmap.getHeight();
  162.         mBitmapWidth = mBitmap.getWidth();
  163.         mBorderRect.set(0, 0, getWidth(), getHeight());
  164.         mBorderRadius = Math.min((mBorderRect.height() - mBorderWidth) / 2,
  165.                 (mBorderRect.width() - mBorderWidth) / 2);
  166.         mDrawableRect.set(mBorderWidth, mBorderWidth, mBorderRect.width()
  167.                 - mBorderWidth, mBorderRect.height() - mBorderWidth);
  168.         mDrawableRadius = Math.min(mDrawableRect.height() / 2,
  169.                 mDrawableRect.width() / 2);
  170.         updateShaderMatrix();
  171.         invalidate();
  172.     }
  173.     private void updateShaderMatrix() {
  174.         float scale;
  175.         float dx = 0;
  176.         float dy = 0;
  177.         mShaderMatrix.set(null);
  178.         if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width()
  179.                 * mBitmapHeight) {
  180.             scale = mDrawableRect.height() / (float) mBitmapHeight;
  181.             dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
  182.         } else {
  183.             scale = mDrawableRect.width() / (float) mBitmapWidth;
  184.             dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
  185.         }
  186.         mShaderMatrix.setScale(scale, scale);
  187.         mShaderMatrix.postTranslate((int) (dx + 0.5f) + mBorderWidth,
  188.                 (int) (dy + 0.5f) + mBorderWidth);
  189.         mBitmapShader.setLocalMatrix(mShaderMatrix);
  190.     }
  191. }

        自定义控件的attrs文件。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <!--自定义RadioButton，增加了控制图片的功能,不要在themes文件中也加上，否则会报错-->
  4.     <declare-styleable name="DrawableRadioButton">
  5.         <attr name="drawableSize" format="dimension"/>
  6.         <attr name="drawableTop" format="reference"/>
  7.         <attr name="drawableLeft" format="reference"/>
  8.         <attr name="drawableRight" format="reference"/>
  9.         <attr name="drawableBottom" format="reference"/>
  10.     </declare-styleable>
  11.     <declare-styleable name="CircleImageView">
  12.         <attr name="border_width" format="dimension"/>
  13.         <attr name="border_color" format="color" />
  14.     </declare-styleable>
  15. </resources>

3、效果

3.1、书架页面

3.2、书城页面

3.3、我的页面

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/130657
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号