您的位置:首页 > 移动开发 > Android开发

Android中的动画,选择器,样式和主题的使用

2016-12-13 17:15 288 查看
一、动画:

1、动画的分类:

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

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

1)Frame 帧动画 AnimationDrawable

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();
}else{
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。

四)

、自定义选择器

(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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: