zoukankan      html  css  js  c++  java
  • Android中的动画,选择器,样式和主题的使用

    一、动画:

    1、动画的分类:

    1)、Tween动画:这种实现方式可以使视图组件移动、放大、缩小以及产生透明度的变化;

    2)、Frame动画:传统的动画方法,通过顺序的播放排列好的图片来实现,类似电影。

    1)Frame 帧动画 AnimationDrawable

    【参考api文档实现示例:/sdk/docs/guide/topics/resources/animation-resource.html#Frame】

    1、使用AnimationDrawable来操作:

    在res目录下,新建drawable与anim目录:

    drawable放入帧动画图片

    anim目录下新建帧动画xml文件来表示帧动画;

    布局文件:

         <ImageView       

            android:id="@+id/iv"

            android:onClick="start"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content" />

    帧动画文件rocket.xml

          <?xml version="1.0" encoding="utf-8"?>

           <!-- oneshot 是否只播放一次 -->

           <animation-list xmlns:android="http://schemas.android.com/apk/res/android"

                  android:oneshot="false" >

          <item  android:drawable="@drawable/girl_1" android:duration="200"/>

          <item  android:drawable="@drawable/girl_2" android:duration="200"/>

          <item  android:drawable="@drawable/girl_3" android:duration="200"/>

          <item  android:drawable="@drawable/girl_4" android:duration="200"/>

          <item  android:drawable="@drawable/girl_5" android:duration="200"/>

         <item  android:drawable="@drawable/girl_6" android:duration="200"/>

         <item  android:drawable="@drawable/girl_7" android:duration="200"/>

          <item  android:drawable="@drawable/girl_8" android:duration="200"/>

          <item  android:drawable="@drawable/girl_9" android:duration="200"/>

          <item  android:drawable="@drawable/girl_10" android:duration="200"/>

          <item  android:drawable="@drawable/girl_11" android:duration="200"/>

           </animation-list>

    代码:

     public class MainActivity extends Activity {

           private ImageView iv;

           private AnimationDrawable anim;       

           @Override

           protected void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.activity_main);

                  iv = (ImageView) findViewById(R.id.iv);

                  iv.setBackgroundResource(R.anim.rocket);                 // 把动画设置为背景

                  anim = (AnimationDrawable) iv.getBackground();      // 获取背景

           }

           public void start(View v) {

                  if(anim.isRunning()) {

                         anim.stop();

                  }

                  anim.start();

           }

    }

    2)Tween动画:

    ①、有点类似以前弄的图片,处理,如旋转,缩放等,但Tween动画,注重的是动画过程,而不是结果;

    ②、创建方法:

    使用xml文件来定义动画,然后通过AnimationUtils来加载,获取动画对象

    使用代码方法,如:

           // 旋转动画(这里设置:围绕自己的中心点旋转)

           RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

           ra.setDuration(1500);                                        // 旋转一次时间

           ra.setRepeatCount(Animation.INFINITE);          // 重复次数无限

           iv_scan.startAnimation(ra);                               // 开启动画

    分类:

    1、透明动画(alpha.xml)

    <set xmlns:android="http://schemas.android.com/apk/res/android"

        android:shareInterpolator="false" >

        <!-- 透明动画 -->

        <alpha

            android:repeatMode="reverse"             // 反转,播放动画

              android:repeatCount="infinite"              // 重复播放

            android:duration="1000"

            android:fromAlpha="1"

            android:toAlpha="0.2" />

    </set>

    2、缩放动画(scale.xml)

        <!-- 缩放动画 -->

     <set>  

          <scale

            android:duration="1000"

            android:fromXScale="1.0"                  // 起始x缩放级别,

            android:fromYScale="1.0"                  // 起始y缩放级别

              android:toXScale="2"                           // 目标x缩放级别, 这里设置为放大一倍

            android:toYScale="2"

            android:pivotX="0"                                   // 动画中心点设置;0 基于左上角;50%基于自身中央,50%p基于父容器中央, 大于0基于此像素

            android:pivotY="0"

            android:repeatCount="infinite"

            android:repeatMode="reverse"/>

    </set>

    3、位移动画(translate.xml)

        <!-- 位移动画 -->

        <translate

            android:duration="1000"

            android:fromXDelta="0"                            // 起始位移位置

            android:fromYDelta="0"

            android:repeatCount="infinite"

            android:repeatMode="reverse"

            android:toXDelta="100%"               // 移动到哪里,这里设置为,移动自身的右下角位置 100%

            android:toYDelta="100%" />

    4、旋转动画(rotate.xml)

         <!-- 旋转动画 -->

        <rotate

            android:duration="1000"

            android:fromDegrees="0"            // 旋转角度范围设置

              android:toDegrees="360"

            android:pivotX="50%"                // 动画中心点设置

            android:pivotY="50%"

            android:repeatCount="infinite"

            android:repeatMode="restart"

           />

    5、组合动画(all.xml)

          <!-- 组合动画:旋转 + 缩放 + 透明 -->

        <rotate

            android:duration="1000"

            android:fromDegrees="0"

            android:interpolator="@android:anim/linear_interpolator"         // 动画篡改器,设置匀速转动,不出现完成后,停顿

            android:pivotX="50%"

            android:pivotY="50%"

            android:repeatCount="infinite"

            android:repeatMode="restart"

            android:toDegrees="360" />

        <scale

            android:duration="1000"

            android:fromXScale="1.0"

            android:fromYScale="1.0"

            android:pivotX="50%"

            android:pivotY="50%"

            android:repeatCount="infinite"

            android:repeatMode="reverse"

            android:toXScale="2"

            android:toYScale="2" />

        <alpha

            android:duration="1000"

            android:fromAlpha="1"

            android:repeatCount="infinite"

            android:repeatMode="reverse"

            android:toAlpha="0.2" />

    代码:

     public class MainActivity extends Activity {            

           private ImageView imageView;

           @Override

           protected void onCreate(Bundle savedInstanceState) {

                  super.onCreate(savedInstanceState);

                  setContentView(R.layout.activity_main);

                  imageView = (ImageView) findViewById(R.id.imageView);

           }

           public void onClick(View v) {

                  Animation anim = null;         // 动画对象

                  switch (v.getId()) {

                         case R.id.alphaBT:                              // 透明动画

                                anim = AnimationUtils.loadAnimation(this, R.anim.alpha);       // 根据xml获取动画对象

                                break;

                         case R.id.rorateBT:                             // 旋转动画

                                anim = AnimationUtils.loadAnimation(this, R.anim.rotate);

                                break;

                         case R.id.scaleBT:                               // 缩放动画

                                anim = AnimationUtils.loadAnimation(this, R.anim.scale);

                                break;

                         case R.id.transalteBT:                          // 位移动画

                                anim = AnimationUtils.loadAnimation(this, R.anim.translate);

                                break;

                         case R.id.all:

                                anim = AnimationUtils.loadAnimation(this, R.anim.all);

                                break;

                  }

                  if (anim != null) {

                         imageView.startAnimation(anim);        // 启动动画

                  }

           }

    }

    动画篡改器interpolator

           Interpolator 定义了动画的变化速度,可以实现匀速、正加速、负加速、无规则变加速等;有以下几类(更多参考API):

    AccelerateDecelerateInterpolator,延迟减速,在动作执行到中间的时候才执行该特效。

    AccelerateInterpolator, 会使慢慢以(float)的参数降低速度。

    LinearInterpolator,平稳不变的,上面旋转动画中使用到了;

    DecelerateInterpolator,在中间加速,两头慢

    CycleInterpolator,曲线运动特效,要传递float型的参数。

    API Demo View 中有对应的动画插入器示例,可供参考;

    xml实现动画插入器:

    1、动画定义文件 /res/anim/目录下shake.xml :

           <translate xmlns:android="http://schemas.android.com/apk/res/android"

                      android:duration="500"

                      android:fromXDelta="0"

                      android:interpolator="@anim/cycle_3"

                      android:toXDelta="10" />

    2、interpolator 指定动画按照哪一种方式进行变化, cycle_3文件如下:

           <cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android" android:cycles="3" />

           表示循环播放动画3次;

    3、使用动画的,程序代码:

          Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);

           et_phone.startAnimation(shake);

    二、样式与主题

    1、样式

    1)、定义样式

    设置样式,在values文件夹下的任意文件中的<resources>中配置<style>标签

    <style name="itheima1">

        <item name="android:layout_width">match_parent</item>

        <item name="android:layout_height">wrap_content</item>

        <item name="android:textColor">#ff0000</item>

        <item name="android:textSize">30sp</item>

    </style>

    2)、继承样式,在<style>标签中配置属性parent

    <style name="itheima2" parent="itheima1">

        <item name="android:gravity">center</item>

        <item name="android:textColor">#00ff00</item>

    </style>

    <style name="itheima3" parent="itheima2">

        <item name="android:gravity">right</item>

        <item name="android:textColor">#0000ff</item>

    </style>

    3)、使用样式

    在layout文件的标签中配置style属性

    <TextView

        style="@style/itheima1"

        android:text="一段文本" />

    2、主题

    styles.xml中也可以为Activity定义属性

    <style name="AppTheme" parent="AppBaseTheme">

        <item name="android:windowNoTitle">true</item>

        <item name="android:windowFullscreen">true</item>

    </style>

    在AndroidManifest.xml文件中<activity>或者<application>节点上可以使用theme属性引用

    <activity

        android:name="com.itheima.style.MainActivity"

        android:theme="@style/AppTheme" />

    三、选择器:

    一)、创建xml文件:

    在drawable/xxx.xml下常见xml文件,在同目录下记得要放相关图片

    <?xml version="1.0" encoding="utf-8" ?>   

    <selector xmlns:android="http://schemas.android.com/apk/res/android"> 

    <!-- 默认时的背景图片-->  

      <item android:drawable="@drawable/pic1" />    

    <!-- 没有焦点时的背景图片 -->  

      <item android:state_window_focused="false"   

            android:drawable="@drawable/pic1" />   

    <!-- 非触摸模式下获得焦点并单击时的背景图片 -->  

      <item android:state_focused="true" android:state_pressed="true"   android:drawable= "@drawable/pic2" /> 

    <!-- 触摸模式下单击时的背景图片-->  

    <item android:state_focused="false" android:state_pressed="true"   android:drawable="@drawable/pic3" />  

    <!--选中时的图片背景-->  

      <item android:state_selected="true"   android:drawable="@drawable/pic4" />   

    <!--获得焦点时的图片背景-->  

      <item android:state_focused="true"   android:drawable="@drawable/pic5" />   

    </selector>

    二)使用xml文件:

    1、使用方法:

    1)、方法一:

    (1)在listview中配置android:listSelector="@drawable/xxx

    (2)在listview的item中添加属性android:background="@drawable/xxx"

    2)、方法二:

    Drawable drawable = getResources().getDrawable(R.drawable.xxx);  

           ListView.setSelector(drawable);

    但是这样会出现列表有时候为黑的情况,需要加上:

    android:cacheColorHint="@android:color/transparent"使其透明。

    2、相关属性:

    android:state_selected :是选中

    android:state_focused :是获得焦点

    android:state_pressed :是点击

    android:state_enabled :是设置是否响应事件,指所有事件

    根据这些状态同样可以设置button的selector效果。也可以设置selector改变button中的文字状态。

    3、Button文字效果

    1)以下是配置button中的文字效果:

    drawable/button_font.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

        <item android:state_selected="true" android:color="#FFF" />

        <item android:state_focused="true" android:color="#FFF" />

        <item android:state_pressed="true" android:color="#FFF" />

        <item android:color="#000" />

    </selector>

    2)Button还可以实现更复杂的效果,例如渐变

    drawable/button_color.xml

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">        / 

    <item android:state_pressed="true">//定义当button 处于pressed 状态时的形态。 

    <shape>

    <gradient  android:startColor="#8600ff" /> 

    <stroke   android:width="2dp" android:color="#000000" /> 

    <corners android:radius="5dp" />  

    <padding android:left="10dp" android:top="10dp" 

    android:bottom="10dp" android:right="10dp"/>  

    </shape> 

    </item> 

    <item android:state_focused="true">//定义当button获得 focus时的形态 

    <shape> 

    <gradient android:startColor="#eac100"/> 

    <stroke android:width="2dp" android:color="#333333"  color="#ffffff"/> 

    <corners android:radius="8dp" />   

    <padding android:left="10dp" android:top="10dp" 

    android:bottom="10dp" android:right="10dp"/>

    </shape> 

    </item>

    </selector> 

    3)最后,需要在包含 button的xml文件里添加两项。

    例如main.xml 文件,需要在<Button />里加两项

    android:focusable="true"

    android:background="@drawable/button_color"

    三)语法示例:

    1、文件位置:

    res/color/filename.xml,文件名被做资源的ID

    2、语法示例

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

        <item android:state_selected="true" android:color="@color/white" />

        <item android:state_focused="true" android:color="@color/white" />

        <item android:state_pressed="true" android:color="@color/white" />

        <item android:state_enabled="true" android:color="@color/black"/>

        <item android:state_enabled="false" android:color="@color/white"/>

        <item android:state_window_focused="false" android:color="@color/black"/>

        <item android:color="@color/black" />

    </selector>

    3、属性

    android:color十六进制颜色,必须的。颜色是用RGB值来指定的,并且可选择alpha通道。

        这个值始终是用#字符开头,后面跟的是Appha-Red-Green-Blue信息,格式如下:

            #RGB

            #ARGB

            #RRGGBB

            #AARRGGBB

    android:state_pressed一个布尔值

    如果这个项目是在对象被按下时使用,那么就要设置为true。(如,按钮被触摸或点击时。)false应该用于默认的非按下状态。

    android:state_focused一个布尔值

    如果这个项目是在对象获取焦点时使用,那么就要设置为true。如,一个选项标签被打开时。

    如果这个项目要用于对象没有被被选择的时候,那么就要设置为false。

    android:state_checkable一个布尔值

    如果这个项目要用于对象的可选择状态,那么就要设置为true。

    如果这个项目要用于不可选状态,那么就要设置为false。(它只用于一个对象在可选和不可选之间的转换)。

    android:state_checked一个布尔值

    如果这个项目要用于对象被勾选的时候,那么就要设置为true。否者设为false。

    android:state_enabled一个布尔值

    如果这个项目要用于对象可用状态(接受触摸或点击事件的能力),那么就要设置为true,否者设置为false。

    android:state_window_focused一个布尔值

    如果这个项目要用于应用程序窗口的有焦点状态(应用程序是在前台),那么就要设置为true,否者设置false。

    4、注意

    A:要记住,状态列表中一个与对象当前状态匹配的项目会被使用。因此,如果列表中的第一项没有包含以上任何一种状态属性,那么每次都会使用这个项目,因此默认设置应该始终被放到最后。

    B:如果出现失去焦点,背景色延迟的情况,不要使用magin。

    C:drawable下的selector可是设置状态背景列表(可以让view的背景在不同状态时变化)说明:也可以定义状态背景列表,但是是定义在drawable文件夹下,用的不是color属性,而是drawable属性。

    四)

    、自定义选择器

    (shape和选择器如何同时使用。例如:如何让一个按钮即是圆角的,又能在点击的时候出现颜色变化。)

    1、定义xml文件,Root Element选择shape

    ①创建view被按下的布局文件:

    进行相应的属性配置,如:

    <?xml version="1.0" encoding="utf-8"?>

    <shape xmlns:android="http://schemas.android.com/apk/res/android"

        android:shape="rectangle" >

     <!-- 此处表示是一个矩形 -->

        <corners android:radius="3dp" />

     <!-- 此处表示是一个圆角 -->

        <solid android:color="#33000000" />

    </shape>

    ②创建view正常显示的布局(新建一个xml同),配置如下:

    <?xml version="1.0" encoding="utf-8"?>

    <shape xmlns:android="http://schemas.android.com/apk/res/android"

        android:shape="rectangle" >

     <!-- 此处表示是一个矩形 -->

        <corners android:radius="3dp" />

     <!-- 此处表示是一个圆角 -->

        <solid android:color="#00000000" />

    </shape>

    2、创建背景选择器:(Root Element为selector)

    <?xml version="1.0" encoding="utf-8"?>

    <selector xmlns:android="http://schemas.android.com/apk/res/android">

        <item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>

        <!-- pressed -->

        <item android:drawable="@drawable/bg_pressed" android:state_focused="true"/>

        <!-- focused -->

        <item android:drawable="@drawable/bg_normal"/>

        <!-- 默认 -->

    </selector>

          

    3、将上面定义好的布局文件设定到选择器中(红字)

    在需要使用背景资源的布局文件中选择上面创建的背景选择器(selector)

    设置布局的clickable为true,并设置点击事件

  • 相关阅读:
    Asp.Net Web API 2第八课——Web API 2中的属性路由
    Asp.Net Web API 2第七课——Web API异常处理
    Asp.Net Web API 2第六课——Web API路由和动作选择
    Asp.Net Web API 2第五课——Web API路由
    开始学习python
    BMI 小程序 购物车
    深浅copy 文件操作
    字典 dict 集合set
    基本数据类型 (str,int,bool,tuple,)
    python 运算符
  • 原文地址:https://www.cnblogs.com/dubo-/p/6676227.html
Copyright © 2011-2022 走看看