方圆

《第一行代码android》第11章、第12章

2020-10-11

11. Location Base Service

获取为主可通过GPS和网络定位的方式,GPS定位准确但在室内信号不好;网络定位根据手机附近的三个基站进行定位,精度一般,但室内可用。后面的实践基于百度地图SDK进行,实现了获取经纬度、具体地址、在地图中实时更新位置。使用时需要注意的任然是权限的静态配置和动态授予。

12. Material Design

Google推荐的android设计理念,提供了一个便于实现这种效果的组件库,后面主要是Material库中封装组件的使用。

12.1 ToolBar

ActionBar对比,都可实现自定义标题栏,不过ActionBar只能位于Activity顶部,不利于实现Material效果,官方不推荐使用。ToolBar继承自前者,更加灵活,可以实现更多效果。

1. 隐藏默认ActionBar

androidManifest中指定的@style/AppThemeparent指定了actionBar的主题,通过指定NoActionBar隐藏默认actionBar.

1
2
3
4
5
6
<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>

需要注意几个属性的意义:

  • colorPrimarycolorPrimaryDarkwindowsBackgroundnavigationBarColor表示页面不同位置的颜色。
  • colorAccent: 这个颜色用于表达强调的意思,比如按钮或者一些控件的选中状态。

2. 自定义ToolBar

通过FrameLayout来包裹ToolBar。需要注意,外部指定了light主题后ToolBar也是淡色主题,其上的各种元素会自动深色主题(与默认actionBar不一致),因此指定android:themeDark,此时弹出元素也会变成深色,因此需要指定app:popupTheme

1
2
3
4
5
6
7
8
9
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
</androidx.appcompat.widget.Toolbar>

然后在MainActivity中将自定义toobar设置为actionBar.

1
2
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

3. 定义更多按钮

通过自定义menu资源,并在其中使用<item>实现按钮定义。需要注意showAsAction属性的定义,此属性可指定item根据屏幕宽度的显示方案,ifRoom表示有空间才显示,否则会折叠到右侧optionoption中只显示文字,不显示图标。

然后在mainActivity中注入自定义menu,并可通过重写函数onOptionsItemSelected实现每个按钮点击事件的处理。

1
2
3
4
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toobar, menu);
return true;
}

12.2 滑动菜单

从屏幕边缘划出的菜单,可节省页面空间。

1. DrawerLayout 实现主页面和滑动菜单布局

第一个子控件是主页面、第二个子控件是滑动菜单。第二个控件layout_graity可指定划出位置leftrightstartstart表示根据

2. ToolBar左侧增加导航按钮进入滑动菜单

此方式方便不知道滑动边缘可以出现滑动菜单的用户。需要注意,最左侧导航按钮的的资源id是android.R.id.home而不是自定义。在onOptionsItemSelected中处理点击事件。

1
2
3
4
5
6
7
ActionBar actionBar = getSupportActionBar();
if (actionBar != null){
// 显示导航按钮
actionBar.setDisplayHomeAsUpEnabled(true);
// 修改默认图标
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}

3. NavigationView 布局滑动菜单

以用户个人页面为例、自定义header_layoutmenu,前者可包含头像和基本信息,后者则是菜单列表。头像可以使用开源的de.hdodenhof:circleimageview实现图片圆形化。

1
2
3
4
5
6
7
8
9
<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="@string/menu"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
/>

然后在activity实现点击监听器的注册。

1
2
3
4
5
6
7
8
9
10
11
12
// 导航栏
NavigationView navigationView = findViewById(R.id.nav_view);
// 设置一个默认选项
navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
// 只是关闭滑动菜单,可添加对应其他操作
drawerLayout.closeDrawers();
return true;
}
});

12.3 FloatingActionButton和Snackbar

悬浮按钮不属于主界面一部分,通过layout_gravity指定位置,bottom表示位于底部,end表示位于系统语言的末尾。

1
2
3
4
5
6
7
8
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
/>

然后设置点击事件监听器即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 悬浮按钮
FloatingActionButton floatingActionButton = findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 使用 view 来自动寻找最外层布局
// 这里传入 view,使用的CoordinateLayout才能监控到弹出事件,否则Snackbar并不是其子控件
Snackbar.make(view, "点击了完成", Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(MainActivity.this, "取消成功", Toast.LENGTH_SHORT).show();
}
}).show();
}
});

Snackbar

SnackbarToast略不同,允许在其中加入一个按钮便于用户反馈。需要注意第一个参数view的使用

CoordinatorLayout

上面使用FrameLayout布局时,位于底部的浮动按钮会被弹出的Snackbar遮盖,CoordinatorLayout继承自FrameLayout且能够监听子元素所有事件以实现避免遮挡。Snackbar并不是CoordinatorLayout的子元素,但由于其view参数是CoordinatorLayout的子元素,因此可以实现。

Tags: android
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章