Android UI之背景处理

1、简介

作为一个优雅的Android程序员,那么使用的控件的话应该是有交互的,像我们使用的微信,每一次点击事件用户都有所反应,用户都能准确的知道自己执行了那些操作,是的,这很重要。而反应这些好的用户体验的好多都是使用的背景。

2、应用场景与实现

2.1 Item条目的水波纹效果:

     如上图所示,如果我们不设置摁下去的背景的话会显得用户体验很不好,所以有必要增添下背景。看下我们的背景是如何书写的,看下面的代码。

 这是不同的背景,针对的是5.0以下的背景选中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="false">
        <shape>
            <solid android:color="#f2f4f5" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <!--#d9d9d9-->
            <solid android:color="#d9d9d9" />
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <!--页面背景的颜色colorPageBg #f2f4f5-->
            <solid android:color="#f2f4f5" />
        </shape>
    </item>

</selector>

针对5.0以上的背景绘制 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#DD7D7D7D">
    <!--item的水波纹颜色 #DD7D7D7D-->


    <!--页面背景的颜色 #f2f4f5 -->

    <item>
        <color android:color="#f2f4f5" />
    </item>
    <item>
        <color android:color="#f2f4f5" />
    </item>
</ripple>

如下为目录层次,为同名但位于不同的drawable之下。 

 

 一开始看不懂没关系,你只需要是这么写的这么用的就完事了,后面会一点一点的进行分析的。

2.2 分析波纹效果

贴士: 像这种波纹效果,记得得对控件设置点击事件,否则就会没效果的哦。

a. 有边界波纹效果(系统)

    <TextView
        android:id="@+id/tv"
        android:background="?android:attr/selectableItemBackground"
        android:gravity="center"
        android:padding="20dp"
        android:layout_centerInParent="true"
        android:text="有边界波纹"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

b. 无边界(系统)

    <TextView
        android:id="@+id/tv"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:gravity="center"
        android:padding="20dp"
        android:layout_centerInParent="true"
        android:text="无边界波纹"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="NewApi" />

这样一对比的话,效果还是比较明显的吧。哈哈。

c. 自定义有边界效果

(效果的解释在xml文件也是有写道的,注意看一下哦)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#f00">

<!-- 加不加Item是有区别的
     如果没Item的话默认的是无边界的,也就是一个圆形的效果;
     而如果加了item的背景颜色,那么初始话就是该颜色;紧接着由长按水波纹的颜色进行初始颜色的回复
     且有了Item 是由边界的了
-->
<item android:drawable="@color/white" />
</ripple>

2.3  普通的背景选择

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 只需要设置Selected即可改变背景了撒 可以的
      选中处理
    -->
    <item android:drawable="@drawable/titlebar_discover_selected" android:state_selected="true" />
    <item android:drawable="@drawable/titlebar_discover_normal" android:state_selected="false" />
    <item android:drawable="@drawable/titlebar_discover_normal" android:state_pressed="false" />
</selector>

其实吧,像这个我们都是会的,就是通过java 代码 setSelected进而设置图片的背景。我们也应当习惯去使用这样的图片选择,是吧。

猜你喜欢

转载自blog.csdn.net/crazyZhangxl/article/details/82660857