目录

  • 前言
  • 正文
    • 1.Glide 不能处理 placeholder，error 的图片圆角。
    • 2. BottomNavigationView 取消文字选中放大效果
    • 3. TabLayout 的 tab 之间间距设置 tabPadding 不生效？
    • 4. EditText 设置 maxLines = 1 无效，仍可以多行
    • 5. CardView 圆角有毛边
  • 最后

前言

记录开发中遇到的 bug，不再让自己重复地被同样的 bug 折磨。

正文

1.Glide 不能处理 placeholder，error 的图片圆角。

问题描述：

GlideApp.with(itemView).load(item.getImgurl())        .apply(RequestOptions.bitmapTransform(new RoundedCorners(DensityUtils.dp2px(itemView.getContext(), CORNER_RADIUS_DP))))        .placeholder(R.drawable.ringtone_list_image_placeholder)        .error(R.drawable.ringtone_list_image_error)        .into(binding.ivIcon);

使用 Glide 加载网络上的图片资源，同时设置了 placeholder() 占位图片，error() 错误图片为本地的图片资源。
代码中通过 apply(RequestOptions.bitmapTransform(new RoundedCorners(DensityUtils.dp2px(itemView.getContext(), CORNER_RADIUS_DP)))) 添加了圆角变换。
但是，圆角变换仅仅对网络上的图片资源起作用，对于后面的占位图片，错误图片都不起作用。
效果图是这样的：

解决办法：
查看 glide 库 github 上的 issue：
Feature Request: Round placeholder images #1212。
查看 glide 中文文档：变换是否会被应用到占位符上？

变换是否会被应用到占位符上？
No。Transformation仅被应用于被请求的资源，而不会对任何占位符使用。
在应用中包含必须在运行时做变换才能使用的图片资源是很不划算的。相反，在应用中包含一个确切符合尺寸和形状要求的资源版本几乎总是一个更好的办法。假如你正在加载圆形图片，你可能希望在你的应用中包含圆形的占位符。另外你也可以考虑自定义一个View来剪裁(clip)你的占位符，而达到你想要的变换效果。

代码如下：

Resources resources = Utils.getApp().getResources();RoundedBitmapDrawable  placeholder = RoundedBitmapDrawableFactory.create(resources,        BitmapFactory.decodeResource(resources, R.drawable.ringtone_list_image_placeholder));placeholder.setCornerRadius(DensityUtils.dp2px(Utils.getApp(), CORNER_RADIUS_DP));RoundedBitmapDrawable  errorBitmap = RoundedBitmapDrawableFactory.create(resources,        BitmapFactory.decodeResource(resources, R.drawable.ringtone_list_image_error));errorBitmap.setCornerRadius(DensityUtils.dp2px(Utils.getApp(), CORNER_RADIUS_DP));GlideApp.with(itemView).load(item.getImgurl())        .apply(RequestOptions.bitmapTransform(new RoundedCorners(DensityUtils.dp2px(itemView.getContext(), CORNER_RADIUS_DP))))        .placeholder(placeholder)        .error(errorBitmap)        .into(binding.ivIcon);

之前在网上看到一个浏览量很高的办法是错误的，大家还是要多看文档，issue。

2. BottomNavigationView 取消文字选中放大效果

问题描述：
看下面的 gif 图片：

在选中一个导航项目时，字体会有放大效果。但是，这不符合需求，需求是在选中时，不要字体出现放大效果，还是需要保持原来的大小。

解决办法：
想要尽快 BottomNavigationView 布局内容，可以使用布局查看器 Layout Inspector 来查看：

可以看到每一个导航项，对应着一个 BottomNavigationItemView。图标是一个 AppCompatImageView，紧挨的是一个 BaselineLayout，包裹着两个文本：smallLabel 和 largeLabel。
接着，打开 BottomNavigationItemView 的源码，找到填充布局的代码：

LayoutInflater.from(context).inflate(R.layout.design_bottom_navigation_item, this, true);

因为我们依赖的是

implementation 'com.google.android.material:material:1.1.0'

可以直接查看 github 上对应的代码：
material-components-android
找到 R.layout.design_bottom_navigation_item 布局文件：

<merge xmlns:android="http://schemas.android.com/apk/res/android">  <ImageView      android:id="@+id/icon"      android:layout_width="24dp"      android:layout_height="24dp"      android:layout_marginTop="@dimen/design_bottom_navigation_margin"      android:layout_marginBottom="@dimen/design_bottom_navigation_margin"      android:layout_gravity="center_horizontal"      android:contentDescription="@null"      android:duplicateParentState="true"/>  <com.google.android.material.internal.BaselineLayout      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_gravity="bottom|center_horizontal"      android:paddingBottom="10dp"      android:clipChildren="false"      android:clipToPadding="false"      android:duplicateParentState="true">    <TextView        android:id="@+id/smallLabel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:duplicateParentState="true"        android:ellipsize="end"        android:maxLines="1"        android:textSize="@dimen/design_bottom_navigation_text_size"/>    <TextView        android:id="@+id/largeLabel"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:duplicateParentState="true"        android:ellipsize="end"        android:maxLines="1"        android:textSize="@dimen/design_bottom_navigation_active_text_size"        android:visibility="invisible"/>  com.google.android.material.internal.BaselineLayout>merge>

可以看到文字大小是通过两个 dimen 资源指定的：

<TextView    android:id="@+id/smallLabel"    android:textSize="@dimen/design_bottom_navigation_text_size"/><TextView    android:id="@+id/largeLabel"    android:textSize="@dimen/design_bottom_navigation_active_text_size"/>

第一种解决办法：我们可以在工程里建立两个同样名字的 dimen 资源，把它们写成一样的值。

<?xml version="1.0" encoding="utf-8"?><resources xmlns:tools="http://schemas.android.com/tools"    >    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">12spdimen>    <dimen name="design_bottom_navigation_text_size" tools:override="true">12spdimen>resources>

第二种解决办法，是通过设置 TextAppearance 来解决。

<style name="BottomNavigationViewStyle" parent="Widget.Design.BottomNavigationView">    "itemTextAppearanceInactive">@style/BottomNavigationViewTextStyle    "itemTextAppearanceActive">@style/BottomNavigationViewTextStylestyle><style name="BottomNavigationViewTextStyle" parent="TextAppearance.AppCompat.Caption">    "android:textSize">12spstyle>

把 style 设置给 BottomNavigationView：

<com.google.android.material.bottomnavigation.BottomNavigationView    style="@style/BottomNavigationViewStyle" />

推荐使用第二种解决办法。第一种如果 dimen 的名字被修改了，就不会生效了。

最终效果：

3. TabLayout 的 tab 之间间距设置 tabPadding 不生效？

问题描述：
UI 要求 TabLayout 的 tab 之间的距离可以小一些吗，目前的效果是这样的：

因为 tab 有近 10 个，所以 TabLayout 设置了 app:tabMode="scrollable" 属性。

目前的效果确实有些间距过大了。

但是，我看了布局里根本就没有设置间距。而且设置间距为

<com.google.android.material.tabs.TabLayout    android:id="@+id/tablayout_ringtone"    app:tabPaddingStart="8dp"    app:tabPaddingEnd="8dp"    app:tabMode="scrollable"/>

效果根本没有变化，效果图如下：

设置间距为

<com.google.android.material.tabs.TabLayout    android:id="@+id/tablayout_ringtone"    app:tabPaddingStart="16dp"    app:tabPaddingEnd="16dp"    app:tabMode="scrollable"/>

效果仍然没有变化，效果图如下：

干脆设置地再大些，

<com.google.android.material.tabs.TabLayout    android:id="@+id/tablayout_ringtone"    app:tabPaddingStart="50dp"    app:tabPaddingEnd="50dp"    app:tabMode="scrollable"/>

终于起作用了，效果如下：

那么，为什么设置的间距是小的数值，就没有效果呢？

解决办法：

从TabLayout 的 setupWithViewPager() 方法，开始查看 TabLayout 的代码，找到创建 TabView 的代码：

private TabView createTabView(@NonNull final Tab tab) {  TabView tabView = tabViewPool != null ? tabViewPool.acquire() : null;  if (tabView == null) {    tabView = new TabView(getContext());  }  tabView.setTab(tab);  tabView.setFocusable(true);  tabView.setMinimumWidth(getTabMinWidth());  if (TextUtils.isEmpty(tab.contentDesc)) {    tabView.setContentDescription(tab.text);  } else {    tabView.setContentDescription(tab.contentDesc);  }  return tabView;}public TabView(@NonNull Context context) {  super(context);  updateBackgroundDrawable(context);  ViewCompat.setPaddingRelative(      this, tabPaddingStart, tabPaddingTop, tabPaddingEnd, tabPaddingBottom);  setGravity(Gravity.CENTER);  setOrientation(inlineLabel ? HORIZONTAL : VERTICAL);  setClickable(true);  ViewCompat.setPointerIcon(      this, PointerIconCompat.getSystemIcon(getContext(), PointerIconCompat.TYPE_HAND));  ViewCompat.setAccessibilityDelegate(this, null);}

可以看到，第 20 行，TabView 的构造方法里确实设置了 tabPaddingStart 和 tabPaddingEnd。
继续看 createTabView() 方法的第 8 行：tabView.setMinimumWidth(getTabMinWidth()); ，是通过 getTabMinWidth() 方法给 TabView 设置了最小宽度。

private int getTabMinWidth() {  if (requestedTabMinWidth != INVALID_WIDTH) {    // If we have been given a min width, use it    return requestedTabMinWidth;  }  // Else, we'll use the default value  return (mode == MODE_SCROLLABLE || mode == MODE_AUTO) ? scrollableTabMinWidth : 0;}
requestedTabMinWidth =    a.getDimensionPixelSize(R.styleable.TabLayout_tabMinWidth, INVALID_WIDTH);scrollableTabMinWidth = res.getDimensionPixelSize(R.dimen.design_tab_scrollable_min_width);

requestedTabMinWidth 就是在 xml 里设置 app:tabMinWidth 属性的值。我们没有设置，所以 requestedTabMinWidth 的值是 INVALID_WIDTH。

再回到 getTabMinWidth() 方法里面，if 分支不成立，所以会到最后的 return 语句：

return (mode == MODE_SCROLLABLE || mode == MODE_AUTO) ? scrollableTabMinWidth : 0;

mode == MODE_SCROLLABLE成立，三目运算符会取 scrollableTabMinWidth 的值。

查看 design_tab_scrollable_min_width 的值：

<dimen name="design_tab_scrollable_min_width">72dpdimen>

到这里，应该明白了，设置间距小时，间距没有变化，是因为最小宽度起作用了。

我们可以明显指定最小宽度为 0dp。这样就可以让设置的间距生效了。

<com.google.android.material.tabs.TabLayout    android:id="@+id/tablayout_ringtone"    app:tabPaddingStart="0dp"    app:tabPaddingEnd="0dp"    app:tabMinWidth="0dp"    app:tabMode="scrollable"/>

效果图如下：

<com.google.android.material.tabs.TabLayout    android:id="@+id/tablayout_ringtone"    app:tabPaddingStart="12dp"    app:tabPaddingEnd="12dp"    app:tabMinWidth="0dp"    app:tabMode="scrollable"/>

效果图如下：

4. EditText 设置 maxLines = 1 无效，仍可以多行

需要设置一下 “android:inputType” 属性的值，如设置为android:inputType=“text”`。
参考：https://www.jianshu.com/p/067b957cbe65

5. CardView 圆角有毛边

问题描述：

<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView 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="wrap_content"    android:foreground="?android:attr/selectableItemBackground"    app:cardElevation="0dp"    app:cardCornerRadius="4dp">    <androidx.constraintlayout.widget.ConstraintLayout        android:layout_width="match_parent"        android:background="@color/common_background"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/iv_video_image"            android:layout_width="0dp"            android:layout_height="0dp"            android:scaleType="fitXY"            app:layout_constraintDimensionRatio="h,9:16"            tools:srcCompat="@mipmap/ic_launcher"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toTopOf="parent" />    androidx.constraintlayout.widget.ConstraintLayout>androidx.cardview.widget.CardView>

解决办法：
去掉 ConstraintLayout 的背景，增加 CardView 的背景：app:cardBackgroundColor="@color/common_background"。

<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView 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="wrap_content"    android:foreground="?android:attr/selectableItemBackground"    app:cardElevation="0dp"    app:cardBackgroundColor="@color/common_background"    app:cardCornerRadius="4dp">    <androidx.constraintlayout.widget.ConstraintLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/iv_video_image"            android:layout_width="0dp"            android:layout_height="0dp"            android:scaleType="fitXY"            app:layout_constraintDimensionRatio="h,9:16"            tools:srcCompat="@mipmap/ic_launcher"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toTopOf="parent" />    androidx.constraintlayout.widget.ConstraintLayout>androidx.cardview.widget.CardView>

再看一下局部放大图，没有任何的毛边。

最后

MaterialDesignComponents 里提供了非常多的自定义控件，也有非常多的属性可以配置，需要好好熟悉这些属性，才能满足一些自定义属性值的需求。

代码出错了，关键是要仔细查看日志。能够仔细地查看日志，就离解决问题很近了。

更多相关文章

  1. Android(安卓)Tween动画之RotateAnimation实现图片不停旋转
  2. android没有插SD卡/TF卡（TF卡其实就是microSD卡）时的图库（拍照的照
  3. android 开发零起步学习笔记（十一）:界面切换+几种常用界面切换效果
  4. Android开发中TextView文本过长滚动显示实现方法分析
  5. android 按钮自定义
  6. Android图片自适应不同分辨率屏幕问题
  7. Vue实现简书导航栏效果
  8. iScroll框架解析——Android(安卓)设备页面内 div（容器，非页面）over
  9. android 图片轮播框架banner

随机推荐

  1. 在JavaScript中访问PHP变量[重复]
  2. JQuery Image滑块从json加载图片
  3. 如何在sap.m.Datepicker中设置与上一行相
  4. 由浅到深的分析Javascript OO之写类方式
  5. JavaScript数组操作函数方法详解
  6. 在图像映射中的背景图像
  7. AngularJS错误：模块ngAnimate不可用
  8. 在phonegap上从服务器获取数据
  9. JavaScript 对象属性作实参以及实参对象
  10. javascript 数据类型转换