工具栏,底部导航栏,可扩展列表视图

旧城等待， 2022-09-16 08:40 188阅读 0赞

## 1.工具栏 ##

这个概念，所接触的很多开发软件或工具，都会碰到。在手机开发的时候，可以进行导航、显示相应的标题等，使开发者不至于在应用程序中迷路。5.0使用Actionbar来实现，很多公司都会对该类进行定制，使用起来更加灵活。5.0之后使用Toolbar来取代之前的Actionbar，这个更加强大。

### 1.1 Toolbar类 ###

1.显示程序所处的位置。

2.提供一些重要的交互功能，比如说搜索、跳转等。

3.实现导航功能，例如返回按钮等。

常用属性和方法：

app:title setTitle(参数) 设置应用程序主题

app:subtitle setSubtitle(参数) 设置小标题

app:navigation setNavigation(int resId) 导航图标

logo setLogo(Drawable drawable) 程序logo

titleTextColor setTitleTextColor(int color) 设置标题文字颜色

### 1.设计主界面.xml ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity">
        
        <Toolbar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/toolbar" android:background="#9f9f9f"></Toolbar>
    </LinearLayout>

### 2.设计菜单xml文件 ###

步骤：

在res上右击，选择“new/andorid Resource Directory”，在弹出的对话框中，设置ResourceType为Menu,Directory Name采用默认值，即可创建menu文件夹。

在menu上右击，选择“new/menu Resourcefile”，输入文件名。

<?xml version="1.0" encoding="utf-8"?>
    
    <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
        
        <item android:icon="@mipmap/sousuo" android:title="搜索" android:id="@+id/action_find" app:showAsAction="ifRoom"/>
        <item android:icon="@mipmap/fenxiang" android:id="@+id/fenxiang" android:title="分享" app:showAsAction="ifRoom"/>
        <item android:title="设置" android:id="@+id/item1" app:showAsAction="never"/>
        <item android:title="关于" android:id="@+id/item2" app:showAsAction="never"/>
    </menu>

### 3.修改主界面后台代码 ###

package com.aaa.toolbardemo;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.widget.Toolbar;
    
    public class MainActivity extends AppCompatActivity { 
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //----------------------------------------
            Toolbar toolbar=(Toolbar) findViewById(R.id.toolbar);
            //导航加一个后退
            toolbar.setNavigationIcon(R.mipmap.houtui);
            toolbar.setTitle("首页");
            toolbar.setTitleTextColor(Color.WHITE);
            //声明菜单文件
            toolbar.inflateMenu(R.menu.base_toolbar_menu);
        }
    }

###  ###

## 2.底部导航栏 ##

手机程序：QQ 拼夕夕 微信等，都会在程序下方放置导航。好处是可以进行单手操作，即用户单手完成界面切换，从而查看不同的信息。

### 2.1 BottomNavigationView类 ###

用到了Fragment的知识，每个item都有一个icon和一个title组成，单击控制状态即可。

通话（电话） 通信录 设置

## 3.可扩展列表视图 ##

一般用于数据的展开和折叠这种场景，即可以单独展开的列表视图。

ExpandableListView,是ListView的子类。本质上是一个AdapterView,既然是AdapterView,在显示数据的时候，就需要使用到适配器。适配器叫ExpandableAdapter,这个类派生于BaseExpandableListAdapter,需要重写setOnGroupClickListener()、setOnChildClickListener()、setOnGroupCollpaseListener()、setOnGroupExpandListener()方法。

实例

展示河南省、陕西省行政区信息的实例。

### 1.修改主界面 ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity">
    
        <ExpandableListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/expand_list" android:groupIndicator="@null"/>
    
    </LinearLayout>

### 2.父项列表内容 ###

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="#3f60CC" android:layout_height="50dp">
        
        <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/parent_tv" android:textColor="#fff" android:gravity="center_vertical" android:paddingLeft="10dp" android:textSize="18sp"/>
        <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/parent_img" android:layout_alignParentRight="true" android:src="@mipmap/right" android:paddingRight="10dp"/>
    </RelativeLayout>

### 3.子项列表内容 ###

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
        
        <TextView android:layout_width="match_parent" android:layout_height="40dp" android:id="@+id/children_item" android:gravity="center_vertical" android:paddingLeft="10dp"/>
    </LinearLayout>

### 4.主界面后台代码 ###

package com.aaa.expanddemo;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    import android.os.Bundle;
    import android.view.View;
    import android.widget.ExpandableListView;
    import android.widget.Toast;
    
    public class MainActivity extends AppCompatActivity { 
        //1.变量 对象
        ExpandableListView expand_list_id;
        String[]groups={ "河南省","陕西省"};
        String[][]childs={ { "郑州市","安阳市","驻马店市"},{ "西安市","咸阳市","宝鸡市"}};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            //--------------------------------------
            initView();// 这个是自定义的方法
        }
    
        private void initView() { 
            expand_list_id=(ExpandableListView)findViewById(R.id.expand_list);
            ExpandableListViewAdapter adapter=new ExpandableListViewAdapter(this,groups,childs);
            expand_list_id.setAdapter(adapter);
            expand_list_id.expandGroup(0);
            //监听事件
            expand_list_id.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() { 
                @Override
                public boolean onGroupClick(ExpandableListView expandableListView, View view, int groupPosition, long l) { 
                    Toast.makeText(MainActivity.this, "你单击了"+groups[groupPosition], Toast.LENGTH_LONG).show();
                    return false;
                }
            });
    
            //监听事件2
            expand_list_id.setOnChildClickListener(new ExpandableListView.OnChildClickListener() { 
                @Override
                public boolean onChildClick(ExpandableListView expandableListView, View view, int groupPosition, int childPosition, long l) { 
                    Toast.makeText(MainActivity.this, "你单击了"+childs[groupPosition][childPosition], Toast.LENGTH_LONG).show();
                    return false;
                }
            });
            //监听事件3
            expand_list_id.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() { 
                @Override
                public void onGroupCollapse(int groupPosition) { 
                    Toast.makeText(MainActivity.this, "你收缩了"+groups[groupPosition], Toast.LENGTH_LONG).show();
                }
            });
            //监听4
            expand_list_id.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() { 
                @Override
                public void onGroupExpand(int groupPosition) { 
                    Toast.makeText(MainActivity.this, "你展开了"+groups[groupPosition], Toast.LENGTH_LONG).show();
                }
            });
        }
    }

### 5.子项扩展代码 ###

package com.aaa.expanddemo;
    
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseExpandableListAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    public class ExpandableListViewAdapter extends BaseExpandableListAdapter { 
        //1.成员变量
        private String[]groups;
        private String[][]childs;
        private Context context;
    
        //构造方法，和IDEA一样。
        public ExpandableListViewAdapter(Context context,String[] groups, String[][] childs) { 
            this.groups = groups;
            this.childs = childs;
            this.context = context;
        }
    
        @Override
        public int getGroupCount() { 
            return groups.length;
        }
    
        @Override
        public int getChildrenCount(int i) { 
            return childs[i].length;
        }
    
        @Override
        public Object getGroup(int i) { 
            return groups[i];
        }
    
        @Override
        public Object getChild(int i, int i1) { 
            return childs[i][i1];  //?
        }
    
        @Override
        public long getGroupId(int i) { 
            return i;
        }
    
        @Override
        public long getChildId(int i, int i1) { 
            return i1;
        }
    
        @Override
        public boolean hasStableIds() { 
            return true;
        }
    
        /** * 用于加载并显示列表项元素。 * @param groupPosition 为组位置 * @param isExpanded 是否折叠或伸缩状态 * @param convertView 重用已经的视图对象 * @param parent 返回视图所衣服的视图组。 * @return */
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) { 
            TextView tv_grouptext;
            ImageView img_group;
            convertView= LayoutInflater.from(parent.getContext()).inflate(R.layout.expand_parent_item,parent,false);
            tv_grouptext=convertView.findViewById(R.id.parent_tv);
            img_group=convertView.findViewById(R.id.parent_img);
            tv_grouptext.setText(groups[groupPosition]);
    
            if(isExpanded)
                img_group.setImageResource(R.mipmap.down);
            else
                img_group.setImageResource(R.mipmap.right);
    
            return convertView;
        }
    
        /** * 重写getChildView()方法. * isLastChild:表示是否为最后一项列表数据。 * @param groupPosition * @param childPosition * @param isLastChild * @param convertView * @param parent * @return */
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) { 
            //映射列表数据使用的布局文件
            convertView=LayoutInflater.from(parent.getContext()).inflate(R.layout.expand_children_item,parent,false);
            //获取列表数据对应的控件
            TextView tv_children_item=(TextView) convertView.findViewById(R.id.children_item);
            //显示列表数据
            tv_children_item.setText(childs[groupPosition][childPosition]);
            return convertView;
        }
    
        @Override
        public boolean isChildSelectable(int i, int i1) { 
            return true;
        }
    }

### 6.程序运行效果 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIV9upcz-1634471942405)(asseits/image-20211008201729316.png)\]

TextView tv\_children\_item=(TextView) convertView.findViewById(R.id.children\_item);  
//显示列表数据  
tv\_children\_item.setText(childs\[groupPosition\]\[childPosition\]);  
return convertView;  
\}

@Override
    public boolean isChildSelectable(int i, int i1) {
        return true;
    }

### 6.程序运行效果
    
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/7e51d38fcadc40e3a254227d7da75586.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGVhX3llYXI=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
    
    
    
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/0402872db558469d8d1392c07aae1765.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAdGVhX3llYXI=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)