AndroidAndroid开发Android开发经验谈

自定义导航栏的设计与使用(进阶)

2019-12-16  本文已影响0人  瑟闻风倾

1. 自定义导航栏

(1) 自定义导航栏布局 navigation_bar.xml

<?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="wrap_content"
    android:background="#06a7e2">

    <Button
        android:id="@+id/btn_nav_back"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:background="@drawable/ic_back"/>
    <TextView
        android:id="@+id/tv_nav_titile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="自定义导航"
        android:textColor="#ffffff"
        android:textSize="20sp"/>
    <Button
        android:id="@+id/btn_nav_right"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:background="@drawable/ic_right"/>
</RelativeLayout>

备注:按钮的背景,这是使用的是矢量图,当然也可以是.png图片。

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="1024"
    android:viewportWidth="1024">
    <path
        android:fillColor="#ffffff"
        android:pathData="M766.98,1021.95c-10.24,0 -20.48,-3.58 -28.67,-10.75L228.35,538.62c-15.87,-14.34 -15.87,-38.4 0,-52.74L738.3,13.31c15.87,-14.34 40.96,-14.34 56.83,0s15.87,38.4 0,52.74L313.86,512l481.28,445.95c15.87,14.34 15.87,38.4 0,52.74 -7.68,7.17 -17.92,11.26 -28.16,11.26z"/>
</vector>
<vector android:height="24dp" android:viewportHeight="1024"
    android:viewportWidth="1024" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffff" android:pathData="M214.7,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
    <path android:fillColor="#ffffff" android:pathData="M809.3,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
    <path android:fillColor="#ffffff" android:pathData="M512.01,512m-87.44,0a85.45,85.45 0,1 0,174.88 0,85.45 85.45,0 1,0 -174.88,0Z"/>
</vector>

拓展svg转xml
(2) 自定义类NavigationView继承RelativeLayout并实现OnClickListener接口

package comi.example.liy.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

import comi.example.liy.mytestdemo.R;

/**
 * Created by liy on 2019-12-16 10:38
 * 自定义导航栏:在自定义TitleView类中为自定义标题栏加载了布局,为返回按钮添加事件监听方法,并提供了设置标题文本的方法
 */
public class NavigationView extends RelativeLayout implements View.OnClickListener {

    private Button btnBack;//返回键
    private TextView tvTitle;//标题
    private Button btnRight;//右侧按钮

    public NavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater.from(context).inflate(R.layout.navigation_bar,this,true);//加载布局

        btnBack = findViewById(R.id.btn_nav_back);//获取控件
        btnBack.setOnClickListener(this);
        tvTitle = findViewById(R.id.tv_nav_titile);
        btnRight = findViewById(R.id.btn_nav_right);
        btnRight.setOnClickListener(this);

    }

    // 设置标题
    public void setTitle(String title){
        tvTitle.setText(title);
    }


    /*// 自定义左侧返回按钮的点击事件
    public void setBackButtonOnListener(OnClickListener listener){
        btnBack.setOnClickListener(listener);
    }

    // 自定义右侧按钮的点击事件
    public void setRightButtonOnListener(OnClickListener listener){
        btnRight.setOnClickListener(listener);
    }*/

    /**
     * 导航栏点击回调接口(如若需要标题可点击,可再添加)
     */
    public static interface ClickCallback{
        void onBackClick();
        void onRightClick();
    }

    //设置按钮点击回调接口
    private ClickCallback callback;
    public void setClickCallback(ClickCallback callback) {
        this.callback = callback;
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        switch (id){
            case R.id.btn_nav_back:
                callback.onBackClick();
                return;
            case R.id.btn_nav_right:
                callback.onRightClick();
                return;
            default:
                return;
        }
    }
}


2. 使用自定义导航栏

(1) 在activity_home.xml中引入自定义的标题栏

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <comi.example.liy.view.NavigationView
        android:id="@+id/home_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </comi.example.liy.view.NavigationView>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"/>

</LinearLayout>

(2) 在HomeActivity中获取自定义的标题栏,并重写按钮点击的回调函数

package comi.example.liy.mytestdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Toast;

import comi.example.liy.view.NavigationView;

/**
 * Created by liy on 2019-12-16 11:01
 */
public class HomeActivity extends AppCompatActivity {
    private NavigationView navigationView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        navigationView = findViewById(R.id.home_navigation_bar);
        navigationView.setTitle("爱我中华");
        /*navigationView.setBackButtonOnListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的返回键",Toast.LENGTH_SHORT).show();
            }
        });
        navigationView.setRightButtonOnListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的右侧键",Toast.LENGTH_SHORT).show();
            }
        });*/
        navigationView.setClickCallback(new NavigationView.ClickCallback() {
            @Override
            public void onBackClick() {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的返回键", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onRightClick() {
                Toast.makeText(HomeActivity.this,"点击了自定义导航栏的右侧键",Toast.LENGTH_SHORT).show();
            }
        });
    }


}

(3) 设置系统的AppTheme为NoActionBar

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

(4) 运行效果


最终效果.png

拓展Android自定义View的实现

上一篇下一篇

猜你喜欢

热点阅读