Android 仿微信小程序 NavigationBar 按钮

╰半夏微凉° 2023-01-03 12:56 207阅读 0赞

1.view布局文件

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar_layout_shape"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:id="@+id/navigation_bar_shape_lv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginEnd="16dp"
            android:background="@drawable/navigation_bar_icon_shape"
            android:orientation="horizontal">
    
            <LinearLayout
                android:id="@+id/navigation_bar_left_lv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:background="@drawable/navigation_bar_icon_left_shape">
    
                <ImageView
                    android:id="@+id/navigation_bar_left_image"
                    android:layout_width="24dp"
                    android:layout_height="24dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="12dp"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/navigation_bar_icon_left_white" />
            </LinearLayout>
    
    
            <View
                android:id="@+id/navigation_bar_divider"
                android:layout_width="1dp"
                android:layout_height="18dp"
                android:layout_gravity="center_vertical"
                android:background="#80F5F5F5" />
    
            <LinearLayout
                android:id="@+id/navigation_bar_right_lv"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="@drawable/navigation_bar_icon_right_shape"
                android:gravity="center_vertical">
    
                <ImageView
                    android:id="@+id/navigation_bar_right_image"
                    android:layout_width="18dp"
                    android:layout_height="18dp"
                    android:layout_marginStart="12dp"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="12dp"
                    android:layout_marginBottom="4dp"
                    android:src="@drawable/navigation_bar_icon_right_white" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

2.按钮背景样式 navigation\_bar\_icon\_shape.xml

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        
        <solid android:color="#80A9A9A9" />
    
        
        <corners android:radius="16dp" />
        
         
        <stroke
            android:width="0.5dp"
            android:color="#80C0C0C0" />
    </shape>

3.左边按钮点击样式 navigation\_bar\_icon\_left\_shape.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_pressed="true">
            <shape xmlns:android="http://schemas.android.com/apk/res/android">
                
                <solid android:color="#B3808080" />
                
                <corners
                    android:topLeftRadius="16dp"
                    android:bottomLeftRadius="16dp" />
            </shape>
        </item>
    
    </selector>

4.右边按钮点击样式 navigation\_bar\_icon\_right\_shape.xml

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_pressed="true">
            <shape xmlns:android="http://schemas.android.com/apk/res/android">
                
                <solid android:color="#B3808080" />
    
                
                <corners
                    android:topRightRadius="16dp"
                    android:bottomRightRadius="16dp" />
            </shape>
        </item>
    
    </selector>

5.NavigationBarView.java

public class NavigationBarView extends FrameLayout {
    
        private ImageView leftBtn;
        private ImageView rightBtn;
        private LinearLayout lvLeftBtn;
        private LinearLayout lvRightBtn;
        private LinearLayout lvNavigationBar;
        private OnNavigationBarListener mNavigationBar = null;
    
        public NavigationBarView(Context context) {
            this(context, null);
        }
    
        public NavigationBarView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public NavigationBarView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context);
        }
    
        private void init(Context context) {
            LayoutInflater.from(context).inflate(R.layout.navigation_bar_layout, this);
    
            leftBtn = (ImageView) findViewById(R.id.navigation_bar_left_image);
            rightBtn = (ImageView) findViewById(R.id.navigation_bar_right_image);
            lvNavigationBar = findViewById(R.id.navigation_bar_shape_lv);
    
            lvLeftBtn = findViewById(R.weight_navigation_bar_left_lv);
            lvRightBtn = findViewById(R.weight_navigation_bar_right_lv);
    
            lvLeftBtn.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mNavigationBar.OnLeftClick(v);
                }
            });
            lvRightBtn.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mNavigationBar.OnRightClick(v);
                }
            });
        }
    
        // 监听器
        public void setOnNavigationBarListener(OnNavigationBarListener navigationBarListener) {
            this.mNavigationBar = navigationBarListener;
        }
    
    
        // 接口
        public interface OnNavigationBarListener {
            public void OnLeftClick(View v);
            public void OnRightClick(View v);
        }
    }

6.在layout布局中使用

<?xml version="1.0" encoding="utf-8"?>
    
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.wang.test.NavigationBarView
            android:id="@+id/navigationBarView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </FrameLayout>

7.在java文件中使用

NavigationBarView navigationBarView = findViewById(R.id.navigationBarView);
            navigationBarView.setDarkIcon(true);
            navigationBarView.setOnNavigationBarListener(new NavigationBarView.OnNavigationBarListener() {
                @Override
                public void OnLeftClick(View v) {
                    ToastUtils.show("左左左左左");
                }
    
                @Override
                public void OnRightClick(View v) {
                    ToastUtils.show("右右右右右");
                }
    
            });

8.效果：

![20210111113446895.gif][]

[20210111113446895.gif]: /images/20221119/f1b08cb16430495392eb8e485b4b6e41.png