Android之滑屏动画和自定义控件
滑屏动画
在Android系统中，通过手势识别切换界面时，通常会在界面切换时加入动画，以提高用户的体验效果，这种动画一般都采用平移动画，下一个界面进入时，上一个界面移除屏幕。
图中标识的均为左上角坐标，进入屏幕的界面坐标是（100%p，0），从屏幕切出界面的坐标是（-100%p，0）。需要注意的是，p指的是屏幕，100%p表示整个屏幕。切入和切出界面都是以整个屏幕为单位计算的。
界面切换的平移动画有四个，分别是下一个界面的进入和切出效果，以及上一个界面进入和切出的效果。接下来分别是这四个动画文件：
一、下一个界面进入、切出动画
在res目录下新建一个anim的文件夹，然后分别建立translate_in.xml（下一个界面进入手机屏幕）、translate_out.xml（下一个界面移出手机屏幕）、translate_previous_in.xml
（上一个界面进入屏幕）、translate_previous_out.xml（上一个界面移出屏幕）
1.translate_in.xml <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" //表示动画执行时长为500毫秒 android:fromXDelta="100%p" //x的坐标由100%p移动到0.证明是下一个界面进 android:toXDelta="0"> //入手机屏幕 </translate> 2.translate_out.xml <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="0" android:toXDelta="-100%p"> </translate> 3.translate_previous_in.xml <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="-100%p" android:toXDelta="0"> </translate> 4.translate_previous_out.xml <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromXDelta="0" android:toXDelta="100%p"> </translate>
二、手势滑动
用户通过手指落在手机屏幕上按住屏幕快速滑动屏幕即可切换屏幕。需要注意的是：在滑动的过程中需要过滤一些无效的动作。例如在y轴方向的滑动，以及小范围的滑动等。
因为很多的界面可能都会应用到滑动的效果，为了避免代码的重复量，我们需要把代码提取出来，使代码更好的运用。下面的这个类是一个抽象类需要使用它的类继承它，并强制重写其中的一些方法。
public abstract class BaseSetUpActivity extends Activity{ private GestureDetector mDetector; @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); //初始化手势识别器 mDetector = new GestureDetector(this,new GestureDetector.SimpleOnGestureListener(){ /* * 快速滑动的事件 */ @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { //判断滑动的姿势对不对 if (Math.abs(e2.getRawY() - e1.getRawY())>100) { ToastUtils.showToast(getApplicationContext(), "你滑动的姿势不对哦！"); return true; } //判断滑动的速度 if (Math.abs(velocityX)<100) { ToastUtils.showToast(getApplicationContext(), "你滑动的速度太慢啦！"); return true; } if (e2.getRawX() - e1.getRawX() > 100) { showPreviousPage(); //调用跳转到上个页面的方法 return true; } if (e1.getRawX() - e2.getRawX() >100) { showNextPage(); //调用跳转到下一个页面的方法 return true; } // TODO Auto-generated method stub return super.onFling(e1, e2, velocityX, velocityY); } }); } public abstract void showNextPage(); public abstract void showPreviousPage(); /* * 点击下一步跳转页面 */ public void nextPage(View view){ showNextPage() ; } /* * 点击上一步跳转到上个页面 */ public void PreviousPage(View view){ showPreviousPage(); } /* * 触摸后的事件回调 * (non-Javadoc) * @see android.app.Activity#onTouchEvent(android.view.MotionEvent) */ @Override public boolean onTouchEvent(MotionEvent event) { // TODO Auto-generated method stub mDetector.onTouchEvent(event);//委托手势识别器，处理触摸事件 return super.onTouchEvent(event); } }
自定义控件
在Android实际的开发中，我们为了更好的让用户使用我们的软件，我们常常需要自定义一些控件来满足我们开发过程中的需要，下面我来举个例子：
这是一个自定义的控件，由两个TextView、一个View和一个ToggleButton组成。这个控件不是Android开发自带的，而是需要用户自己通过代码和布局文件实现这样的一个效果。
1.首先需要我们建立一个布局文件ui_setting_item_view.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginLeft="5dp" android:layout_marginTop="10dp" android:textColor="@color/black" android:textSize="25sp" android:text="标题" /> <TextView android:id="@+id/tv_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/tv_title" android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:textColor="#88000000" android:textSize="20sp" android:text="描述" /> <CheckBox android:button="@drawable/btn_selector" android:id="@+id/cb_status" android:clickable="false" android:focusable="false" android:layout_width="30dp" android:layout_height="30dp" android:layout_alignParentRight="true" android:layout_marginRight="5dp" android:layout_marginTop="7dp" android:layout_centerVertical="true" android:gravity="center"/> <View android:layout_below="@+id/tv_desc" android:layout_width="fill_parent" android:layout_height="0.2dip" android:layout_marginTop="5dip" android:background="#bb000000"/> </RelativeLayout> 上述布局文件中，Button按钮使用了一个背景选择器，当按钮处于选中状态时，为按钮指定一个背景图片btn_checked_on.png（开启状态），当按钮未被选中时，为按钮指定一个背景图片btn_checked_off.png（关闭状态） 在res/drawable/btn_selector.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_checked="true" android:drawable="@drawable/btn_checked_on"> </item> <item android:state_checked="false" android:drawable="@drawable/btn_checked_off"> </item> </selector> 2.自定义控件属性 由于自定义控件中没有设置标题、状态开启时的描述和状态关闭时的描述，因此需要在在res/values/attrs.xml 文件中定义对应的两个属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="SettingView"> <attr name="title" format="string" /> <attr name="descs" format="string" /> </declare-styleable> </resources>
<declare-styleable>........</declare-styleable>代表自定义属性， <attr />代表的内容就是具体的属性，name表示属性的名称，format表示属性的数据类型。
3.实现自定义控件
自定义控件的布局以及所需的属性都已经定义完成，接下来通过代码实现自定义控件，在定义控件时，需要继承RelativeLayout，并创建自定义控件类的构造方法。
SettingItemView.java
// 特殊的相对布局，创建对象的时候就把里面的内容初始化出来
class SettingItemView extends RelativeLayout{
private CheckBox cb_status;
private TextView tv_desc;
private TextView tv_title;
private String[] descs;
public SettingItemView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context); //调用初始化控件的方法
}
public SettingItemView(Context context, AttributeSet attrs) {
super(context, attrs);
String title=attrs.getAttributeValue
("http://schemas.android.com/apk/res/com.itcast.mobilesafe58.activity","title");
String desc = attrs.getAttributeValue
("http://schemas.android.com/apk/res/com.itcast.mobilesafe58.activity", "descs");
init(context); //调用初始化控件的方法
setTitle(title);
descs = desc.split("#"); //以#分割
setDesc(descs, false);
}
public SettingItemView(Context context) {
super(context);
init(context); //调用初始化控件的方法
}
/*
* 初始化控件的方法
*/
private void init(Context context){
//把资源文件转化成view对象，显示在自己身上
View.inflate(context, R.layout.ui_setting_item_view, this);
cb_status = (CheckBox) findViewById(R.id.cb_status);
tv_desc = (TextView) findViewById(R.id.tv_desc);
tv_title = (TextView)findViewById(R.id.tv_title);
this.setBackgroundResource(R.drawable.btn_green_normal);
}
/*
* 设置自定义控件的标题
*/
public void setTitle(String text){
tv_title.setText(text);
}
/*
* 设置自定义控件的内容
*/
public void setDesc(String[] descs,boolean checked){
this.descs = descs;
if (checked) {
if (descs != null) {
tv_desc.setText(descs[0]);
}
}else {
if (descs != null) {
tv_desc.setText(descs[1]);
}
}
}
/*
* 判断组合控件是否被选中
*/
public boolean isChecked(){
return cb_status.isChecked();
}
/*
* 设置组合控件的选中方式
*/
public void setChecked(boolean checked){
cb_status.setChecked(checked);
if (checked) {
tv_desc.setTextColor(Color.GREEN);
if (descs != null) {
tv_desc.setText(descs[0]);
}
}else {
tv_desc.setTextColor(Color.RED);
if (descs != null) {
tv_desc.setText(descs[1]);
}
}
}
}
当UI布局文件中需要引入自己自定义的控件时，首先需要为自定义控件声明命名空间。在Android系统中，声明控件的命名空间格式为： xmlns:itheima（自己随意命名）="http://schemas.android.com/apk/res/包名"
当引用自定义控件时，需要使用控件的全路径。
例如：文件中的加粗部分就是怎么引入自定义的控件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:itheima="http://schemas.android.com/apk/res/com.itcast.mobilesafe58.activity" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" tools:context=".SetUp2Activity" > <TextView style="@style/TitleStyle" android:text="2.手机卡绑定" /> <TextView style="@style/ContentStyle" android:text="通过绑定SIM卡:"/> <TextView style="@style/ContentStyle" android:text="下次重启手机,发现SIM卡变"/> <TextView style="@style/ContentStyle" android:text="化就会发送报警短信"/> <com.itcast.mobilesafe58.view.SettingItemView android:id="@+id/siv_bind" android:layout_width="match_parent" android:layout_height="wrap_content" itheima:descs="SIM卡已绑定#SIM卡没有绑定" itheima:title="点击绑定SIM卡"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/presence_invisible"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/presence_online"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/presence_invisible"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/presence_invisible"/> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/ic_launcher" /> <Button style="@style/NextPage"/> <Button style="@style/PreviousPage" /> </RelativeLayout> </LinearLayout>
posted on 2016-05-24 09:20 kang_ya_ping 阅读(1863) 评论(0) 编辑 收藏 举报
