Android 自定义组合控件 简单导航栏

Stella981
• 阅读 1051

最近在做项目的过程中,发现项目中好多界面的导航栏都很类似或者一样,但是每次都要重复写同样的代码,觉得很不爽,所以就简单地自定义了一下导航栏控件.
先上图:

Android 自定义组合控件 简单导航栏

导航栏包括:

  • 返回按钮
  • 标题
  • 右侧按钮(功能不确定)

首先是布局文件,如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rl_chat_title"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/land_navigation"
    android:layout_alignParentTop="true">
    <ImageView 
        android:id="@+id/iv_nav_back"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="13dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/icon_back"/>
        
      <TextView 
        android:id="@+id/tv_nav_title"
         android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:layout_centerHorizontal="true"
          android:layout_centerVertical="true"
          android:text="@string/app_name"/>
          
      <ImageView 
          android:id="@+id/iv_nav_right"
          android:layout_width="50dp"
          android:layout_height="50dp"
          android:padding="13dp"
          android:layout_alignParentRight="true"
          android:layout_centerVertical="true"
          android:src="@drawable/icon_setting1"/>
</RelativeLayout>

布局包含两个ImageView和一个TextView.

然后自定义类NavigationView继承RelativeLayout并实现OnClickListener接口.

/**
 * 导航栏组件,目前包括返回键,标题,右侧按钮.其中:
 * </br>返回键已经实现按键监听
 * </br>右侧按钮已实现按键监听
 * </br>标题默认不可点击
 * @author Asia
 *
 */
public class NavigationView extends RelativeLayout implements OnClickListener{
    
    public NavigationView(Context context){
        this(context, null);
    }
    
    private ImageView backView;
    private TextView titleView;
    private ImageView rightView;
    public NavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.navigation_view, this, true);
        backView = (ImageView) view.findViewById(R.id.iv_nav_back);
        backView.setOnClickListener(this);
        titleView = (TextView) view.findViewById(R.id.tv_nav_title);
        rightView = (ImageView) view.findViewById(R.id.iv_nav_right);
        rightView.setOnClickListener(this);
    }
    
    /**
     * 获取返回按钮
     * @return
     */
    public ImageView getBackView() {
        return backView;
    }
    
    /**
     * 获取标题控件
     * @return
     */
    public TextView getTitleView() {
        return titleView;
    }
    
    /**
     * 设置标题
     * @param title
     */
    public void setTitle(String title){
        titleView.setText(title);
    }
    
    /**
     * 获取右侧按钮,默认不显示
     * @return
     */
    public ImageView getRightView() {
        return rightView;
    }
    
    private ClickCallback callback;
    /**
     * 设置按钮点击回调接口
     * @param callback
     */
    public void setClickCallback(ClickCallback callback) {
        this.callback = callback;
    }
    
    /**
     * 导航栏点击回调接口
     * </br>如若需要标题可点击,可再添加
     * @author Asia
     *
     */
    public static interface ClickCallback{
        /**
         * 点击返回按钮回调
         */
        void onBackClick();
        
        void onRightClick();
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (id == R.id.iv_nav_back) {
            callback.onBackClick();
            return;
        }
        if (id == R.id.iv_nav_right) {
            callback.onRightClick();
            return;
        }
    }
}

NavigationView中包含一个回调接口,在使用时设置一个此接口即可.

/**
 * 导航栏点击回调接口
 * </br>如若需要标题可点击,可再添加
 * @author Asia
 *
 */
public static interface ClickCallback{
    /**
     * 点击返回按钮回调
     */
    void onBackClick();
    
    void onRightClick();
}

如何使用呢?下面实际使用的过程.

主界面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
       
    <com.asi.customview.view.NavigationView 
        android:id="@+id/nav_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
</LinearLayout>

主界面Java代码

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }

    private NavigationView navigationView;
    private void initView() {
        navigationView = (NavigationView) super.findViewById(R.id.nav_main);
        navigationView.setTitle("Title");
        navigationView.setClickCallback(new ClickCallback() {
            
            @Override
            public void onRightClick() {
                DLog.d("点击了右侧按钮!");
                ToastUtil.showShort(MainActivity.this, "点击了右侧按钮!");
            }
            
            @Override
            public void onBackClick() {
                DLog.d("点击了返回按钮!");
                ToastUtil.showShort(MainActivity.this, "点击了返回按钮!");
                finish();
            }
        });
    }
}
点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
OC导航栏自定义返回按钮
【iOS】让我们一次性解决导航栏的所有问题在默认情况下,导航栏返回按钮长这个样子导航栏默认返回按钮导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个ViewController没有标题,则为Back(中文环境下为“返回”)。在默认情况下,导
Stella981 Stella981
3年前
Django+Xadmin打造在线教育系统(七)
全局导航&个人中心&全局搜索配置全局导航让index页面也继承base页面,注意首页有个单独的\_\_index.js\_\_base页面的导航栏也进行配置<!more<nav<divclass"nav"<divclass
布局王 布局王
1天前
鸿蒙仓颉开发语言实战教程:实现商城应用首页
经过了几天的入门教程,我们终于进入到了仓颉开发语言的实战环节,今天分享的内容是实现商城应用的首页页面,效果图如下:首页的内容包括导航栏、轮播图、商品分类和商品列表,我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的,我们需要自己去开发。此处的导航栏也比较
布局王 布局王
1天前
鸿蒙仓颉语言开发实战教程:商城搜索页
大家下午好,今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多,都有点密集恐惧症了,不过我们可以从上至下将它拆分开来,逐一击破。导航栏搜索页的的最顶部是导航栏,由返回按钮和搜索框两部分组成,比较简单,具体实现代码如下:Row(6)Image(@r(
布局王 布局王
1天前
鸿蒙Next仓颉语言开发实战教程:店铺详情页
各位早上好,幽蓝君又来分享仓颉开发教程了,今天的内容是店铺详情页:这个页面的内容看似简单,其实有很多小细节需要注意,主要还是让大家熟悉List容器的使用。整个页面由导航栏和List容器两大部分组成,导航栏我们已经分享过多次,今天不再赘述。主要说一下List
布局王 布局王
1天前
鸿蒙Next仓颉语言开发实战教程:聊天列表
昨天分享了消息列表页面,今天继续分享聊天页面的开发过程:这个页面又是常见的上中下布局,从上至下依次为导航栏、聊天列表和输入框工具栏,我们可以先写一下简单的结构,最上面导航栏是横向布局,所以写个Row容器,中间是List,底部仍然是Row容器,导航栏和底部输
布局王 布局王
1天前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
大家好,今日要分享的是使用仓颉语言开发动态广场页面,也比较像朋友圈页面:整个页面分为两部分,分别是导航栏和状态列表,导航栏比较简单,我们可以先写下导航栏的具体代码和页面的基本结构:ColumnRow(10)Text('推荐').fontColor(Colo
布局王 布局王
1天前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
各位周末好,今天为大家来仓颉语言外卖App的实战分享。我们可以先分析一下页面的布局结构,它是由导航栏和List容器组成的。幽蓝君目前依然没有找到仓颉语言导航栏的系统组件,还是要自定义,这个导航栏有三部分内容,可以使用两端对齐,要注意的是,如果需要中间部分在
鸿蒙小林 鸿蒙小林
1天前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
技术栈Appgalleryconnect开发准备上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。功能分析1.弹窗自定
布局王 布局王
1天前
Uniapp开发鸿蒙应用教程之自定义导航栏
连续分享了几天的Uniapp跨平台开发鸿蒙应用教程的文章,相信大家对跨平台开发已经有了初步的了解,今天分享一下跨平台开发中的自定义导航栏。在Hbuilder的初始化项目中是自带了导航栏的,这是一个全局的导航栏,它的样式设置和修改是在全局的配置文件pages