工具栏,底部导航栏,可扩展列表视图
Posted tea_year
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了工具栏,底部导航栏,可扩展列表视图相关的知识,希望对你有一定的参考价值。
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">
<!-- 加入工具栏;android.support.v7.wideget.Toolbar-->
<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开头的自定义标签-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!-- 创建4个小选项;showAsAction:ifRoom
ifRoom:表示有位置才显示;always:总是显示在界面上;never:从不显示在界面上;
-->
<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">
<!-- 主界面就是可扩展列表;android:groupIndicator="@null" 取值可以是任意的Drawable对象,不再显示groupIndicator -->
<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)
以上是关于工具栏,底部导航栏,可扩展列表视图的主要内容,如果未能解决你的问题,请参考以下文章